If you’ve recently upgraded to a Retina display, it can be a shock to see previously beautiful websites looking suddenly blurry as a week long bender.  Designers, if you want a quick run down on how to design for Retina like a boss, this article is for you.

There are basically two implementation methods for Retina images:

1. Have two versions of all images/graphics – a normal size (1x) and a double (2x) size. Then use a script (retina.js) and/or media queries in your css to call up the version you want depending on device.
2. Just serve up one version of all images/graphics  (the large 2x size) and let the css do the resizing.   This method can be quicker/easier in development, and means that you maintain only one set of images. The con is that on non-retina screens you are serving up images double the size that is needed… although we’re not too concerned about that.

What does it mean for designers? What size should my PSD be?

Design your PSD at the normal 100%, making sure to use shapes and smart objects for all  the elements you want to be Retina.

Then the developer can easily export a double size (2x) version of all Retina layers.
*I like to do that using the fabulous retinize.it Photoshop action.

Note that this design method will work perfectly regardless of which implementation option is chosen by the developer.

Why design at 100% and scale up, instead of 200% and scale down?

First, the non-Retina version of an image will look much closer to the final product, giving you more accurate feedback on how the design will actually look.

Secondly, in web design we work at a pixel level. The code (widths, margins, positioning, font values, layer style values etc) all has to be mathematically perfect, so your PSD must also be pixel perfect. It’s incredibly hard to achieve this unless you are working at 100%. For example, an element with an odd size value that is scaled by 50% will end up with a x.5 pixel value, making the element blurry. Bjango explains this issue in his article “Designing for Retina Display,” as does Niklaus Gerber in his article “Designing for the iPhone 4.”

If you absolutely MUST design at 200% (one reason you might fall into this category is if you are designing on a Retina screen), then save out a copy at 100%, and go through it carefully to check sizes are all correct, before sending it to your developer.

So now you know how to design for Retina like a boss!

It’s not as complicated as it seems from the oodles of code tutorials on the web. Don’t overthink it. Just design at the normal 100% and make sure to use smart objects and shapes for any graphics that you want to render nicely on Retina screens. Your developer will take care of the rest.

Further Reading

• http://retinize.it
• http://www.leemunroe.com/designing-for-high-resolution-retina-displays/
• http://imulus.github.io/retinajs/
• http://bjango.com/articles/designingforretina/
• http://photoshopetiquette.com/  <- A personal fav. ‘Must read’ for all designers.