The three R’s in web design

Ret-i-na – Noun.

A layer at the back of the eyeball containing cells that are sensitive to light and that trigger nerve impulses that pass via the optic nerve.

In web design, there are three R’s that play a vital part in retina display technology.

The three R’s consist of –

• Responsive
• Retina
• Resize

Retina is a high definition display that packs double as many pixels into the same space on web viewing devices as they used to.

Retina Display technology made its debut on Apple’s iPhone 4 in 2011, which featured a 960×640 pixel screen with four times the number of pixels (326 pixels per inch) as the iPhone 3GS.

These displays have spread to a host of laptops, ultrabooks and mobile devices ever since from a wider range of manufacturers.

For designers, this brings up the question, ‘What can I do to make the content look outstanding on new retina enabled devices of which there are going to be many?’

Without consideration, your beautifully crafted and considered layouts look … acceptable, but only just acceptable.

Why not go for the ‘wow’ factor and display crisp sharp beautiful images that pass via the optic nerve and trigger positive impulses in the viewer?

Things to consider when creating retina quality images for your website

The main issue with adding retina images is that the images are double the size as the conventional images we have produced in the past, and will take up extra bandwidth. (this isn’t an issue for apps as the content is contained within the download, but why you might need a retina angry bird is beyond us!)

If your site is mostly used on mobile platforms it may not be wise to make all your graphics high-definition. Perhaps choose only a select few of the more key images.

Are you creating something that will be used more often on a WI-FI or 4G connection, or do you have an application that is deserving of the extra wait?

Web layouts are traditionally done in a design package for sign-off purposes and to standard grid systems. It may be a good idea to get layouts and wireframes signed off first, thereby getting the structure of your web pages correct before creating the assets, which will be twice as large!

Retina extends to icons on your devices too

When users add your website or web app to their home screen it will be represented by an icon (the rounded corner images on your home screens). Below shows the differences icons need to be for apple but again these differ for other operating systems too!

• iPhone 57 x 57
• Retina iPhone 114 x 114
• iPad 72 x 72
• Retina iPad 144 x 144

How to create retina graphics

Our first thoughts were that retina graphics had to be saved with a higher Dpi resolution, but that’s not the case. All you need to do is save a set of retina versions of your images at twice the size, so a 100x100px image would become 200x200px and so on.

These supersized images are then displayed in the original image size dimensions, which helps create that smooth and crisp appearance on high pixel density screens.

So where do the 3R’s come into it?

Responsive website functionality allows your website to be viewed effectively with the same content on a mobile phone or a 1600px desktop computer screen, so imagery needs to be considered to deliver the same quality on all fronts. 

Retina consideration allows you to achieve this and by Resizing your images from your signed off mock-ups, or considering sizes in your assets, hopefully will trigger the nerve impulses and please the eye of the user and drive the visual quality of your website or application.