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?
Last month I was interviewed by Ethan Marcotte and Karen McGrane about the recent responsive intranet redesign I was involved with at Citrix. It was a true pleasure. Today they posted the podcast https://lnkd.in/e5NYAmX
In typical Karen McGrane fashion she makes a clear case for dealing with content first. Not just for responsive sites, but for any site.
Seems like a lot of people are laboring under the mistaken impression that using responsive design means they can make a mobile website without dealing with their content problem. Where’d they get that dumb idea?
Before you begin your next responsive redesign, or any redesign for that matter, read Responsive Design Won’t Fix Your Content Problem by Karen McGrane.
“A good player plays where the puck is. A great player plays where the puck is going to be.” – Wayne Gretzky
We’re all aware that things are constantly changing and doing so faster then ever in the world of web. New challenges arise daily. More browsers, more devices, more screen sizes, changing user contexts and much more. Sometime looking at things in new way can paint a more clear picture of the reality. So I’ve taken some time to look at one online properties to see just what we’re up against today and to try to offer some insight on where we’re likely to be this time next year.
Continue reading Behind the Numbers: What one site can tell us.