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:
[css]
/* Mobile Retina CSS */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max–moz-device-pixel-ratio: 2) {
/* Put CSS here */
}
[/css]
Example
A good example of this would to use a header tag for a logo. The HTML and CSS below:
[code language=”html” title=”The HTML”]<h1 class="foo">Bar, Inc.</h1>[/code]
[css]
/* 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 */
}
}
[/css]
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.