What does Retina Display Mean for Web Design?

By Jessica Ann
November 4, 2013

There has been a lot of talk about Retina displays in the web design community recently, but what does it all mean. Here is a brief summary:

The Good: We can now see Robert Pattinson or Mila Kunis in all their glory.
The Bad: Those who don’t change their approach to web design risk being left behind.
And the Ugly: We’ll be able to see crystal clear pictures of that aunt or uncle in every family photo – you know the one: with hair where hair shouldn’t be and warts that look like a science experiment gone wrong.

touching screen on tablet-pc

Retina displays deliver a clearer, sharper and smoother picture. Apple first developed the technology and Retina is their brand name. But other device manufacturers are picking up the concept.

It works by doubling the number of pixels that are displayed. So a traditional one-pixel line is represented by two pixels on Retina displays. And because of the double density of pixels, users are unable to see them at normal viewing distances. The result is super-sharp images.

Why Should I Care?

This is a good question, particularly given the fact that high resolution Retina displays really only exist in any great quantity in the world of design professionals. But you should care, because the technology works and it delivers a better user experience.

That means more and more people will start using high-resolution screens over time (particularly when they see how good looking people like Robert Pattinson and Mila Kunis look on the tablet in their lap!)

If your website is not built with this in mind, your images will not display right. The device will scale them up (essentially doubling the number of pixels to display the image) but there will be no additional detail. This will make them fuzzy and while that might be okay for the family photos, it will not be okay for professional use.

That presents you with two choices. First, you can leave your websites as they are and live with the fact that they will not display well on Retina devices. Or you can take steps now to display your website properly on Retina and other high resolution screens.

Okay, Got It, But What Do I Do Now?

Your website design needs to become pixel agnostic. Here are some of the ways you can do that:

  1. Use the SVG image format, which resizes images without any degradation in quality. SVG stands for Scalable Vector Graphics, and you can learn more about this here.
  2. Upload an image twice the size as what you need and then resize it in HTML
  3. Use image replacement through CSS or JavaScript
  4. Use font icons

With a couple of simple steps you could be ready for the high-resolution revolution. It’s the wave of the screen technology future, and the time to start is now.

This entry was posted on Monday, November 4th, 2013 at 2:53 pm and is filed under General Moosings, Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

Leave a Reply