Optimising Your Site for the New iPad Retina Display

So, the new iPad, or iPad 3, has sold over 3,000,000 units in just 3 days and it’s not going to slow down any time soon, but whilst the retina display is one of the most talked about features of this new device it seems to be giving site owners and designers a bit of a headache.

Essentially, the increased pixel density of the retina display means that images that look good on the old iPad (and other non-retina display devices) look pixelated and fuzzy on the new iPad.

So, how do you fix this? Whilst there is currently no definitive way of dealing with this problem, there are a few techniques that can help…

Media Queries

This first technique involves creating 2 versions of  an image – a normal one and one double the size. A media query is then used to call the larger image when a high-res screen is detected and reduce it to half the size (the same size as the standard image). Example below:

/* Normal image styles */
.image-class {
    width: 150px;
    height: 100px;
    background: url(/images/image-normal-size.png);
    background-repeat: no-repeat;
}
/* Larger image for retina display */
@media only screen and (-moz-min-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
.image-class {
        background: url(/images/image-double-size.png);
	background-size: 150px 100px;
    }
}

The major downside to this method is that all devices will inevitably load both versions of the images, making for slower loading times and negatively impacting user experience.

CSS3

If you have a graphic-heavy site, it is worth looking into whether you can replace any images by utilising CSS3 features such as gradients, rounded corners and shadows. This will obviously not work with photographs, but reducing the amount of images for mobiles and tablets is a good habit to get into.

Typography

Using typography techniques such as @font-face, along with CSS3′s text-shadow, is another good alternative to images. Also, if you are using icons on your website, for social media buttons or otherwise, why not use a font for those as well? Fonts scale much better than images and there are lots of great icon fonts out there – just Google icon font or pictogram font. The only downside is the lack of customisation available.

None of these techniques are magic bullets – they all have drawbacks and limitations – so, it seems until a perfect solution to this problem is created, developers must keep an eye on the balance between site performance and aesthetics.

Have you used any of the above techniques to optimise your site for retina displays? Do you have any other techniques to share? Tell us in the comments.

 

1 Comment

  1. thomas /

    Very helpful article, thanks.

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>