Retina Display and what it means for your website

11:50 Nov 1st - Nathan

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…

The new MacBook Pro with Retina Display launched earlier this year to critical acclaim. Image courtesy of Apple.

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.

The late Steve Jobs, explaining the Retina Display. Image courtesy of Apple.

The Solution

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.

New Projects

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 Conclusion

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.

Sources

Services: Websites, Work: O2 Our World,

Technology:

Tags: , ,

comments powered by Disqus

The Author

Nathan Harrigan

Nathan has many years experience producing web sites and applications. Specialising in front end technologies, he also has a keen interest in information architecture and user experience.

View nathan harrigan's profile on LinkedIn