Apple’s Beautiful Retina Display: The Ugly Truth

But therein lies the problem. Everything made *for* retina displays will look amazing – what about all of the cool stuff that’s been made before retina displays were about? How will older devices handle all that extra data that it’s not capable of displaying? This leads us to…

The Problems

Retina displays, despite their inherent awesome, create quite a few headaches for those of us that work with the web. First, a little background information. Until relatively recently, if you designed a website you tended to work on the assumption that the user would usually have a squarish screen with a resolution around 1024 x 768 pixel resolution, but with recent improvements in mobile technology and networks (more the technology, less the networks) people view the internet on many different size devices, as such, this is no longer as safe assumption.

Evermore, people access information and services with their mobile phones and despite Apple trying their hardest, not everybody owns an iDevice. There are thousands of mobile devices, all with different screen sizes and ratios, all of which have to be able to read your content. This trend resulted in what has come to be known as ‘responsive web design’ which is basically an all-encompassing term for techniques and best practices (usually a mix of CSS Media queries and Js libraries) which allow a full-sized website to comfortably display content on a smaller screen without having to actually detect the device – just the screen size.

Twice as Nice (Or Nasty..?)

And for a time – everything was good and one in the interweb developing world… retina displays, despite being physically the same size, are not the same size – there’s twice as much space crammed in, meaning that one “pixel” is actually two pixels. Unless the pixels per inch (ppi) of the content matches the ppi of the screen, that content gets stretched out and looks all nasty and blurred leaving you with this sort of effect…

Apple Retina Comparison

…so now, we have to accommodate different pixel densities alongside different screen sizes. All of our images have to basically be doubled in size in order for some devices to take advantage of them. Not so much of a problem if you’re a desktop user with a high-speed broadband connection, but remember, this is for the benefit of mobile devices which, typically, are using the slow mobile networks – pushing double the data to everyone for the sake of a few is just not cricket: every bit counts when it comes to loading a web page. So how do we avoid this and provide the best experience for all? This takes us to…

The Problem Solving

Well, there’s a couple of things we can do. Probably the simplest (in terms of both execution and sense) is to optimise your image files. Any good web developer will do this already but it doesn’t hurt to remind people that the bulk of speed issues that websites suffer from are caused by assets loading tons of information they don’t actually need. This way – if you insist on sending hi-res images to everything you at least lessen that pain for most people and they will still look cracking across the web. But that alone won’t do…

Remember the media queries I mentioned briefly earlier? They can help us too. The good old W3C seems to have seen high density pixel displays coming for some time, as such media queries, alongside being able to detect screen sizes, can also be used to detect pixel density like so:

@media print and (min-resolution: 300dpi) { ... }

This way, we only send the hi-res images to devices that can actually display all of that pixel-y goodness saving on data being sent and thus the time a page takes to load. Pretty neat, huh?

If you’re so inclined to use the HTML5 <canvas> element, you need to accommodate for the higher pixel density screen, otherwise your output will suffer from the same time of degradation as any other image. A neat little solution to this problem is to define the canvas width/height attribute as twice as much as you need and then half it with CSS

<canvas id="awesomeCanvas" height="600" width="600"></canvas>
#awesomeCanvas{ width:300px; height:300px; }

This way, two pixels = one pixel, high density! Admittedly, it’s a tad hacky but I’ve used this technique before and the result has been quite nice – just remember to double the values you use when drawing to the canvas.

This is getting long now, so let’s wrap up before I full-on geek out over the specs.

The Future of Retina-Responsive Design

Higher density displays do create a headache for us developers – we now need to have double the number of assets to accommodate for a minority of devices, but what is new and shiny now will become the norm eventually. Apple’s new Macbooks are just the first in a wave of devices that are going to want to take advantage of this technology so best to take relatively simple steps now to future proof our work and provide the best experience for our users.

Some Links You May Find Interesting

Chris Rogers

A passionate developer with an exceptional all round knowledge across web and apps, Chris is a walking bubble of energy.