Retina Display Optimization

Notebook // February 2013

The internet is always changing, but I'm pretty sure we never thought the resolution of a computer or device would change things so drastically. Ever since Apple came out with the Retina display it seems like the internet world has changed forever. I'm sure there are people who are sick of hearing about Retina this and Retina that and after all it's just a brand name. However, I believe we would have been at this point whether Apple made it popular or not and you can thank your mobile device and tablet for that.

Let's take a look at the resolution on some of the common/popular smart phones and tablets out there:

Smart Phones

  1. iPhone – 1136x640 resolution at 326 ppi (pixels per inch)
  2. Nexus 4 – 720x1280 resolution at 342 ppi
  3. Windows Phone 8X by HTC – 1280x800 resolution at 320 ppi

Tablets

  1. iPad – 2048x1536 resolution at 264 ppi
  2. Nexus 10 – 2560x1600 resolution at 300 ppi
  3. Microsoft Surface RT – 1366x768 resolution at 148 ppi

What do these have in common? Higher resolution. We're at a time where we can't just design for the traditional desktop anymore. Mobile and tablet usage is growing at a fast pace and a good user experience is becoming more and more important.

Re-think The Design Process

Progressive enhancement. Use fewer images. Stop. Think. Do you really need a graphic for that? With the help of CSS3 you can easily create gradients, text shadows, box shadows, transitions, and more.

@font-face. I love typography. Being restricted to web-safe fonts wasn't very fun, but now that @font-face has finally gained popularity it has opened up a lot of possibilities and time savings. Here's how you use it:

You would reference the new font like you would with any other with the exception of brackets:

Where can you get these awesome fonts? There are plenty of open-source fonts that are free. Below are a couple of my favorite sites:

Font glyphs. How about icons? Instead of creating images, you can utilize @font-face for font glyphs. There are several sites that provide free glyphs for you to use on your projects:

Retina graphics. Obviously, there are going to be times when you need to use images on your web site. You'll need to create a high-resolution image by doubling the image size. If you have an image that is 100x200 pixels you would double it by 200x400 pixels. There are several ways to serve high-resolution images for Retina displays:

  • HTML. The simplest way to size images down is through the width and height attributes in an image tag: The draw back of this approach is that it increases the load time of the image and will more than likely slow the load time of your website.
  • CSS. You can also size down background images by using the background-size property. Please note, the background-size property isn't supported in IE7 or IE8.
  • Media queries. Another way to serve high-resolution images to your site is through css media queries. Here's an example:
  • Javascript. Lastly, you can use Javascript to serve high-resolution images to Retina devices. Retina.js is a nifty script that does just that.

Wrapping Up

My advice is to keep things simple. Use progressive enhancement and @font-face to your advantage. Also, keep in mind that high-resolution images will double page loading time. There are several approaches on how to serve high-resolution graphics to a Retina display, which I'm not going into too much depth here. Look for more posts on this later.

Join the Conversation