Web Design Wednesday: how to make graphics for retina screens

With the release of retina displays, such as Apple's new MacBook Pro with retina display, designers have been thrown yet another curve ball with which to keep our designs up to par. Not only do retina graphics exist on mobile and tablet devices but now need to be optimized for desktop computers!

I have the great opportunity with ideaLEVER to be able to both design and develop some mobile sites for our clients, and am lucky enough to own an iPhone 4 to test the following example with. If you are lucky enough to have a iPhone 4s, Nexus, Galaxy, iPhone5, Surface Tablet, iPad3, the new iPad, or even a shiny new MacBook Pro with retina display then this will tickle your fancy.

Yesterday, I found myself with the challenge of trying to increase the clarity of the graphics implemented on my iPhone4, realizing that they were all slightly fuzzy.

Thankfully, the answer to all my problems was already tucked away in our new default structure.css file, in the form of the retina display media query. Every new SiteCM skeleton site (staging site) comes with the full list of most widely used media queries in anticipation of our resellers implementing a responsive design.

It looks just like this:

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {        
	/* styles go here */
}

That fancy piece of CSS targets all devices, like the ones listed above and more, with "retina" screens (in other words, 2x the pixel ratio) to display additional styling, such as new graphics to be sharper, which is what we are going to do here.

The example

The site we are working on is www.wildlifeaccidents.ca . When viewing the original implementation on an iPhone 3, 3GS, Google Nexus, Blackberry Curve and Storm, the site displays great. But on an iPhone 4, upon closer inspection, all of the graphics (logo, icons) look slightly fuzzy. The reason for this is that retina screens use twice the pixels depth to give us better text rendering that's closer to print than ever before. You would think that this means you need to create images at a higher resolution, but no.

The simple awnser to this is that you need to supply the browser with images that are still 72ppi, but at twice the size. So if your logo if 150px by 150px, to support all retina devices you need to supply the same logo at 300px by 300px, and use CSS to resize the background to still fit within your 150px container.

Here is the CSS for the standard layout for one of my objects (note that CSS unnecessary for this example has been removed):

.ui_logo { 
	width:171px; 
	height: 108px; 
	background: transparent url(/mobile/images/logo.jpg) no-repeat center center scroll;
}

Notice the image path leads to "logo.jpg" and my container size is specified here, to mimic the size of the image as if it were inline.

To optimize this for retina screens, I will simply take my logo layer in Photoshop (and hopefully you are using a vector smart object, or at least a smart object of a logo that is massively big, so you are not using destructive design habits) and then easily scale it up to twice the size it currently is.

To do this, I would use the Move Tool (hotkey "V"), and click once on one of the anchor points to activate the scaling feature. Then put in "200.00%" in the width and height of the advanced options in the top toolbar and press ENTER (you may have to hit ENTER twice). next, take the slice tool (hotkey C, SHIFT+C) and create a slice that is 2x the size EXACTLY (it is important to retain proportions here) as the first image. Name the image the same as the original, but add "@2" to the end of the file name so it's easily identifiable as the retina graphic. Last, Optimize the image by Saving for web and devices (CTRL+ALT+SHIFT+S on Windows, CMD+OPT+SHIFT+S Macintosh) to the same folder.

Going back to my structure.css file, in the retina media query at the bottom of the style sheet, start a declaration for the objects background image you want to replace:

.ui_logo {     
	background-image: url(/mobile/images/logo@2.png);     
	background-size: 171px 108px;
}

Refresh, and you're done!

Now I have some beautiful crisp graphics on retina displays (which should also translate to those shiny new MacBook Pros that Apple is now selling).

Thanks to Chris Spooner, and his article on Line25.com for helping with this technique. He also has a great tip on how to replace HTML images with retina enhanced ones with some JavaScript.

Planning on supplying us a mobile design in the future? Here are some tips to help us maximize the quality of our implementation for your designs:

1. Retain all vector paths, and shape layers made in Photoshop
2. If you are exporting from illustrator to Photoshop, these layers will be rasterized which will not allow us to resize your graphics to maximum quality. You will need to send us an additional  file(s) with your objects scaled to 200% of the original artwork. This includes:
   1. Warped shadows
   2. Arrows
   3. Icons
   4. Logos
3. Give us the original source files of your images and graphics if you would like us to do it ourselves.

Something to keep in mind

If your client wants to support these newer displays such as the iPhone 4, then this will take some extra development time to create, code, and test these new graphics so budget your time appropriately.

If you want to improve your mobile site graphics on your existing mobile or responsive/adaptive website, contact us for a quote.

Happy coding!