Responsive Web Design: A Means To Something

With the emergence of more and more varieties of internet-capable devices and the wide array of screen resolutions that come with them, much has been made of the need to design intelligently for different screen resolutions. This is most evident when it comes to “mobilizing” a web site. Since an idea on the best way to tackle the challenge of a multi-channel, multi-device, and multi-orientation web ecosystem has come along about as fast, well as fast as it took me to come up with a good idiom for it, there is disagreement on the best method. What is the “best practice” of giving a web site both web and mobile usefulness?

At its core, the debate is two-fold: Is it best to design an experience that is specifically tailored to a device and its anticipated user or should the experience adapt to its surroundings, taking in to account multiple devices, screen resolutions, device orientations, and user handicaps? After fat-fingering my way through many a desktop site on my mobile device (with no clear path to a mobile version), I’ve been convinced that in most cases a responsive approach works best.

Tailor-Made

The truth is that as a designer there is no way to completely predict everyone and in every way they will use your web site. As a result some strong arguments for a “context-aware” approach have been made. Designer/Coder Jeff Croft challenges responsive web design by saying:

“By and large, mobile users want different things from your product than desktop users do. If you’re a restaurant, desktop users may want photos of your place, a complete menu, and some information about your history. But mobile users probably just want your address and operating hours.”

This argument is well-founded and definitely can be proven to be the best solution for some design problems given certain circumstances. There is a time and place for a sharp focus and expansion of certain features or content types. Some would argue that that’s where a “context-aware” web experience comes in.

Coming from a background of designing web apps and more recently native mobile and desktop applications there is often one question I wrestle with: Is there enough need, features, and user requirements to necessitate a full native application? Or, could the same benefit be gleaned from an improved and more flexible web experience? The same holds true for the question of whether a device-specific, “context-aware” web site is necessary. Is it worth the extra time and effort to build, when maybe half of the effort would be needed to improve and adapt your web site for mobile users? It might turn out that you have the need, but not the time to create your vision of what a tailored mobile web experience is. Enter the shining beacon of light that is responsive design.

Responsively Agnostic

A recent and recommended read of mine by Ethan Marcotte, Responsive Web Design, explains the world of fluid grids, media queries, and designing a sites with a “flexible foundation”. Essentially he suggests that you should design something (one thing) that will “work” on most devices that you anticipate it being viewed on. More than likely you won’t be able to hit every possible requirement for every Windows Phone 7 user (for example), but you’ll be able to get to most of your users what they need.

Marcotte’s approach is efficient and in the long run can save time for designers and developers alike. This device/platform agnostic approach doesn’t just serve as a “quick fix” solution to check off your “mobile presence” requirement, but it gives you a bridge to the next step. As mentioned earlier you have to examine the need and in many cases you’ll find that the needs of a designer to reach mobile users can be met with a responsive, device agnostic solution.

With the power of media queries, determining the way your site is displayed is fairly straightforward. It’s like getting a desktop, tablet, and mobile web sites all-in-one.

It Works!

The number of designers and developers using responsive web design techniques seems to be growing. This becomes evident when you visit their personal websites. Speaking as one who has been meaning to “mobile” my site for quite some time now the personal sites of “cool kid” designers such as Meagan Fischer is rather inspiring.

Her site adheres to these ideas to a tee. At most common screen resolutions she has designed a layout that best displays her content in a legible and visually pleasing fashion. By my count there are 4 different layouts: one for desktop viewing, one for larger portrait-oriented tablets, one for smaller portrait-oriented tablets, and one for phones. You can experience all of these layouts by going to her site and and resizing your window to different sizes. Thanks to media queries it is possible for her site to know what layout to display.

A Responsive Bridge to the Future

It’s nearly impossible to keep up with every new device and web browser being created, but with a responsive design, some research, a savvy developer, and perhaps a little luck you can help make the growing pains that come with testing for new things a little easier. I’m not saying that responsive web design is ultimately the best solution for every situation, but what I am saying is that it can definitely serve a useful purpose in most cases. With it you empower yourself and your website to be better experienced by most people that come across it. Even if you have the eventual need for a dedicated mobile website, a well-designed and planned responsive site buys you time to make it great with fairly minimal effort. It gives you a means to something, whatever it is you need it to be.