Responsive Design has been described as having three key features.
- The site must be built with a flexible grid foundation.
- Images that are incorporated into the design must be flexible themselves.
- Different views must be enabled in different contexts via media queries.
Some of our more recent designs have embraced the growing diversity of devices quite well, although I wouldn’t yet call them “responsive design.” It’s a gradual process, but it’s an inevitable one, and it’s nice to be able to show someone their website on a mobile device and have it perform smoothly and gracefully, looking much like they would expect. We’ve talked about this a lot in the past, so I won’t dwell on it here. But designing for more than just the desktop is, in a word, inevitable.
In some cases, though, it’s sometimes a hard sell to clients. When one looks around at other web sites for inspiration, there’s not a whole lot that are built using responsive design principles, and these folks don’t necessarily own half a dozen different devices and look at everything on each of them.
But there is a business case here. By many estimates, mobile browsing is expected to exceed desktop browsing in three to five years. That’s not really a lot of time, considering that we’re not starting from zero—I probably spend an hour a day in Safari on my iPhone. And for certain types of businesses, certain devices may well already be approaching the majority, already passing desktop web browsers. This quote explains it well.
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.
Inevitable. That’s how we feel about this change, and we embrace it.
By the way, if you want to see some examples of responsive web design in action, here’s a few.
- Simon Collison redesigned his personal site last year. Try resizing your browser window, or check it out on your phone. The look is different, but it works at many different sizes.
- The Hicksdesign journal pulls off several very clever tricks, changing the location and visual arrangement of items at different sizes. Again, resize your browser, and see how it changes.
- Edenspiekermann also does a great job at disparate display sizes, even with the navigation and nice slider.
If this sounds interesting to you, talk to us. We’re very excited about the future of our industry.