Earlier this year, Apple launched their fourth product with Retina Display, and they are showing no signs of stopping there. As great as this is, it means you’re going to have to do a little bit of work to your existing sites to stop them looking like a pixellated mess on your boss’ new MacBook pro. Let me explain…
What is Retina Display?
Retina Display is the brand name used by Apple for their high-resolution screens. The geniuses in their hardware department have managed to cram about 4 times more pixels than normal into the same space. So while the standard PPI (Pixels per Inch) for a desktop monitor ranges from about 80 to 180, the new gen iPhones and iPod touches have a whopping 326.
The thinking is that the human eye should not be able to make out any individual pixels from normal viewing distance (that’s 25cm on the iPhone). The results are stunning when viewing a website or application built with Retina Display in mind, but when viewing the majority of the web, you may be left feeling a little disappointed. In fact, the more design-conscious among you may even be totally put off, as all the graphics on those sites appear pixellated.
I can just hear you crying out, “I want my websites to look pretty again!” Well luckily it’s not hard. If you keep a few new practices in mind, all your future projects can take advantage of this new technology. Your current sites can be rescued too, but it can be a bit of pain (especially if you don’t have the original Photoshop documents).
Updating old sites
In an ideal world, you want to remake all the images on your site at 150dpi or higher (the original graphics will be at 72dpi). Of course, this isn’t always possible or practical, so you want to focus on text and graphics. They will look the worst on retina displays; textures and photographs tend to be more forgiving.
Once you have all the new assets, your developer should be able to use some CSS wizardry to serve the high-res images when someone is using a high-res screen, while serving the standard images any other time.
If a few things are kept in mind from the start of the project, achieving a great looking site on normal and Retina Display isn’t hard at all. Designers should be saying goodbye to 72dpi PSDs. From now on, DPI should be set to at least 150. Also, be aware that all these crystal clear images make for bigger file sizes. Your developers should be thinking about using CSS to recreate graphics where practical.
In the two short years it has been around, Apples Retina display has won the public’s hearts and eyes. As long as you keep it in mind from the start of your projects, it’s not hard to build something that will dazzle your users.
- en.wikipedia.org – Retina Display
- www.apple.com – Retina Display
- www.builtbythefactory.com – New MacBook Pro with Retina Display what this means for your website