Making forms responsive may be simple, but taking time to consider the device can make a big difference to usability, says Gene Crawford.
Making your web forms responsive is not a topic that's discussed too often. Mostly because it's not a huge deal to get HTML form elements to behave in a responsive manner – that is, to be both liquid and to utilise targeted screen widths with media queries to serve up specific form layout changes.
The main thing is to consider the context in which a person will be using the form. This a question of thinking through the device you are targeting, not just its screen size. Let's look at a couple of examples that help illustrate my point.
Field sizing
First, field sizing is important on smaller screens when people are using their fingers to target a form field. When using our phone, we do not have the same level of precision as we do with a mouse. Apple's Human Computer Interaction Design documentation has some great in-depth information on how to design for people who are using their fingers to interact with a device.
Another consideration when designing a responsive layout is the placement of form elements in relation to their respective fields. On desktops and iPads, having the labels left-aligned makes the form appear simple to complete.
If we change the same form on an iPhone's screen so the labels are on top of the fields, this makes the user slow down a little. As mobile users often have their attention split between different tasks, this should help focus their efforts. Accuracy is more important than speed.
Here are some examples:
Here’s a great example of a typical desktop browser-based contact form: the MCD Partners website (mcdpartners.com/contact). Notice the field titles are left-aligned on this version of the form.
This is the same form for the MCD Partners website, but on an iPhone. Here, the field titles are stacked vertically to save space and make things easier for the user on the long scrolling page.
The main form on the talent recruiting company The Supply’s website (thesupply.com) uses inline form field labels, to create much the same effect as the other examples.
Gene Crawford's mission is to work tirelessly to provide inspiration and insight for developers, mostly via unmatchedstyle.com. This article originally appeared in issue 271 of net magazine.
