Feb 6, 2013

How to Optimize Your Site for Retina Display

When Apple unveiled the iPhone 4 in 2010, Steve Jobs made bold claims about the device's new Retina display technology. Jobs boasted that individual pixels could not be picked out when using the high-resolution display, and that the new technology displayed the maximum amount of detail perceivable to the human retina. Although Apple later had to concede that Jobs had exaggerated his claims a little bit, the new technology was a huge innovation for smartphone and tablet displays.

The Advantage of Retina Display

The increased pixels per inch (PPI) of the Retina display results in incredibly sharp graphics, and the clarity and detail is immediately apparent when compared to previous Apple devices and other smartphones. For example, the latest 4S/5 iPhone models have 326 PPI, compared to the 163 PPI of the earlier iPhone 3GS. The increased pixel density means that text, graphics and videos are much more detailed when viewed on a Retina display.

As such, designers and developers are urged to optimize their websites and make them Retina compatible so that there design and appearance are as impressive as possible on the improved display.

Overhaul Your User Interface

With the new Retina display, the pixels that make up a website's user interface (UI) elements are doubled in size. UI elements like backgrounds, banners, buttons and gradients are still the same size on the screen, but they are housing a much greater density of pixels. This means that graphics that have not been optimized for Retina have duplicated pixels to accommodate the increased PPI.

user interface

Although readable, the resulting graphics are blurry and undefined. These graphics do not take advantage of the crispness of the display, and unoptimized websites are easily distinguishable from Retina-friendly websites.

As bitmap files suffer from scaling issues when their resolution is increased, vector graphics are much better when designing UI elements. The pixel dimensions can be doubled to accommodate the increased PPI of Retina displays without suffering from any blurring or degrading issues when scaling up. Higher quality images or photographs with double the resolution should also be used.

Replace Sprites with Icon Fonts

Many websites use icons as part of their design. Icons can consolidate important information into a small graphic, and they are an easier way to communicate with users without relying completely on text. Icons like social media links (the Facebook 'F' symbol, Twitter's small bird icon), the email envelope and the distinctive orange RSS feed graphic are universally recognizable.

Typically, image sprites were used to create these icons, but they also suffer from degradation problems when viewed on Retina compatible devices. Icon fonts are a much better alternative to sprites, and they can serve as good design practice even for websites that are not being viewed on Retina displays.

Icon fonts are sleek, scalable, customizable (their color can be easily changed with CSS) and small in file size. Even better, many designers are happy to share their icon font designs, so there are libraries of different free to use icon fonts available. They can be used to spruce up the likes of banners, headers and buttons, and they are becoming an increasingly important feature in web design.

Use the CSS Media Query to Recognize Retina Devices

Implementing different design features to optimize a website for Retina is all well and good, but not every website visitor will be using a Retina display.

CSS Media Query

The CSS Media Query is a small snippet of code that can detect whether the device which is currently accessing a website has doubled the PPI ratio. If so, it will retrieve the optimized design features to display to the user. This ensures that large vector graphics and high resolution images are only displayed (and downloaded) when a Retina display is recognized by the query:

About the Author

Andrew Donald is a web designer for Webeden - a free website builder. He advises those who are new to building websites on the best practices and trends of web design. He’s interested include pixel art and baking the occasional cake!
Website: www.webeden.co.uk

2 comments:

  1. Have you seen the new my space?

    It looks microsoft-ish.. I don't think it's in retina display though..

    Almost same font and all with the new windows 8..

    Anyway I think it's really regaining its strength.

    It will slowly get back to the hype.

    That's just for me. Please tell me what you think.

    ReplyDelete
  2. Thanks for this wonderful writeup... really useful info about retina display.

    ReplyDelete