Home > Blog > Thoughts about responsive web form design

Thoughts about responsive web form design

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.

Technique

The heart of responsive design is the CCS3 Media Queries. It allows loading the appropriate CSS styles depending on the features of the user agent. Some JavaScript is added to enable responsive image and media loading and to support legacy browsers.

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.

Form design

Responsive web design is not the holy grail when forms are involved:

• A web form that works well on a desktop won't necessarily work smoothly on another device. A slow network and a small screen can mean a serious constraint. Showing a desktop form on a handset can cause performance headaches.
• A different context of use in combination with extra features built into the device can mean an opportunity to provide a web form wth a better user experience.

So, there is more to take into account than just changing the width and style of the form elements.

1. Strategic considerations

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:

• There is no single mobile context. More and more, people expect full experiences on their mobile phones. You shouldn't assume that mobile users want some stripped-down version of the site. 'Mobile' can mean a slow afternoon on the couch just as much as it means a rush through the airport.
• Optimizing for every web-enabled device is impossible, so eventually you need to make the strategic decision what target devices and features to optimize for.
• The strategy can also depend on business considerations and a team's capabilities: What can you afford to build and maintain?

2. Design considerations

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:

• Remove unnecessary form elements.
• Offer functionality that takes into account when and why your surfer use your form.
• Make use of features built into a device to simplify form input.
• Break the form structure into small steps.
• Use appropriate form elements: A form structure or even a simple form element that is appropriate on a desktop browser can be a bad choice to use on a touchscreen.

It can be hard to style form elements only through CSS. JavaScript libraries are often used to extend the layout possibilities and improve cross-browser visual similarity in the desktop web. Support of these libraries in the mobile web must be checked. You definitely want to avoid loading unused libraries to a device with a slow connection.

Conclusion

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.

Let's discuss.

Comments