Retina iPad vs The Web

18 March 2012

Many words have already been spilled about the sheer beauty of the screen on the new iPad; whilst they seem hyperbolic, they are pretty spot on: it’s amazing. The best screen I’ve ever seen, easily.

In fact, it’s too good.

When the iPhone 4 came out I – and many others – started shunning any apps that hadn’t been “retina-ized”, as they looked pretty rubbish in comparison with everything else on the device. The web got away ok on this front, as the screen was pretty small and most sites were being scaled down anyway (in fact, the retina display really helped with the readability of scaled down sites).

Now, however, in comes the retina iPad and it doesn’t have that luxury of scaling down sites; it has a big enough display to show sites at full resolution, and in fact the web is one of the primary uses of the device.

And now, all of a sudden, it looks rubbish.

Text is fine, as is anything using CSS3 properties like border-radius, but any and all graphics look pretty horrible and stand out like a sore thumb in their near 8bit pixel-y glory.

Fortunately it’s pretty easy to send retina-display devices (currently only iPads, iPods and iPhones, as there are no Android pixel-double devices I’m aware of) different graphics using a CSS media query thusly:

@media screen and (-webkit-min-device-pixel-ratio: 2) { // styles go here }

Combined with the background-size (to scale the images by half) and some double size graphics it’s not to hard, if a little bit of a pain if you’ve got a graphics heavy site. There’s also the obvious downside that you’ve got to send double size graphics, which will mean they take up a lot more bandwidth but that can’t really be helped.

For inline images – rather then CSS based graphics – it’s slightly trickier; you could just serve everyone double size graphics and scale them down to the right size, but that would have pretty significant bandwidth implications (although has the plus side of being easy to implement). Alternatively, you could use a bit of JS to switch graphics resources on the fly in a similar way to this Responsive Images script does.

In a similar fashion I’m hoping that the retina iPad is finally the kick up the backside that eMagazine creators need to switch away from packaging up a series of images as a “magazine”; they’re already huge and doubling them in size to make them retina compatible will drive most over the 1GB/issue mark, which would be ridiculous. Here’s hoping they switch to something HTML based so the file sizes get significantly smaller, not even bigger…

Signup to receive the latest articles from de-online in your inbox:

Further reading:

Bubble

I have two main ways of getting to work. One way – my normal way – involves a slightly soulless walk, slightly mediocre coffee, and a slightly less crowded tube train at the end of it. The other way features rammed carriages but significantly better flat whites.

I was in the...

You Used To Call Me On My Cellphone

My first MP3 player was this terrible, brick-like contraption made by Nokia. I couldn’t afford a regular player, so to take part in the nascent digital music revolution I was forced to get something on a phone contract that also happened to play MP3s. I paid a big price, not...

I Want My MTV

You’ve watched Making A Murderer, haven’t you? And of course when I say watched I really mean binged, episode after episode flickering past in a haze of instant entertainment addiction. If you haven’t watched that show, you will almost certainly be familiar with the experience.

Making A Murderer – and its...

Music in 2030

Flying cars, hoverboards, and self-drying jackets — predicting the future is hard.

However, if we’re just to focus on music right now, it’s a fascinating time. Certain things are falling into place, which means that the path is maybe—just maybe—becoming clearer for the minute. At least, that is, in...

What We Can Learn

It’s about 7pm on a dark November Friday. The weather has turned from unseasonably warm to appropriately bitter. That hasn’t stopped the shoppers flocking to one of the capitals premiere shopping destinations, however. They mill around, bags in tow, flicking Christmas signs lighting up their work-weary faces.

In HMV there...