The Old World Display

Maybe a decade ago, a web-designer and friend of mine told me a classic “client from hell” story. The details have since become fuzzy, but the crux of the story revolved around a particular design the client wouldn’t approve. There was this one detail that was off, a particular element that just wouldn’t center properly in the layout (it was insisted). Thankfully the client had come up with a seemingly simple fix: just draw half a pixel! Who would’ve guessed that just a decade later, “The Apple Retina Display” would herald the arrival of just that: the halfpixel?

While the term “retina” is mainly marketing chatter meant to imply that you can’t see the pixels on the screen, it’s not just about making sure the display is arbitrarily high resolution. In fact, it’s pixel-doubling. The 1024×768 iPad doubled to 2048×1536 when going retina, and while the implicit goal of this was clarity and crispness, the exact doubling of screen dimensions means UIs elements scale perfectly: 1 pixel simply becomes 4 pixels. It’s quite brilliant, and there’s only one pitfall.

For a designer it’s more than easy to get carried away with quadruple the canvas. In the plebean resolution of yore, tiny UI elements had little room for error: icons had to be perfectly aligned to even pixels, and ideally their stem weight would be a whole pixel-value. The atom of the display — the pixel — was the tiniest unit of information possible, and if it wasn’t mindfully placed it would blur and artifact under heavy antialiasing. In The Old World we had a term for this: pixel-perfect.

However inside the retina display lives the halfpixel siren, and her song is alluring. She’ll make you forget about The Old World. She’ll draw tiny tiny pixels for you and she’ll make your designs feel pixel-perfect, even when they’re not. It’s an irresistable New World.

David Pierce reviewing the new iMac 5K for The Verge:

I drove an Audi and never looked at my Saturn the same way again. Remember the first time you used a capacitive touchscreen, threw your 56k modem out the window and switched to broadband, or switched from standard-def TV to 1080p?

It only took about ten minutes of using Apple’s new iMac with Retina display to make me wonder how I’m ever supposed to go back. Back to a world where pixels are visible on any screen, even one this big.

It’s a good life in The New World. It’s a good life here in the first world. It’s so true: no-one should have to endure the pin-pricking misery of looking at old-world 1x screens! (Actually, my 35 year old eyes aren’t good enough to see pixels on my daughters etch-a-sketch, but I can still totally empathize with how completely unbearable the pain must be).

It gets worse — are you sitting down? Here it comes: most screens aren’t retina. One wild guess puts the population of non-retina desktop users (or old-worlders as I call them) at 98.9%.

That’s not good enough, and it’s time to fight for the halfpixel. We’re at a fateful crucible in history, and I can see only two possible paths going forward. Either we start a “retina displays for oil” program to bring proper high resolutions to the overwhelming majority of people who even have computers, or we just have to live with ourselves knowing that these old-worlders will have to endure not only disgustingly low resolutions, but indeed all of the added extra blur and artifacts that will result of future computer graphics being designed on retina screens and not even tested for crispness on 1x screens (( Hey Medium… We need to talk. )).

Oh well, I suppose there’s a third option. I suppose we can all wake up from this retina-induced bong haze and maybe just once in a while take one damn look at our graphics on an old world display.

4 thoughts on “The Old World Display”

  1. Quite right. The difference between a high-PPI display and a conventional one is staggering. I have a last generation iMac in the office and 15″ Macbook Pro retina at home. In the office, I constantly notice the display. I see pixels, I see jaggies… at home, I see none of these.

    OS X Yosemite has made the difference even more pronounced. The default system font, Helvetica Neue, is gorgeous on the retina MacBook but doesn’t look anything like as good on my older iMac.

    I should imagine it’s very difficult for designers to get the balance right. I’ve struggled enough just with retina images on my website – https://www.perpetual-beta.org/weblog/responsive-images-redux.html – my travails are nothing compared to those of the designer who’s working towards pixel perfection.

    The siren call is… “retina for everyone” – you can’t stop progress after all.

    1. Joen A. says:

      I agree, I think there’s little doubt that hi-dpi is where it’s all going. Ignoring hi-dpi assets is like ignoring mobile, an increasingly big mistake.

      That being said, it’s becoming increasingly clear that the standard 1x resolution is starting to take a back seat. Like you allude to — Yosemite looks great in retina, it only looks okay in 1x. While the font is not nearly as bad as I’d worried it would be, it’s certainly not great either.

      The thing that kills me is that with vector graphics, if you design for 1x first and then add 2x assets after the fact, both sets of assets will look great — the 2x assets will just look far crisper. The problem is that the reverse does not apply — if you design your vector assets in 2x first, they might scale down to a blur in 1x.

      1. Again Joen, I’m not a designer – so many of the frustrations a designer feels are unfamiliar to me. That being said, I have noticed, in transitioning my own website to accommodate retina and mobile, that what you say is correct, despite being somewhat counter-intuitive.

        I started out with the understand that vector graphics were the way to go wherever possible since, as they are programmatically described, they should scale up or down without any loss of clarity. This does seem to be the case when upscaling vectors (and is exactly the opposite of the behaviour of bitmaps). However, I too have noticed that scaling down a vector can often introduce blur, particularly on text. Strange that.

  2. Swav says:

    You’ve got pretty good writing on this blog, reminds me of the old days, when I used to be a freelance graphic designer, and I remember the long nights working on the end result of perfect pixels… Cheers from Ireland

Comments are closed.