Web Design for Retina Displays

Though Retina refers to Apple’s brand of double-density screen, many manufacturers are creating similar displays.  You’d be familiar with Retina displays if you’ve ever used a recent iPhone, iPad, or MacBook Pro, and you may have noticed that these devices feature incredibly high-resolution displays.  Unfortunately, many websites are not designed to take full advantage of this resolution.  In fact, standard-resolution images may appear blocky, and fonts or other high-resolution images may not appear the same across all displays.

retina web design

Retina web design

In today’s marketplace, this inconsistency across displays is not a major concern, as only the most high-end devices feature Retina (or similar) displays.  Eventually however double-density screen technologies will be the standard so optimizing web design for retina displays will be much more important.  So how can you design your website for Retina displays today?

SVG and CSS3 Effects

Using Scalable Vector Graphics (SVG) is a great design choice.  Because these graphics are scalable, the size of the SVG is irrelevant.  Images appear smooth because they are defined using vectors instead of pixels.  There are still some issues that arise, namely SVG is not the best choice for photos.  Instead, SVG is ideal for diagrams, charts, and logos.  You can even consider replacing images such as tiles, gradients, corners, and shadows that can be recreated using CSS3 as they create higher quality images.  Plus, these images require fewer HTTP requests and subsequently use less bandwidth.

normal vs retina

Normal vs Retina

Webfonts Icons

Similar to SVGs, webfont icons are scalable vectors.  You cane use font sets that contain icons and make the perfect choice for small, common shapes like telephones, widget controls, social media logos, and email envelopes.  Webfont icons are also compatible with IE6 and above.

A quick online search will lead you to a wide range of commercial and free icon font sets, or you can even find hosted font services.  If you’re really savvy, try creating your own set of custom icons with an online tool such as Fontello.

High-Resolution Images

Wherever possible (and practical), you should consider using high-resolution images.  Because Retina displays have on average quadruple the number of pixels of standard screens, high-resolution images render very effectively.  Of course, you want to consider the size of the image.  If standard and high-resolution images differ in size by a small margin (i.e. 200kb instead of 250kb), the benefit of using the high-resolution image is obvious.

CSS Image Replacement

Sometimes your high-resolution images will simply be too large to be practical.  In these cases, image replacement techniques (wherein standard images are replaced by larger alternatives on Retinal displays) are a great solution.  This will mean you have to maintain two sets of images, and unfortunately some browsers will download both, but in general you’ll have more consistency for all users.

Planning for technological improvements is a key aspect of web design.  Ultimately, you want to balance practical design considerations with an enhanced user experience but you shouldn’t spend too much time working through rendering problems that will affect only a small number of users.