Role of Retina Display Graphics in Web Design

Retina display is a technology invented by Apple Inc. It refers to high-density pixel resolutions used on iPhone, iPad, iPod and of course, Macintosh as well.

We all know that monitors and other display devices usually present graphics at 72 PPI (pixels per inch) resolution, but Retina Display devices illustrate graphics on much higher resolutions; iPhone and iPod Touch display them on 326 PPI and iPad displays at 264 PPI.

Now it has become a debate whether to create Retina Display specific graphics in web design, or not…??

The problem with such questions is that they usually don’t have one simple answer. The answer depends on the conditions. So let’s take a look at those conditions and check out how to design these graphics and when to (or not to) design these graphics.

Why Should Designers Care About Retina Display?

In the previous few years, mobile producers have bombarded the market with different kinds of devices. It is obvious that we can’t design graphics specifically for every device out there… yet when the mighty Steve, Steve Jobs of Apple Inc., the father of modern day mobile technology himself launched iPhone 4 with Retina Display, the designers had to take notice.

There are millions of iDevices (iPad, iPhone, iPod and iMac) with Retina Display are surfing the web right now so you have to take notice of that and you have to think about designing graphics specifically for those devices since the routine graphics get blurry and/or shabby.

The Problem

The problem with designing graphics for Retina Display is that you have to create large size images so they can look of a reasonable size at more than 300 PPI resolution, however if you do that, the images look too big when displayed on routine devices.

The Solution

When Apple Inc. designed Retina Display, they started measuring everything in points instead of pixels. So each point now equals four pixels. That means the display system inflates pixels by 2 times.
Conclusion: we have to design graphics 2x the size of normal graphics when we’re making them for Retinal Display devices.

Methods for 2x

Some designers tried to use vector graphics, i.e. SVG images instead of using regular bitmap images. Of course, the idea of resolution independent graphics sounds brilliant but it is now being realized that SVG images (and other vector graphic formats) put too much load on the device so they are not suitable. Besides they are very big in volume.

jQuery

This is a successful technique being used today. The designer makes two images, one for normal screens and one 2x sized image for Retina Display devices. Then a jQuery plugin takes care of displaying the appropriate image according to the user’s device. These plugins include Retina.js and Retina Display Plugin.

CSS Sprites

CSS3 comes as a life saver in today’s web design world. Check out this solution if you’re a CSS guy:

You can check out the complete snippet at miekd, and to learn more on this article about CSS Sprites.

Icons through Fonts

We often have to display icons. For that we can use dingbat fonts instead of icon images. There are many advantages of using fonts instead of images, they are resolution independent, much smaller in size and they can be manipulated easily using CSS. You can add a dingbat font of your choice to a website using @font-face code in CSS3:

To sum it up…

Neven Mrgan said, “resolution independence is not a technique, it’s a goal.” This means that there is no magical solution available which makes your website symmetrical on all resolutions… all we can do right now is to do our best according to the needs.

If you are making a website for an iPhone app, you would want to add functionality for Retina Display, but you should also remember that this functionality is not a need of every client. A good majority of world’s 100 most popular websites still haven’t made their Retina Display websites because they would have to compromise page load time… and page load time is an important SEO factor.

Small business clients never pay extra to get their websites made for Retina Display, this is another factor why Retina Display websites never became a trend.

To conclude, I’d say it is important for you to know how to design, but it is not necessary that you force your every client to get a Retina Display website made.