At Phenomblue, we’re big fans of responsive site design. In addition to how cool it looks (try sizing our website up and down sometime), it creates a unified interface for your website regardless of what media or device you’re viewing it on. When you consider that the preferred method for browsing the web has been moving away from desktop platforms, responsive design seems even more critical.
There are quite a few tools that we employ in the development of a responsive website. In the end though, CSS media queries are the backbone driving this new trend, and it’s the standard that makes one website for every display a possibility. However, one thing that media queries can’t address is how to best display static images.
The image tag has been around for quite a while, and it does its job very well – displaying a single image for the user. But when you introduce many of the requirements demanded by responsive design, this cornerstone of the web begins to show its age.
How do you best display an image that needs to change size based on screen size, or even worse, pixel density? One image no longer cuts it – to have a one-size-fit-all, you’d traditionally have created the largest possible image, and resized it down to fit. But that was criminally inefficient when implemented client-side, and involved programming overly complex, non-responsive solutions to do it server-side.
We’ve seen several proposals and solutions put forward by many very intelligent people. However, when it comes down to it, this is a problem that would be best addressed on the same level that media queries were first introduced, with the browser. With that in mind, we’ve found the most promising solution proposed to be the one introduced by the Responsive Images Community Group on the World Wide Web Consortium (W3C). While it seems to be the most popular fix, it’s hardly a set standard. We needed an interim solution; one that would enable us to create code that will be supported by whichever standard will eventually be settled upon.
A Clean Solution to a Messy Problem
To that end, we’ve leveraged a couple of great solutions into a single comprehensive fix. We have taken the Picturefill polyfill by Scott Jehl and an image-resizing library by Joe Lencioni, and bundled them into the PB Responsive Images plugin for WordPress. This plugin automatically formats all images in the content area into a responsive format supported by all browsers, which will fall back into the old reliable image tag if they don’t support the hopeful new standard, nor have JavaScript enabled. Additionally, it provides several utilities for programmers to leverage in theme creation as well.
Our PB Responsive Images plugin is available here:
http://wordpress.org/extend/plugins/pb-responsive-images/
With this layer of abstraction in place, we can be sure to easily deliver resolution independent images regardless of what standard is eventually introduced. Only one image is loaded while creating content, and only one image is served to the user. Simplicity itself. And that image, as well as the responsive design around it, will be exactly the right size, no matter what device you’re viewing it from.