High-Res Housekeeping

A long, long time ago (May), we told you about the Resolution Revolution that started when Apple released their iPad with a Retina display. Now, Apple has given their MacBook Pro the same beautiful, troublesome technology, so we thought we’d offer a few tips to keep your site looking good on these new, high-res displays.

As we mentioned in our article about the iPad, the main issue is that current graphics can end up looking fuzzy on the Retina display. This isn’t great for photos and video, but it’s absolutely dire when it comes to your graphics, logo, and icons that should have neat, sharp edges. If you’re not ready to update your site to accommodate huge graphics that might be slow to load, there are a few housekeeping measures you can take to spruce things up.

One solution (and popular element in web design), is the use of icon fonts. Icon fonts are elegant graphic representations and they’re scalable, so they’ll look good at varying resolutions.

You can also replace your logo, graphics, and icons with Scalable Vector Graphics (SVG). As the name says, they’re scalable, but they don’t play well with all browsers. If you’re going to go down this road, it wouldn’t hurt to start with a traffic analysis to see how people are viewing your site and if you might alienate segments of your audience.

Finally, you can talk to your web development team about targeting high-res displays. Using a media query, you can serve larger images to only the high resolution displays. This means that the load time for standard displays won’t be significantly affected. This kind of solution is an extension of responsive web design focused on making images adaptable for the diverse screen sizes being used in the wild. The media query is not infallible and requires the artful touch of a developer.

The Retina display does complicate the web, but it’s not going to break your website and it opens up future opportunities for sharper, more impressive web design. The tipping point between standards is always a little messy, and now you have a few tricks to help your most vital graphics weather the transition.