Responsive website design cheat sheet part 2: What screen densities should I design for?

In my previous blog post on responsive website design, I talked about designing for multiple device widths.

Hardware manufacturers have thrown a curve ball into the works by making their screens too good. A new challenge which web designers have to face is designing for high resolution screens. This article discusses the new work needed and a handy little cheat sheet to help you get started.

High resolution displays are quickly growing in prominence, meaning fancy crystal-clear content for end-users and a whole new set of headaches for designers. I would estimate the proportion of high-res display users at under 10% of the total internet population. It’s difficult to find a definitive figure for this, as the data seems to be scarce and the number is constantly increasing. Needless to say, even at under 10%, that’s a LOT of users!

Every designer and front-end developer knows that we need to start supporting these new-fangled “Retina” devices. (I’ll refer to them as Retina or high-res for the sake of argument, but I’m generally referring to any device with a pixel density greater than 200 ppi. Please don’t sue me Apple).

I’m not going to ramble on about why we need to start doing extra ground work to get content looking pretty on Retina. There are plenty of handy articles out there already, which go over all the ins-and-outs of high-res displays. Instead, I want to make a simple, concise cheat-sheet which serves as to-do list for designers and devs when optimising for Retina displays.

	Tasks
Graphic Format	Graphic Designer	Front-end Developer
PNG	Make each vector image asset double the size, save as PNG-24. If the down-scaled image is blurry or unreadable, make a second smaller copy at the original size. See example below…	Add the PNGs as background images. The normal version sits in the CSS, the Retina version inside the pixel ratio media query (inside HTML5 boilerplate main.css)
JPEG	Use images which are double the resolution (or as close as possible), reduce JPEG quality to 25%	Check your JPEG images on IE9 for aliasing issues.
GIF	Convert to PNG.	Twiddle thumbs
SVG	No extra work needed! SVG is great	Make a PNG fallback for IE 8 or earlier and Android 2 or earlier
Favicon	Make a single favicon.ico file which includes a 16x16px and 32x32px version using X-icon Editor	Add the favicon.ico to your website’s root directory and add the link tag in the CSS.
Touch icons	Make a 57x57px, 72x72px, 114x114px and 144x144px version of your icon	Add the touch-icon link tags in your CSS, (note: they also come with H5BP…)
Animated GIF	Create a double-sized version and a second normal-sized version if the downscaled version is blurry	Watch a cat fighting a baby
Canvas	Go get a coffee	Use some clever JavaScript to check the device pixel-ratio, adjust canvas width and height based on the ratio. Provide a fallback for browsers which don’t support canvas.

Example: PNG optimization

Save the vector image at double the width and height

…and the normal version if looks blurry when scaled down

Then name the images appropriately…

.retina-friendly-example {
    background: url(../img/retinafy-example.png) no-repeat;
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

    .retina-friendly-example {
        background: url(../img/retinafy-example@2x.png) no-repeat;
    }
}

…and add the background image in the CSS

Extra notes:

• Always use CSS where possible, eg. linear gradients can be added easily with cross-browser fallbacks. This will save you requests and will be much easier to maintain.
• Images are presentational, keep them out of the HTML as much as possible.
• You may have a lot of images to optimize, consider using an automator to run batch processes on large groups of images. Use Fireworks, Photoshop or an automation app (eg. Automator built-in to Mac, Action(s) for Windows).

Some important considerations

Think about your content. For example; if your site/app doesn’t contain many images, then it’s probably not worth going to the trouble of adding Retina support. If you’re dealing with a big site with millions of images, introducing Retina support may be a difficult, time-consuming and costly process.

Another factor to consider is your audience, maybe some of your images are going to look a little bit pixelated on a Retina display. Supporting high-resolution screens isn’t exactly a trivial task, so if slightly blurry images aren’t going to be an issue for your users, it may not be worth optimising. Look at your analytics and user feedback, see what proportion of your visitors are using high resolution devices.

Reasons to get retinafying right away

The number of users viewing content on high-res screens is steadily increasing, and no doubt will keep increasing. Over the next few years we will see a shift to high pixel-density screen manufacturing in nearly all electronic devices, along with an increase in user expectations.

One very good reason to start Retina support is that it’ll help to make your projects future-proof. Okay, it’s not necessarily going to look good on the iPad 23 with it’s 72 inch 3D hologram screen… but it’ll keep your site looking crisp as the world transitions to higher resolution screens over the next few years.

I’d like to extend a big thanks to Thomas Fuchs, author of Retinafy your web sites & apps.

Need help with your next responsive website?

Designing with Retina support for a fresh new project is pretty straightforward, implementing it half way through… not so easy. If you do have an existing site which needs to be retinafied… well come and talk to us!