Web forms that don’t suck

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?

Best Practice, Current Convention or Consensual Hallucination?

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?

7 Mobile First Mistakes to Avoid

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

Goals, Principles and Patterns, Oh My

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

Quote from Long Live the Web

The primary design principle underlying the Web’s usefulness and growth is universality. When you make a link, you can link to anything. That means people must be able to put anything on the Web, no matter what computer they have, software they use or human language they speak and regardless of whether they have a wired or wireless Internet connection. The Web should be usable by people with disabilities. It must work with any form of information, be it a document or a point of data, and information of any quality—from a silly tweet to a scholarly paper. And it should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large.
Tim Berners-Lee
Read full article here.

Web Jeet Kune Do

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

Notes from An Event Apart, April 2011

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