The Death of the Pixel

Hoist your glasses to a trusted companion! He disappeared at the youthful age of 28. Not Hendrix, not Winehouse, but… the pixel.

Largely born in the 1980s desktop publishing revolution with the first 1984 Mac computer, the pixel was at birth very declarative: he was either on or off. Very quickly he grew to 16 shades of gray and later became a rebel, waving 256 colors and finally matured into 16 million colors.

Two weeks ago, his “parents” at Apple effectively killed him with the launch of the MacBook Pro Retina display laptop, that jaw-droppingly beautiful notebook with 2-1/2 times the number of pixels of that 50-inch HDTV in your living room.

Birth of the High-Resolution Web

With the new MacBook Pro Retina laptop (technology also found in the new iPad, Android phones and the iPhone 4S), the pixels are now sooo small, so teeny, that we can no longer design around them. Web practices like creating a web page at 1024 x 768, or creating a 2″ x 2″ banner ad, and anything that used to be WYSIWYG are all going to be obsolete in the future.

Retina Mac early adopters are already complaining that websites which were created using standard size graphics and images (that would be 99.999% of all current websites) look fuzzy on these new devices. You can’t take little images and icons and just blow them up as Apple’s new flagship is doing. They get blurry and jaggy.

How can you plan for and design around something you can’t see? The short answer is you need a new web toolkit (and vernacular) to create new high-rez friendly websites. The good news is the geeks (hey, I count myself as an honorary subject in their unruly legion) are already on it.

Quashing Fuzzy Web Graphics: “Retina” Graphics Primer

Following are three tips, technologies and best practices you’ll need to think about before embarking on creating your next website.

1. Kick the Pixel Habit
This will be the hardest one for designers—we all love our Photoshop images. By learning about new web image technologies like SVG (scalable vector graphics), web designers need not rely on JPEG and GIFs of things like arrows, charts and smooth headers. The current problem with the SVG file format is that not every web browser supports it. Most modern browsers do, but Internet Explorer 8 and below, and Android 2.3 do not.

2. Icon Fonts
This is the tech that has us jazzed at Right Hat. Icon fonts take small line graphics like arrows, icons and so on, and embed them into CSS3-compliant web page code. Awesome. Icon fonts  successfully avoid many of the backwards-browser issues that SVG faces.

3. Responsive Images
While the two technologies above deal with line art and icons, dealing with photos is more complicated. Retina-ready images should be treated “responsively”, that is to say your images will need to be four times the size they are currently. (While this is frequently referred to as 2X images, it is in reality 4 times the number of pixels). There are currently several web developer “hacks” and discussions about how to best deal with higher-rez images, so talk with your developer about the best plan.

One image downside: if you have a practice of purchasing royalty-free images in the smaller “web” image sizes, that won’t cut it in RetinaLand. High resolution-friendly websites mean higher image budgets.

What can you do to get ready for the emerging presence of high-rez laptops and iPads? For starters, monitor your web logs and visitors’ screen resolutions. At the sky high prices of these Apple products, it will take a while for these stats to register. However, once the Retina resolution stats approach double digits, it’s time to start reformulating your graphics approach using these new technologies.

The good news is that there is nothing in these new high-resolution computer and tablet screens that’s going to break your current site. I’m sure the folks with more-money-than-God who can afford the new MacBook Pro Retina are already getting used to fuzzy graphics.

But the high-resolution future is coming. That much is clear.

UPDATE: 11 July 2012:  Thomas Fuchs has put up a nice PDF on how to “retinafy” your site. (Tip of hat to Daring Fireball)

Like what you see? Stay in touch.