Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Julian Alejandro Clatro Saiz
12,009 PointsHow to design for Standard and Retina displays?
Hello!
I work on a Macbook pro Retina, as a graphic designer i want my designs to display the same over all devices. I use media queries and rem font values to achieve that. But i think i'm missing something, because when i look at my site on a Normal Screen (1680x1050) everything looks bigger.
Whats the best technique to achieve harmony in both display resolutions?
Is there way to resolve this without JS?
Bests
Kevin Lozandier
Courses Plus Student 53,747 PointsHi, Julian Alejandro Clatro Saiz:
There's many ways to battle this without necessarily reaching for JS.
Text
As far as text, you shouldn't have a problem, especially if the values do not lead to "hairline" borders & etc that previous versions of iOS & some older browsers had trouble accommodating.
Images
It's a bit tricker with images, which is the source of likely visual representations of content being bigger than you expected.
CSS Media Queries: dpi, device-pixel-ratio, dppx, & etc.
With CSS Media Queries, you have direct access to resolution qualifiers to know the resolution density of the screen clients are using.
Treehouse's very own Guile has various videos about leveraging these CSS Media Query qualifiers in the CSS Foundation course.
Nonetheless, you can then use that information provided by these query qualifiers to serve an appropriate image. For retina users and other users high DPI screens, images not accommodating their device's optimal screen resolution will appear stretched out & blurry generally.
Picture Element
To make it easier from HTML to accommodate different images be served for high DPI ("retina") devices, there's also the picture element. Treehouse's Nick has a comprehensive course leveraging the HTML5 element to accommodate HI-DPI screens & handle art-direction concerns. The latter is the primary reason the picture element exists.
One-size fits all
It's common these days to have the retina version of image content that is also served to 1x users. To l
Dynamic (cloud) resizing
Another interesting alt that takes advantage of techniques soon to be standardized (client hinting) is services such as Imgix.
With their query-based idea (or their JS library), such services dynamically resize source images to account for high DPi (or 1x ) devices with ease that can be optimized to leverage and manage their representing on client devices current client-side Web technologies do not allow.
Kevin Lozandier
Courses Plus Student 53,747 PointsHi, Julian Alejandro Clatro Saiz:
There's many ways to battle this without necessarily reaching for JS.
Text
As far as text, you shouldn't have a problem, especially if the values do not lead to "hairline" borders & etc that previous versions of iOS & some older browsers had trouble accommodating.
Images
It's a bit tricker with images, which is the source of likely visual representations of content being bigger than you expected.
CSS Media Queries: dpi, device-pixel-ratio, dppx, & etc.
With CSS Media Queries, you have direct access to resolution qualifiers to know the resolution density of the screen clients are using.
Treehouse's very own Guile has various videos about leveraging these CSS Media Query qualifiers in the CSS Foundation course.
Nonetheless, you can then use that information provided by these query qualifiers to serve an appropriate image. For retina users and other users high DPI screens, images not accommodating their device's optimal screen resolution will appear stretched out & blurry generally.
Picture Element
To make it easier from HTML to accommodate different images be served for high DPI ("retina") devices, there's also the picture element. Treehouse's Nick has a comprehensive course leveraging the HTML5 element to accommodate HI-DPI screens & handle art-direction concerns. The latter is the primary reason the picture element exists.
One-size fits all
It's common these days to have the retina version of image content that is also served to 1x users. To l
Dynamic (cloud) resizing
Another interesting alt that takes advantage of techniques soon to be standardized (client hinting) is services such as Imgix.
With their query-based idea (or their JS library), such services dynamically resize source images to account for high DPi (or 1x ) devices with ease that can be optimized to leverage and manage their representing on client devices current client-side Web technologies do not allow.
1 Answer
Luke Pettway
16,593 PointsThings look bigger on standard displays because they don't have a doubled pixel density. There are media queries that you can use to target retina only, but to be honest you shouldn't really need to do that. Is the issue just that some of the content looks larger? If you are using best practices such as rems, setting images to width: 100% and using responsive image markup, then I think that is all you should have to do.
There are so many devices on the web, literally millions of them, your design is going to look different across a vast majority. The only issue you really run into where you have to implement a fix are important images because of the scaling issue. As long as your content is proportional albeit larger, it should still be okay. Of course, that doesn't mean there isn't an issue with the overall structure of the website itself that is causing an edge case problem. Do you have any examples of the issue you are experiencing?
Chances are your design is most likely fine, it is definitely jarring to look at the same site on a standard non-retina screen vs the latest and greatest Macs. I'm using the new 27" iMac and there is always a lot of white space on each site of the main content column of sites, but I've gotten used to it.
Seth Barthen
11,266 PointsSeth Barthen
11,266 PointsI can't remember exactly but you achieve this with CSS. You will basically just set the height and width to the image per each media query and you should be good to go. There is a treehouse video that explains this somewhere that Nick Petitt or whatever his name is demonstrated. Sorry I can't give you a more sound option but there is no reason to use JS.