Gary Bacon

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:

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 and CSS below:

<h1 class="foo">Bar, Inc.</h1>
/* 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.