---
title: 'Towards a Retina Web: Follow-up'
teaser:
tags: design
author: Reda Lemeden
published_on: 2012-09-04
---

Last week I wrote a [lengthy
article](http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/) over
at Smashing Magazine covering different techniques to prepare websites and web
apps for Retina devices. The feedback has been overwhelmingly good, but it also
highlighted an apparent divide in the web design and development community over
the why and the how of this transition.

Several commenters have argued that optimizing for Retina is unnecessary given
the insignificant market share of HiDPI devices; that is simply beside the
point. Those who are not convinced that offering a superior experience to a
growing portion of their user base is worthwhile are clearly not the target
audience.

## TLDR

The first section of the article attempts to clear out some of the confusion
surrounding the difference between device, <abbr title="Cascading Style
Sheets">CSS</abbr>, and bitmap pixels, while the second goes over the different
approaches to serve high resolution images to Retina devices, namely:

- *HTML/CSS sizing*: a straightforward solution that consists in using images
  with a bitmap resolution that is exactly double their <abbr title="Cascading
  Style Sheets">CSS</abbr> target size. Generally speaking, this approach is not
  bandwidth-friendly and should be avoided in most cases.
- *CSS/JS media querying*: currently the most popular approach given its
  flexibility and bandwidth efficiency (serves only one asset per device). Its
  main shortcoming is the often tedious multiple-asset workflow (separate files
  for each media query).
- *SVG*: the vector graphic format of the web. Ideal for icons, logos, and
  simple graphics. SVG works best with a PNG fallback for older browsers.
- *Icon fonts*: consists in serving resolution-independent icons using
  `@font-face` with a custom web font. The lack of pixel-level control and
  editability are easily made up for with more flexibility and ease of use.

## Live Examples

Following the suggestion of some readers, I put together a [live examples
page](http://kaishin.github.com/retina-examples/) showcasing most of the
techniques covered in the article. The page is comprised of two sets of
examples, each yielding the same crisp results regardless of the screen density.
Feel free to refer to it for a quick fix, and make sure to keep an eye on the
[repo](https://github.com/kaishin/retina-examples/) for updates.

## Javascript Libraries

The primary goal of the  article was to introduce plugin-free, client-side
approaches to get started with resolution-agnostic web design. If you have been
longing for a comprehensive list of JS libraries (both client and server side)
for serving responsive images, look no further than this [comparison
chart](https://docs.google.com/spreadsheet/lv?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc)
put together by Boris Smus.

## Sass Mixin

The [newly
introduced](https://thoughtbot.com/blog/post/29895997507/even-more-syntactically-awesome-stylesheets)
content blocks in Sass 3.2 make it extremely easy to use <abbr title="Cascading
Style Sheets">CSS</abbr> querying without having to worry about the math or the
verbose syntax. Enter the `retina()` mixin:

    @mixin retina($ratio: 1.3) {
      @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
      only screen and (min--moz-device-pixel-ratio: $ratio),
      only screen and (-o-min-device-pixel-ratio: ($ratio*10)/10),
      only screen and (min-resolution: #{round($ratio*96)}dpi),
      only screen and (min-resolution: #{$ratio}dppx) {
        @content;
      }
    }

The default ratio of 1.3 is meant to include Google Nexus 7 in the query, as
Marc Edwards [reports](http://bjango.com/articles/min-device-pixel-ratio/). I
also intentionally left out the un-prefixed `min-device-pixel-ratio` since
as it stands now, there seems to be [little
prospects](http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/)
of it being standardized. Meanwhile, the future-proof `min-resolution` seems
to have a
[wider](http://www.w3.org/Style/CSS/Test/MediaQueries/20120229/reports/implement-report.html#applying-resolution)
browser support and is more likely to replace Webkit's `device-pixel-ratio`
once the transition from inches (`dpi`) to pixels (`ddpx`) is complete.

## Take Action

Everyone would agree that none of the currently available solutions is striking
a good balance between graphic crispness, ease of implementation, loading speed
and cross-browser compatibility. And as many readers pointed out, it is going to
take a while before we get anywhere close to that.

In the meantime, here some are immediately actionable items that would make this
transition much less painful:

- Replace your PNG icons with SVG when appropriate. Use PNG fallbacks if you
  care about the pre-IE9 crowd. You may use icon fonts as well if you can live
  with less pixel-level control.
- Prepare `@2x` versions of prominent images in your website or app (splash
  screens, backgrounds, patterns, etc.) and use <abbr title="Cascading Style
  Sheets">CSS</abbr> or JS querying to swap them in on HiDPI devices. For inline
  images, your best bet for now is to use one of the available JS libraries.
- Use <abbr title="Cascading Style Sheets">CSS</abbr> as much as possible for
  typography and UI elements. CSS3 is in the process of obsoleting Photoshop,
  and for a good reason.

While it may sound unreasonable—especially in a business context—to do all this
"extra" work for every design project, you'd be surprised at how these practices
make you much more efficient and improve your overall design workflow.