January 25, 2012 by Gino Lardon
There is a lot of buzz going on about responsive web design since the publication of the eponymous article on A List Apart and the ever-growing attention for the mobile web. The number of related articles, books, tools, templates and examples is growing. But what if forms are involved? Is responsive design still a good design strategy in this case?
In our own definition, responsiveness means that a client-side web interface adapts itself to the user agent it is loaded in. A responisve interface can change dependent from the current dimensions of the device and browser, its orientation, color and aspect-ratio.
The back-end always generates the same HTML-structure, The client-side code decides which styles to use, images to load and blocks to show or hide. This simplicity is one of the appealing strengths of responsive design. No separate device dependent subsites and technologies must be setup to support a multi-device experience. This can result in better maintainability and lower costs.
However, Media Queries is rather limited and inextensible. It seems therefore suitable only for simple multi-device solutions that focus on content-driven sites.
Responsive web design is not the holy grail when forms are involved:
So, there is more to take into account than just changing the width and style of the form elements.
Always figure out the context and the needs of your surfers. If they use other devices mainly to read your content, then a responsive version may be enough for your site.
But if they really want to interact and get a more personalized mobile experience, then you need to think differently: You need to focus on how you will best serve these users with the functionality they require. A specific form can support their device features and context best.
Responsive web design does not recognize this context. It just adapts a website to fit a screen and omits aspects like the location of the user, sense of urgency, network connectivity, performance, lighting, sound, visibility, accessibility and privacy. Each one of these can be important for a great multi-device experience. With responsive design you risk missing the advantages the device could offer.
These high-level strategic considerations can be hard to realize. Real-life is often more complex:
In the article Mobile Form Design Strategies Chui Chui Tan lists a number of differences between web and mobile form design guidelines and strategies. These differences explain why in most cases client-side-only responsive design is not sufficient for web forms:
Responsive web design can work for simple forms. When a site's content should be the same from device to device (a blog, for example), it can be enough for the job.
However, pretending we can create a perfect solution just because we have discovered Media Queries is as dangerous as ignoring responsive design altogether. It sometimes seems like the easy hack that attempts to avoid solving the much harder but more thoughtful solution. Creating a great contextual experience has less to do with markup or css.
More complex services may need much more, including different forms. Depending on what you're building, a mobile website could be entirely different than its desktop counterpart, addressing entirely different needs and features. In this case, client-side-only responsive web design is not sufficient.