What does retina display on desktops & laptops mean for developers?

914 8

The iPhone 4 wow’d us with retina display – the ‘HD’ mobile display that is now the benchmark for top end mobile devices. For mobile site developers however, this added an extra layer of required development because images used in mobile web designs now looked blurry on an iPhone 4. Because the retina screen essentially ‘explodes’ each pixel into 2 pixels in order to generate a denser pixel grid, logo’s and images used in mobile designs now were expanded to twice the size and you ended up with a blurry image.

Thus each logo/image used in a mobile web layout, required a duplicate image, at a higher resolution. Then with a bit of CSS3 Media Query magic, you’d check the resolution of the user’s mobile device and if higher than X, you’d display the higher resolution image.

@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {

  #logo {
    background: url(images/logo-iphone.png) 0 0 no-repeat;
    background-size: contain;
  }
}

So not a massive time-sink, but on a site with loads of CSS’d images etc, you can see the potential time required to retina-display-ify a mobile site.

If the Apple rumor-mill is to be believed, the new Macbook Pro and iMac lines could be getting retina displays.

This now means that responsible developers will need to go through all their sites, themes, client work etc and add a new layer of images & code to cater for these higher-resolution displays.

I don’t see any quick way out of this either… Whilst a plugin could perhaps cater for the code side of the required tweakage, it requires a higher resolution image which no plugin is able to do.

So bottom line is us developers and designers – all of us, not just those of us who do mobile sites – are going to have to spend a fair chunk of time preparing our sites for the enslaught of new retina enabled devices. What do you think? Am I making a big deal of nothing?

Comments

What does retina display on desktops & laptops mean for developers? @yellowllama gives us some insight http://t.co/FYdc2IOd

What does retina display on desktops and laptops mean for devs: http://t.co/QhROXbU2

As you know, I’m not developing much these days but like to stay abreast of things, so thank you for posting this. Quite scary to think that as the web moves, so do we have to in terms of updating all our sites. For a web agency this could lead to a massive overhead in terms of time – eish!

Indeed. Hence the emphasis on “responsible designers”. Unfortunately the majority of guys won’t give a moments notice to this. But for the rest of us, it does mean a fair chunk of work…

That’s true – but sheesh, those people who ignore this could essentially have a monster meltdown later on when all displays start going this direction, which I’m sure they will – you think so too?

Very true. It’s a push in a direction that other guys are sure to follow. I wouldn’t be surprised tho, if there’s some sort of fallback built in. A change like this will affect every website and I doubt Apple will in 1 foul swoop, render every website to look like crap with their new hardware.

That’s not how Apple plays…

Time will tell I guess…