Last week I wrote a lengthy article 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, CSS, 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 CSS 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-facewith 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 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 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 put together by Boris Smus.
Sass Mixin
The newly
introduced
content blocks in Sass 3.2 make it extremely easy to use CSS 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. I
also intentionally left out the un-prefixed min-device-pixel-ratio since
as it stands now, there seems to be little
prospects
of it being standardized. Meanwhile, the future-proof min-resolution seems
to have a
wider
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
@2xversions of prominent images in your website or app (splash screens, backgrounds, patterns, etc.) and use CSS 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 CSS 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.
