You Suck at Retina
It’s been six months since the Retina MacBook Pro shipped and web developers everywhere are still clutching their keyboards to their chest, ignoring Progress, and rocking themselves into a dark, pixel-fearing delusion.
Pixels are the future, be it on an iPad or MacBook or Android phone. Photos jump out at you. Icons pierce your soul. Letterforms curve through your screen like a polka dancer dropping acid.
The Retina MacBook Pro is still very much a luxury item, but we’ve had a Retina iPad for almost a year and the iPhone 4 for two and half years. High definition displays in widespread usage are five times older than Gangam Style.
And yet, the internet is still having a hard time adopting. Startups slave for months meticulously designing their new marketing site and are completely oblivious that, to people on a Retina display, it looks like a jumbled pixelated mess.
Here’s an actual, unretouched screenshot I took of a new startup that launched this week:
See? Pixels everywhere. I don’t even see the sites anymore: all I see is yellow pixel, brown pixel, red pixel…
The Fix is In
The fix is easy, but few implement the fix: serve higher-resolution assets.
There are a few ways to do this. Apple.com is one of the approximately two sites on the internet that have mostly switched-over to high resolution assets, but they use some janky JavaScript to first download the image at 1x (normal resolution), shoot another request to test the existence of the image at 2x (twice the size), download the image at 2x, and swap the 1x image out of the DOM with the 2x image. It gives your eyes the distinct impression that they have cataracts as they adjust to the blurry image for a split-second before it bumps up to something pleasant to look at. On top of that, Retina devices incur the additional overhead of loading two images and an additional request in order to render the image at 2x.
The easier way is to just load the 2x asset for all clients:
<img src="/images/header-500px.png" width="250" />
Modern browsers are pretty decent now at scaling down assets in-page. That’s typically fine for photos, and for things like logos — where you want pixel- perfect scaling at smaller sizes — you can send a designer to go off and calculate different scale ratios to figure out what fits best in the grid for that asset.
You incur additional bandwidth overhead for low-fi screens, but that can be remedied with CSS media selectors by conditionally displaying assets depending on pixel density. You can even automate a lot of this with SCSS or other frontend frameworks.
Beyond that, explore vector technologies like SVG and webfonts. Creating your own icon set or using other sets can play a huge role in making buttons and navigation controls really pop on a high DPI screen.
1x1.gif
Doing this shit takes longer. It’s easier, I know, to just take your same favorite 16x16 icon from 1992 and blow it up to 128x128 because that’s just what you’ve done for the last few decades. But deal with it. High resolutions displays aren’t quite in widespread usage yet, but by the end of 2013 that’s certainly going to start to change. Get ahead of the curve now.
Remember back in the days before ajax, before DHTML, and before CSS? We had
five years of gloriously designing sites using <table> tags and the
inimitable 1x1.gif transparent GIF to move elements around on-page. It was
badass, and served us well. But then things like Zen Garden
exploded on the scene and fundamentally changed how the internet collectively looks.
That’s where we’re at now. There’s a post 1x1.gif world happening now, and you better serve up some Retina images soon or else your company is going to crumble and no one will use your product and your children will drop out of school and do drugs but not the fun drugs the really scary drugs that even you don’t like and you’re positive they’re doing them because they’ll be uploading high-resolution photos of themselves doing lines off of the new Retina iPad you bought them last Christmas.
So cover your assets, and go update your CSS.