Responsive Design for Retina Displays on iPad and iPhone
On March 16, the third generation iPad was released for sale in the United States. Apple is calling it Resolutionary. The amount of pixels packed into the display is simply amazing: 2048×1536. 3.1 million pixels — in a 9.7-inch display.
With great resolution comes great responsibility.
Fuzzy Internet
One thing that I am hearing early on about the new iPad, from multiple folks, is that websites look fuzzy. The tweet below inspired this post:
It’s not WHY they did it, but the Retina display will help Apple move even more people from websites to apps. Websites look fuzzy now.
— Neven Mrgan (@mrgan) March 16, 2012
Many sites have “mobile” versions for iPhone but when I got my iPhone 4S, which has a retina display, I noticed that the graphic elements also looked a bit blurry.
Fortunately, as designers, there is something we can do.
Media Queries, Retina Style
As I touched on in, Making a Case for Responsive Design, we can use Media Queries to specify CSS for certain types of screens and devices. The snippet below should work just fine:
/* Mobile Retina CSS */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
/* Put CSS here */
}
Example
A good example of this would to use a header tag for a logo. The HTML would be:
Bar, Inc.
And the CSS would be:
/* Basic Style */
h1.foo {
float: left;
width: 0;
height: 100px;
padding-left: 160px;
overflow: hidden;
background: transparent url('foo.png') top left no-repeat;
background-size: 160px 100px;
}
/* Retina Style */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
h1.foo {
background: transparent url('foo-2x.png') top left no-repeat;
/* twice the background size above */
}
}
You could add a “low-res” and a “high-res” version for your graphics; a background image in the above example. This works best for sprites, detailed logos, icons. In order to keep the amount of files low, for other graphics, we can simply set the background-size and it will be scaled down.
Best Practices
Of course, this method is only needed for graphics.
With proper planning, which is key to responsive design, you can minimize the amount of elements needed to convert. Use CSS for as much styling as possible: gradients, rounded corners, shadows, etc… That way as the browser renders there will be less blur and more crisp, browser-rendered, elements.
Thanks, we are working on implementing responsive design into our wordpress themes at the moment, and its a bit of a challenge dealing with the massively high resolutions on relatively small screens.
Espeiclaly with the iphone which has a similar pixel width as a normal desktop screen but is much smaller, it won't trigger responsive screen size threshholes. How can we detect these small but high res screens to display an appropriate image/text size?
The above @media query in the CSS will let you specify for something with a retina display. Such as iPhone. If you wanted to be more granular you could also specify the screen size as well.
For example:
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max–moz-device-pixel-ratio: 2), and screen (max-device-width: 320px)
The above will let you specify background images for elements such as an H1. I recommend that method for design elements such as logos.
I will be following up with another post on how to replace images ( for instance illustrations in a blog post ) instead of just design elements such as a logo.
Be sure to check out this blog on iPhone, iPad, and a Mac and see the differences. Same set of HTML. CSS reflows elements.
So far the only images that are used happen to be the "featured post" images. I'm evolving the design as time goes on. But I wanted to make it a smooth process, no matter what device you use. Practice what I preach so to speak
Tomorrow, I'll be launching a blog post on how responsive design changes the workflow of web design. Be sure to check that out too. Hope it helps.
Am I right or do you have one too many hyphens in (moz–max…)?
Actually that is the correct amount. If you look on Mozilla's site, "-moz-device-pixel-ratio" accepts the prefix, "min-" so when combined you have a double dash.
Good post! As a designer I started doing some testing with Retina images an come to a stunning conclusion. It IS possible to compress the hell out of Retina images and still get a sharper image on Retina screens. The Retina images are even smaller than normal resolution images, Sounds impossible, but true! You can read a blogpost about this phenomenon with lots of test images here:
http://design.netvlies.nl/ontwerp/retina-revoluti…
Hopefully a small contribution to the discussion!
Daan