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?
Given the pace at which things change in the realm of web, when is something a true best practice, merely a current or common convention, or are we all suffering from a “consensual hallucination” as Jeremy Keith says? What was a best practice yesterday may not be tomorrow, or even today for that matter.
Are things moving so fast that best practices don’t really exist any longer or does our use of the term need to change to reflect today’s reality? My goal here is to open up some discussion and thought on how and when we use these terms and how to avoid falling victim to hallucinations.
Continue reading Best Practice, Current Convention or Consensual Hallucination?
A great post on how to “think” about web development. Everyone should read this if they plan for their site to be seen beyond the desktop display. Maybe even more so if don’t think about your site being seen beyond the desktop display.
There is more than a little written about mobile first design. The problem is that most of what’s written is focused on designing for devices and not the people that use them. Here are 7 common mistakes, or misconceptions, I hear people making when approaching web design from a mobile first perspective.
No. 7: Thinking Mobile First is a Design Pattern
Mobile first is way of thinking about design, development, content, usability and experience. Like I said, much has been written and it’s mostly about mobile first “design.” This often leads to the errant assumption that it’s only about the design. It’s not. It’s really a strategic and philosophical way of addressing the challenges we face in this always connected world we live in today.
The term “mobile first” isn’t helping out either. It seems as though the word mobile more often than not makes people think about mobile devices rather the mobile context. To think mobile first means to consider everything that could be at play for the user. Their device is just one small piece of the puzzle.
Continue reading 7 Mobile First Mistakes to Avoid
A couple years ago I had the good fortune to hear Jeremy Keith give a talk at An Event Apart. During his talk he spoke about three important factors that make up our work – Goals, Principles and Patterns. Unfortunately it seems that all too often many of us only tend to the Goals and Patterns of our work. The WHAT we do and the HOW we do it.
What about Principles? The WHY to our HOW and WHAT. Why do principles seem to get overlooked, neglected or all together forgotten in the day to day of our work? Are they really just not important? Or, is it because they, can at times, make our work more difficult?
Continue reading Goals, Principles and Patterns, Oh My
What Bruce Lee can teach us about web design.
“Empty your mind, be formless. Shapeless, like water. If you put water into a cup, it becomes the cup. You put water into a bottle and it becomes the bottle. You put it in a teapot it becomes the teapot. Now, water can flow or it can crash. Be water my friend.” – Bruce Lee
This one quote contains all the wisdom we need to approach our web projects in a way that helps us survive in an unpredictable and ever changing industry. Let’s face it, there are times were it can feel like we’re doing battle as we work on some projects. Battling with clients, stakeholders, designers, developers and everyone else that’s involved throughout the process. So what better way to face these challenges then armed with an attitude that is adaptive, flexible and fluid.
Continue reading Web Jeet Kune Do
Over the last year or so much has changed in web design. Our big problem use to be backwards compatibility with IE6. But now we find ourselves in the midst of a zombie apocalypse. New smart-phones and tablets are popping up faster then the brain hungry undead in a George A. Romero movie.
Luckily a lot very of smart people have been paying attention and coming up with ideas and solution on how to deal with this impending apocalypse. Here’s brief summary of all the lessons learned over the last year. Follow them and you just might survive.
Continue reading Notes from An Event Apart, April 2011