Retina

Is it time we build websites for retina displays first and then, maybe, optimise for sub-retina displays afterwards?

Full responsive and retina optimised sites are two things that we haven’t yet got enough experience with and haven’t yet come up with a bulletproof working method to build. The more we do, the better we’ll get. But I’m now wondering should we even bother with sub-retina displays?

Sure the vast majority of the worlds laptop and desktop screens are sub-retina; but an increasing amount of mobile phone and tablet screens are retina and Apple have been shipping retina display Mac Book Pros for over 6 months. Microsoft’s surface tablets are nearly retina and have some clever thing to make them look higher resolution than they really are. Thats now. In HD TV land Toshiba have already shipped their first 4x HDTV, which is 4 times as many pixels as a 1080p HD TV at 3840 × 2160 pixels or 8.3 megapixels. And 8x is on its way – its 16 times as many pixels as a 1080p at 7680 × 4320 pixels (33.2 megapixels!). More screens and more pixels. I’m guessing within 18 months Apple, Dell and Microsoft will be shipping retina displays and in few years time they’ll just be the norm.

The Daring Fireball post The Trend Against Skeuomorphic Textures and Effects in User Interface Design talks about the turn against false textures of recent screen design and turn towards using simpler, more print aesthetics and “flat” design. The argument being that the textures were designed to make things look nicer on sub-retina displays where as retina displays don’t need it. Retina displays do away with the need for screen fonts too, as everything is so much easier to read.

Currently when we build a site thats retina compatible I try and use as much CSS3 as possible for rounded corners, gradients, shadows etc. so that they scale up and down correctly without having to export new graphics. And then we have a CSS document that lists all the elements that use a background image and we link to a double size version for retina. I played with SVG, scalable vector graphic versions for Billboard but had to abandon – though I know its the right way forward in the future; clue is in the file formats name. Its not as though retina is an after thought, but that CSS list linking to a double size sprite is almost the last thing we do.

I think we should design and build for retina first of and then tweak little bits for sub-retina a bit like how we build for good web browsers and then tweak the display for Internet Explorer 7 afterwards. Like graceful degradation; only for a screen resolution and not just an old web browser.