I remember when Google Maps first launched back in February 2005. As well as being enormous fun—I spent hours finding famous landmarks and places—it was a complete game-changer. The “slippy maps” style of interaction felt weird, then delightful and then just …right.
Things move fast on the web. It didn’t take long for us to get used to slippy maps. Before too long, we came to expect them. These days, if I see a map in a web page, I expect to be able to drag and pan within it. If instead, when I click and and drag, I discover that the map is just a plain old-fashioned image, it feels …wrong.
Similarly, if I visit a web page that’s about an event, I expect to be able to use a bookmarklet or browser extension, or click a link to add it my calendar by converting the page’s hCalendar. If instead it turns out that the page isn’t using microformats, it’s like discovering that what looked like a house on the outside is actually just a facade with nothing behind it. It feels …wrong.
Increasingly, I’m getting that feeling whenever I visit a website that doesn’t respond to the size and capabilities of my browser. If I get handed a crawlbar, I try to understand the reason for it but more often than not, it’s simply a sign that the website has been built by someone with a non-web, print-based, fixed-canvas mentality. It feels …wrong.
That’s why I can relate to what Andy says:
Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else.
Web design is responsive design, Responsive Web Design is web design, done right.
Web designers and developers have become very comfortable in approaching the web from one context: the so-called “desktop” environment (just as they got very comfortable a few years back designing for a stagnant, slow-moving browser landscape). This complacency has led to lazy and sloppy thinking; assuming that any content can be served up in a 960 pixel wide container; assuming that using plenty of large images isn’t a problem because bandwidth has improved over time.
I’m glad that the increasing diversity of devices—together with the ascendancy of so-called “mobile”—is forcing designers and developers to move beyond their fixed-width comfort zone.
There’s still a lot of resistance, though. That’s why the idea of creating separate silos for “mobile” devices is initially so appealing. But that approach won’t scale: it’s just not practical to spend equal time and effort crafting different endpoints for iPhone, Android, Palm, Kindle, iPad, etc. The solution is to either reject part of your potential audience and concentrate only on a subset of users like, say, just iPhone users …or you can embrace responsive design. The first option is the cure that kills the patient. The second option might seem intimidating at first, but it’s going to become increasingly accepted. Inevitable, even.
Those who are currently rejecting responsive design point to the difficulties of making desktop-optimised sites work on small screens with potentially narrow bandwidth. They’re right. But the solution is not to create a separate site just for smaller screens. The solution is to fix the site so it isn’t optimised for just one environment.
The truth is that web designers and developers have been making device-specific websites for years; it’s just that the device in question was the desktop computer. But just about every point in the W3C’s Mobile Best Practices should be applied to all websites.
This new approach to designing and building websites reminds me of a similar sea-change a few years ago. The change from table-based layouts to CSS and semantic markup seemed far from inevitable at first. It met with a lot of resistance from designers and developers who had grown comfortable with their existing sets of skills. It took trailblazers like Doug, Mike, Dan and Dave to demonstrate the possibilities by launching the Wired redesign, the ESPN redesign, the Fast Company redesign and of course, the CSS Zen Garden.
As always, the innovation begins with personal projects. Take a look at the Media Queries website—a showcase for responsive designs and a handy place to find out how others are dealing with fluid grids and resizing images. The majority of the showcased sites are personal sites, demonstrating the possibilities of device-agnostic development.
I’m looking forward to seeing the first really big brand relaunch that embraces responsive design. After that, prepare for the floodgates to open.
If, by the way, you happen to work at a company that’s looking to abandon a desktop-specific web presence in favour of something that’s truly native to the web, get in touch with Clearleft. We’re excited about this approach to web design. It feels …right.