We Can See Clearly Now

When Apple rolled out the Retina display-equipped MacBook Pro earlier this year, the world oohed and aahed at its eye-popping renderings of nature photographs and smiling stock photo models. Meanwhile, web developers everywhere did a collective facepalm.

‘Retina’ quality devices are said to have such high pixel quality that at a normal viewing distance, the human eye can’t detect pixelation. Less pixelation means, crisper, cleaner, more beautiful-looking websites. Newer iPhone and iPad models already use Retina displays, and with the release of the new MacBook Pro, these devices are gaining market share.

That’s great. But for web designers, Retina displays pose a few problems. Plenty of consumers have scrambled for the new MacBook Pro (despite the hefty price tag)—but plenty haven’t. When Retina-display users view a site designed for an ordinary low-res screen, all that pricey pixel potential just gets wasted. But completely revamping web graphics and typography in Retina quality means larger image sizes and longer page-loading times—even for users without Retina display. It’s a lose-lose.

So how’s a designer to create a great cross-platform web experience and stay cutting-edge? The answer is responsive web design (RWD). Just as media queries can be applied to CSS to tell a site how to behave on different devices, they can also be used to change what users see depending on whether they’re viewing in a high-res or low-res environment. It means non-blurry, fast-loading pages for everybody—and less headache for developers.

Dealing with a new set of compatibility standards isn’t always easy. But at Atomic, we’ve made RWD part of our standard development processes, so we can respond and adapt with ease. As it happens, so-called retina-quality devices don’t even come close to the pixel-perceiving quality of the actual human eye (they’re based on 20/20 vision—but plenty of people can see even better).

Retina 2.0 may not be far off—and we’ll be ready.

Do you know how your site looks in Retina-vision? Contact Atomic and we’ll get your page up to snuff.