"The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn't have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.'"
- John Allsop, "A Dao of Web Design"
The above quote was written more than 14 years ago, and owing to the proliferation and propagation of mobile devices these days, Allsop's insight into web design rings more true today than it ever has in the past. In the sixteen years I've personally been developing and designing websites, the techniques and available technologies have changed so radically; so much so that the only aspects my job today has in common with what I did at the start of my career is that HTML is still a markup language, and that a good design can never have too many animated gifs.
(That last bit is subject to individual tastes, admittedly.)
So Why Are There All the Fuss Over Responsive Design, Anyhow?
"Responsive design" gets thrown around a lot these days, is hyped by development teams as one of their core strengths, and lauded by designers as one of their cutting-edge talents. What, exactly, does that phrase mean?
In the simplest terms, it's a method of front-end development that allows one set of code to display correctly across all devices regardless of size, and react appropriately to any number of input methods. It responds to the amount of screen space available. You can see responsiveness in action by dragging the width of the browser window you're currently viewing this page in back and forth – go on, I'll wait.
Neat, huh? What you're seeing there is on-the-fly responsiveness utilising a technique known as "media queries" that changes the way the page displays depending on screen width, and to a lesser extent, device type. What this provides is the ability to reach anybody, anywhere, on any sort of device, with one code base, one website.
Prior to the inclusion of media queries as a standard in CSS3, the options available for gracefully presenting a site to multiple device types were limited and cumbersome. The most common enterprise-level solution was to have multiple versions of the same site running side-by-side, as well as a "browser sniffer" script that would redirect the user to a specific site built specifically for that type of device. From a client's point of view, this means saddling the project with aditional development time (for each version of the site,) and aditional staff (for not only building the sites, but maintaining all the different versions). From an end-user's point of view, this usually means that if you weren't sitting at your desktop, using a specific browser on a specifically-sized monitor, you weren't getting the optimum user experience using a particular website.
The current development standard is not only to design and build a website that easily and automatically optimises itself for any particular device or screen size, but to utilise a "mobile first" approach, wherein rather than trying to shoehorn a desktop site into a phone's real estate, the distilled core of what needs to be presented to an end user is considered first and foremost, with secondary and tertiary information added as more elbow room becomes available.
Yay! Elbow room!
The added benefit of this approach is that not only will all your users see your website in its finest form regardless of how they're viewing it, by the very nature of this approach, you and your team will need to be more focused and direct in creating the content for your site. Not only will this give the mobile user the information they're looking for, the desktop user (and everyone in between,) will see the most important information presented as the top priority, which is most likely why they're on your website to begin with.
All in all, responsive/mobile first methodologies will result in the cleanest site possible, considering both the content and the design equally.
Fair enough. To provide one example of just what a difference the responsive, mobile first, approach makes to the end user, I'd like to submit two public transport information websites, one from the US, and the other from the UK.
The first example (since it's the bad example, I've redacted the brand,) shows a perfectly good desktop website on the left, but then the wheels fly right off the trolley when you view the site on a mobile device. Instead of utilising the clean design of the desktop site, mobile users are redirected to a static, separate, website which not only looks unappealing and requires additional maintenance, but it also presents a less welcoming user experience. Since no practical information is presented on the homepage, travel alerts, a key reason commuters would be visiting the site in the first place, are three clicks away.
Now, let's compare this user experience to the one put forth by Transport For London. Utilising a responsive, and mobile first approach, the user is presented with the most important information, regardless of the device, and since the mobile experience was considered primary, the design and content are both clean and clear, regardless of the screen width. In addition to all these benefits, in both cases, the user is viewing the same site, the same set of code, and the same information. The cost of maintenance is minimised, and the users are happy.
Well, That's All Good, But Do You Have 5 More Examples?
Since I did entitle this article as "Six Best Responsive Websites," and I've only provided one thus far, I suppose I do owe another five. Here, in no particular order, are five sites that I use as reference and inspiration on how to do it right.
A List Apart