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 screens1.

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.

  1. Hey Medium… We need to talk.  

Icon Fonts Are Ruining Your Markup

Icon fonts are great. They’re more scalable than PNGs, they’re re-colorable in CSS, and it’s easier than ever to create them. But most of us are using them wrong, and it’s ruining your markup. Recognize this?

<span class="icon icon-calendar"></span>

This is fast becoming the de-facto standard syntax for inserting icons in your webdesigns. No need to fiddle with weird glyphs. No CSS needed to insert icons, even.

No CSS.

Hold up. The promise of CSS was that we could separate presentation from markup. We could create standardized, semantic and sensible markup, that could then be completely re-skinned solely by replacing a stylesheet. That was the whole point of the CSS Zen Garden. By using nonsense spans with verbose classes, that’s out the window, all in the name of convenience. I too have been bitten by the icon-font bug. I’m into them. I think it’s so great that I can re-color icons with a line of CSS. I like how they zoom, and how they have broader support than SVGs.

But they’re not SVGs. They’re not images. We shouldn’t pretend they were, or that they could ever be as accessible as images are.

Theoretically an icon from a font could be inserted in a semi-accessible way by outputting the actual glyph in the code to ensure copy/paste-ability. You’d also have to make sure to only use an icon that already existed in the unicode-table so screen-readers could make sense of them, thus severely limiting your options as a designer. Need a hamburger menu icon? Sorry, doesn’t exist in the unicode table. Pretty much all the benefits of using an icon font would be out the window at this point.

Rewind for a bit. Take a deep breath and think. Why are you using an icon font in the first place? Easy HiDPI and CSS colorability? Easy to show at multiple sizes? Fair enough.

Now pretend icon fonts didn’t exist, what would you do instead? Use a PNG or GIF as a CSS background, right? You’d treat the graphics as presentational elements. Visual aids. You’d keep it separate from your markup. You’d be able to reskin your whole site with a single stylesheet. You’d keep the markup as simple and semantic as that of the CSS Zen Garden. Hopefully you’d be a good person and worry about accessability where it mattered most: in the structure of your markup.

You can still use icon-fonts and have sensible markup while keeping the presentation separate. But doing so means you can’t rely on those bundled CSS helper classes. You have to do it manually; put in the work. Don’t treat icon-fonts like images. Pretend they’re sprites and keep them in your stylesheet. You’ll thank me.

Genericons

An Automattic 20% project of mine just graduated. Genericons is an icon font with emphasis on blogging. It’s GPL, so you can bundle it with WordPress themes. What makes Genericons special is that, like its inspiration: Githubs Octicons, the font was designed with a precise pixel grid in mind. That means if the icons are shown at appropriate font sizes (in this case, 16px, 32px, and similar multiples), the icons will render perfectly crisply. Thanks to Sheri and Takashi for contributions.

An icon gift to 1Password [Updated]

I’m totally in love with 1Password for managing my password portfolio, but like Garrett Murray, I really loathe the icon Agile Bits chose for their Chrome extension.

So I made a replacement. Here’s before and after:

1password

So please, dear Agile Bits (ping @agilebits, @1password), take this icon and run with it (or create your own improved one), I give it to you free of charge:

1password_icon

Please use it, and I’ll love your software even more.

[Update]: A beta version of 1Password finally has an improved icon:

new_1password

Here’s An Idea: The Icons For Developers Program

Android and iOS devices have exploded in app usage over the last few years. Both of these operating systems bring app icons front and center. Large finger-friendly icons invite us to start a phone call, play a game or jot down a note. It’s all very polished and pretty.

Android_icons

Well it’s not all polished and pretty. Some apps, while they may be superbly built and infinitely useful, their icons aren’t very pretty. Perhaps the developers simply didn’t find the icon important, perhaps they lacked the resources to give an icon the attention it deserves. The result may be an app that doesn’t look as pretty as it is useful.

Here’s an idea: those of you who possess the time and skills to build a proper icon for your aesthetically orphaned but still favourite app — why not actually make that icon and offer it to the developer for free? In fact, why not have a central website, called “The Icons For Developers Program”, where designers can submit icon replacements to developers? Hell, why not let developers put out their own requests for icons? It should all be free in the name of pretty.

Has this already been done? Could it be useful, or would it simply fullfill a niche desire? Your thoughts are welcome.

New Opera Icon [Update]

New_Opera_icon

According to Jon Hicks, the Opera browser is set to get a new icon, designed by Oleg Melnychuk. It’s a little happy guy in a red jumpsuit, sporting the a capital O on his tummy. Certainly an improvement over the old one, while still not redoing the entire logo (which I’m sure the darkly suited guys at Opera must’ve opposed because they’re scared of a re-brand).

[Update]: It’s not a happy little guy in a jumpsuit. It’s still a red, capital O. It’s just a tweaked O. Pity. (Thanks Alexander).

Real_new_Opera_icon