How to Design for the Retina Display

Apple is known for being a top of the line computer company. To no one’s surprise, they have decided to integrate a new display into their devices that is double the resolution of a normal screen. Images are sharper, crisper, and show more detail. The only problem is, this adds yet another problem for designers and developers. So, what is the problem? When we look at our crisp graphics on a normal screen, they look fine, but on the Retina Display, they appear to be blurry.

retina

Not only do web designers and developers have to account for different screen sizes across desktop computers, tablets, and mobile devices, but now they have to deal with double the resolution. This has left a lot of people scratching their heads, but there are a few options when designing to include the Retina Display.

Media Queries

This, in my honest opinion is the best option for handling the Retina Display issue. In your CSS you can determine which size files to use in your in your site, and at what resolution. This is excellent, because you can serve the low resolution images, such as logos, icons, and specialized graphics for your normal devices, and you can serve your double resolution files when the retina display is detected. If you know anything about media queries, you know that you need to specify the screen size, and in the case, the pixel ratio. See the example below:

/* Retina CSS */
@media  and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2)

Directly under this declaration in your stylesheet, you will place your CSS. Below, I will show you how you would style a div for a normal media query for a typical resolution screen, and then directly under that, I will show you how to style the same div for the Retina Display.

/* Normal Resolution Div */
.logo{
     float: left;
     padding-left: 75px;
     width: 0;
     height: 135px;
     overflow: hidden;
     background: url('logo_normal_resolution.png') top left no-repeat;
     background-size:250px 135px;
}

/* Retina Div */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {

.logo{
     background: url('logo_2x_resolution.png') top left no-repeat;
     background-size:500px 270px;
}
}

There are a few things that you should take not of when working with media queries for responsive design and the Retina Display. Notice in the CSS above that you specify the background image, but you also specify the background size as well. You can specify styles, such as float, padding,  overflow, and anything else that you can think of in the normal CSS, but when you go are styling the next media query, you only have to specify what is different. We specify the higher resolution image to replace the lower resolution one, and we also double the values  of background-size style as well.

The Downside to This Method

The only real foreseen problem is that you have to create your graphics twice. You have to plan and think about your graphics, which means that you will have to create them at a higher resolution, and then at a lower resolution. This also means you will have 2 sets of the same image in your site files. You will consciously have to consider a consistent naming structure, so that you know which one to serve and when. For example, you might name one version normal, and the higher resolution image might contain “2x” in the name. As usual, watch out for Internet Explorer 7 or 8.

Icon Fonts

Icon fonts can be a solution for typical graphics, because you can style your icon font with CSS and do a lot with it, such as shadows, colors, transitions, etc. This can make for a dynamic site, because it is crisp at different sizes, and is controlled with CSS.

The Downside to This Method

The immediate downside I see to this is that it doesn’t solve the problem completely. What if you have images, or custom graphics, such as logos? You can create your own fonts, but that is a lot of work. There aren’t icon fonts available for everything under the sun. Another aspect is that the icons will become overused, and originality goes out of the window.

Scalable Vector Graphics (SVG)

This is a wonderful solution, because SVG is smaller than PNG files and scales up or down without degradation, so your graphics will be crisp. You call them in CSS just as you would a typical image. Using our previous CSS, the example below shows you how to implement SVG in your website.

/* Normal Resolution Div */
.logo{
     float: left;
     padding-left: 75px;
     width: 0;
     height: 135px;
     overflow: hidden;
     background: url('logo_normal_resolution.svg') top left no-repeat;
     background-size:250px 135px;
}

/* Retina Div */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {

.logo{
     background: url('logo_2x_resolution.svg') top left no-repeat;
     background-size:500px 270px;
}
}

Multiple Problems

SVG isn’t available in IE7 or 8, which means that you have to use PNG or jpeg replacements. This is a pain, because you have multiple image and graphic types, which is a lot to keep up with. This can be a real nightmare if you have a graphic-heavy site.

Conclusion

The Retina Display has definitely added a new list of challenges for web designers and developers. Compatibility issues, hosting multiple of the same files and other issues still leaves us with the need for a definite solution to this problem. Each solution listed above has their pros and cons, but none of them are the end-all solution. For now we have to use workarounds and CSS tricks to get the job done and serve the best user experience possible.

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote