We live in a multi-channel world, where customers can and will move between devices during the course of a single transaction, whether it’s a retail transaction or a more complex transaction like a loan application or insurance claim. “Mobile First” design, once promoted as the new standard of a mobile world, no longer works in a multi-device, multi-channel world.

Responsive design is a set of techniques that allows a single web page design to dynamically respond to the screen size it finds itself displayed on, and to present itself with an optimal user experience for that screen size. The responsive approach is starting to become well understood for web pages.

Electronic forms or e-forms, however, are closer to complete applications than simple web pages, and there are several specific user interface paradigms that need to be carefully analyzed and designed. These paradigms include layout, menus and navigation, error display and error navigation, tables, and widget interaction design, among others.

Forms turn out to be quite a bit more complicated than simple text / image-based web pages. Most non-trivial forms consist of around five panels, not very different to the layout examples seen on liquidapsive.com: a header, a footer, a menu of some sort that is used for navigation, a main content area, and occasionally another panel that is used for extras such as a summary or contact information. The menu may be a left-hand menu like the liquidapsive.com example, but many forms use a menu structure at the top of the page, which is often arranged as a series of “chevrons”.

A responsive design works well for these types of forms, but there are a number of detailed design decisions that need to be considered. The first is the overall form layout. It’s a good idea to review your forms and decide on one or more breakpoints. Orient it around some of the standard screen widths of common devices. Then determine how your forms should look within each of these breakpoints. To ensure consistency, also determine a maximum width for your forms. This makes your form easier to use on larger screen sizes (we tend to focus on designing for the small, even in responsive design, and forget that a max width also matters to the user).

Other things to consider include deciding on field affinity and interactions. For example, ensure that when you design responsively that you can easily choose fields to “stick together” when the form resizes for the smaller screen. Fields also require users to interact with them, and the types of interactions that we are familiar with on large-screen mouse-oriented devices do not necessarily translate to small-screen touch-oriented devices. It’s a good idea to pay special attention to things like checkboxes, radio buttons, dropdown lists, and date pickers.

More complex decisions come around dealing with error handling and data validation and tables (always complicated online). How do you handle long tables on a small device and then notify the user when they’ve made a mistake or missed a field?

With the proliferation of devices, and our new normal of moving from device to device as we transact with a company, the entire software industry has come to the collective conclusion that web design will be dominated into the foreseeable future by the need to design pages and apps (including forms) that work responsively.

While the principles of responsive design are becoming relatively well understood, the complexities of forms add a level of difficulty and detail that require a large amount of thought, design, and implementation – and these concepts are not yet very well known.

Delivering an engaging form experience to customers digitally has never been easier (anyone can PDF a Word document) and never harder (delivering an engaging, multi-channel customer experience). Coding these features with long-term usability is even more difficult.

Therefore, when considering the design and deployment of responsive forms, it is wise to look for frameworks, tools, or other mechanisms for using best practices, rather than having to invent these responsive techniques and delay your time-to-market.