Responsive, accessible, mobile-first, and progressively enhanced forms
Web forms can be tricky business. Luckily there are some really smart guys out there keen to solve the challenges associated with doing web forms well. Making forms easy to fill out on touch device, making them easy to navigate for people using assistive devices, making them easy to visually scan, and making the look clean on any device is tall order to fill. Wish I could say I had the brains to figure this all out on my own but that just wouldn’t be true.
A little while back I ran across a great presentation by Aaron Gustafson on accessible, mobile-friendly forms entitled Falling in Love With Forms. He provided a lot of great information on how make forms not suck. Here is a series of form elements inspired by this presentation.
See the Pen Accessible, responsive, mobile-first forms by Mike Donahue (@mdonahue37) on CodePen.
More recently I came across an article on uxmovement.com entitled Why Infield Top Aligned Form Labels are Quickest to Scan that looked at the usability different form styles. They found that including in-field labels (not in the input element) top, left aligned were faster to scan and reduced visual noise. This codepen is based on those findings.
See the Pen More responsive, accessible, mobile first forms by Mike Donahue (@mdonahue37) on CodePen.
This is proof of concept and I’ve no doubt there are several other ways to handle this. There are few kinks I”ve yet to smooth out, if you see them and have some advice let me know. What are your thoughts or best practices on web forms in todays multi-device reality?