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

Tags: , , , &

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.

Designing for Retina by Zing Design

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 :D 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

Save the vector image at double the width and height

Saving the normal version of a PNG for Retina optimisation.

…and the normal version if looks blurry when scaled down

Image naming convention for Retina optimised image.

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!

People who have viewed this post also viewed

Comments

  1. qcalamin

    Responsive is a trend that more people are going to start to pick up on. More and more people are wanting mobile sites as well. This is a perfect fit for them. Thanks Jonathan for sharing the link. :)

    Reply

Leave a comment

* Required fields

captcha

Please enter the CAPTCHA text