Retina Web Design

Posted on

Devices with retina displays are changing the way we design web applications. When Apple introduced the iPhone 4, we got a glimpse into how images on our sites look on retina enabled screens. Last year, the retina enabled iPad and Macbook Pro came to market, highlighting the fact that most web sites are not retina-ready.

One day retina displays will no longer be the exception, but the standard. However until that time, we need to take steps to ensure all the people visiting our web applications are getting the same polished experience.

What is retina?

Retina is a term used by Apple to describe their double density pixel screens. A device pixel is not the same as the pixels we define within our CSS declarations. A CSS pixel is an abstract unit used by web browsers to draw content. On non-retina displays a CSS pixel maps directly to a device pixel. On retina displays, this is quadrupled as one CSS pixel can equal 4 device pixels.

Image sizes on the web are also defined in CSS pixels. If a height/width is defined in either markup or CSS, the browsers will either stretch or squeeze the image when rendering the web page.

To demonstrate a non-retina image on a double density screen, let's take a look at the how the Remarkable Labs logo renders:

Non-retina logo

As you can see, the image becomes blurry as it is stretched to fit within a defined area of CSS pixels.

How to move forward?

There are a variety of strategies you can use to optimize your graphics to work with retina enabled devices. Let's take a look at some of the ones we use here at Remarkable Labs.

Use CSS3 and HTML5 over graphics

The days of using images for rounded corners, gradients, and text are long behind us. Using CSS3 properties, we are now able to create beautiful web pages natively within the browser with minimal graphics.

While I am not going to go into detail about CSS3, here are a couple of resources to look into if your interested:

Icon Fonts

I'm a big fan of using icon fonts wherever you can. They allow you to have "graphics" which are rendered as text. This means you can apply any CSS property you can use for text, such as font-size and color.

I highly recommend using Zurb's Foundation Icon Fonts 2:

Zurb Foundation Icon Fonts

You can even build your own with Fontello, an icon font generator that includes free icon fonts available on the web.

Media Query Targeting

Using media queries, we are able to target retina devices and minimum resolutions. When targeting with media queries, ensure you include all device-pixel-ratio browser specific properties. Also, setting min-device-pixel-ratio to 1.3 and min-resolution to 1.3dppx allows us to support new Android devices, such as the Google Nexus 7. The background-size property defines the width and height of image contained within the container.

.logo {
  background: url(path/to/image.png) no-repeat;
  @media (min--moz-device-pixel-ratio: 1.3),
          (-o-min-device-pixel-ratio: 2.6/2),
          (-webkit-min-device-pixel-ratio: 1.3),
          (min-device-pixel-ratio: 1.3),
          (min-resolution: 1.3dppx) {
      background-image: url(path/to/image@2x.png);
      background-size: 100px 100px;
  }
}

If you are using Sass for authoring your CSS, please use the great mixin shared in the 37Signals post Easy retina-ready images using SCSS.

SVG

SVG(Scalable Vector Graphics) support is now available on all major browsers, even Internet Explorer! The benefits of using vector graphics over images are:

  • Scalability: Scalable Vector Graphics do not have the limitation of regular images, as they can scale to any size without distortion.
  • Tiny Footprint: File sizes tend to be smaller and thus use less bandwidth.

To find out more about SVG, read the excellent article "Resolution Independence With SVG" on Smashing Magazine.

Using JavaScript with retina.js

retina.js

With the JavaScript library retina.js, you can integrate retina graphics very easily just by including the library in your web pages. On the loading of a web page, retina.js will determine if the user is using a double density screen. If they are, retina.js will go through each image on the page and check the server to see if a high resolution version is available. The high resolution images are expected to follow the Apple naming standard <ImageName>@2x.<filename_extension>.

While this technique is very easy to implement, the main disadvantage is all retina enabled devices download both high resolution and standard images. In his post "Don't Use JavaScript for Retinafying", Thomas Fuchs advocates designing "retina-first" over using JavaScript libraries.

Designing "retina-first" does have disadvantages as well. Retina displays are not common place yet, thus by using higher resolution images only, we are serving larger assets to all our visitors. This can in turn slow down your sites as response payloads become much larger. My advice is look at your site metrics, and determine how many users are using "retina" displays to gauge which technique to pursue.

002

This post is by Kevin Faustino. Kevin is the Chief Craftsman of Remarkable Labs and also the founder of the Toronto Ruby Brigade.


Comments

comments powered by Disqus