How Retina is Shaping the Future of Web Design

Retina DisplayI just got a Retina Macbook Pro, and only a few days in it’s clear that this display is the future.

Not just Apple’s display, but ultra high resolution displays in general. It won’t be long before other manufacturers release similar displays, and websites are going to have to adapt quickly.

The problem with the Retina display is similar to that of an HD TV several years ago. Everything that’s Retina compatible is amazingly crisp, but everything that’s not looks even worse than it did before. It’s like watching a non-HD channel on a very good HD TV.

You may have seen a Retina display in the Apple store, or on your iPhone, and maybe you think it looks pretty good. Let me tell you, once you’ve been staring at this thing for a few days, non-Retina screens are almost unreadable. I pop open my old (2008) Macbook Pro and I squint at the blurry text. Even on my iPad 2, which has a fairly hi-res display, the type looks pixelated.

The problem is only going to get worse, because we haven’t yet reached the limits of human vision.

Here’s what needs to change (and quickly) to accomodate our extra pixel friends.

Vector graphics, Icon fonts, and SVG

Designing icons, buttons, and other graphical elements in Photoshop is a thing of the past. Everything is going to vector, icon fonts, SVG, and the like.

Sure, you an use sprites and media queries, but what happens when the displays get even more pixel-dense? Sprites are an unsustainable band-aid fix.

Graphics should be resolution agnostic, meaning we need to use vector graphics when possible so they can scale as needed.

Browser support for Resolution Media Queries

The resolution and pixel-ratio media queries used to display different images for Retina screens are kind of a mess right now. They work for Retina displays, but min--moz-device-pixel-ratio? Give me a break.

Retina WordPress Themes

It’s a fairly big undertaking to make a WordPress theme automatically Retina compatible, but it’s coming. Allowing a user to upload an image, and automatically making that image double in size for Retina screens (only) is no easy task. Icons and bullet images are no biggie, but it will be interesting to see if theme companies build in Retina support, or if they leave that to the user.

The Bandwidth Problem

The biggest problem with serving up larger images for Retina devices is bandwidth. Display technology is growing much faster than high speed internet technology, and mobile device internet can still be really slow (3G or *gasp!* EDGE).

I have an iPhone 4S, which has a Retina screen, but at 3G speeds I don’t want to be downloading 1MB images (not to mention those images will be eating up my data plan). Bandwidth media queries would solve this problem, unfortunately they don’t exist (yet).

How to Make Your Site Retina Ready

Since Retina displays need twice the amount of pixels, you are basically doubling the size of each graphical element and image on your site. There are several ways to do this, Smashing Magazine did a great article on various techniques for designing for Retina here.

A List Apart also has a great article by Dave Rupert, definitely worth a read.


ketchup time

As with any new technology, there’s going to be catch up time. We are in an awkward transitional phase right now, where most apps and websites are not compatible with Retina. Give it another year, and almost everything will be. Is your website ready?

5 Responses to How Retina is Shaping the Future of Web Design

  1. white andrew says:

    have an iPhone 4S, which has a Retina screen, but at 3G speeds I don’t want to be downloading

  2. April Lougheed says:

    I have both an iPad and MacBook Pro with Retina display. I agree, even my Alienware M18x 18″ Windows Laptop display looks blurry now. I wear bi-focals so the Retina display is a dream come true.

    I have not noticed that my website look fuzzy on Retina. Maybe you mean when I “pinch out” the Macbook Pro screen. I thought the images were just blurry when enlarged. I’ll check out your recommendations to enlarge size or increase dpi.

    Thanks for the Vector versus Photoshop tip. I’m glad I spent all those hours learning Illustrator.

    Thanks for this very timely info. I’ll be a regular visitor now.


  3. Pingback: How to make your WordPress Theme Retina Ready | feed

  4. Pingback: What is a retina ready website? Holtermann Design LLC | Holtermann Design LLC

  5. jeff says:

    Could i embed a html5 video into a page !!!