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.
Responsive web design is such the hot topic these days and it clearly has it’s proponents and detractors. One common complaint about RWD has to do with the size of site and the impact that has on performance. It’s all too common to find responsive sites sending the same amount of information to mobile devices as they do to desktops. Device detection services and techniques can help us optimize our content and serve the right data to the right device.
At this point you amy be saying, “Isn’t one point of RWD to have a single code base and to deliver the same content to everyone?” The answer is yes and at the same time no. Yes, people are often looking for the same content regardless of what they use to view your site. No, they don’t want that 1800 x 1200 pixel full screen background image sent to their phone.
This is where detection techniques can come in to solve for those problems. Adapting content in a way that provides an optimized but not reduced way. We are not taking anything away because someone is using a smaller device. We simply want to optimize what is sent in order to maintain a good performance and in turn good user experience.
Today I’ve asked Chris Abbott, Mobile Detection and Analytics Expert, from DetectRight to answer some questions about the role of device detection, dispel some misconceptions and how device detection can help in developing optimal web experiences.
Continue reading Q&A: Device Detection with Chris Abbott from DetectRight
If you’ve looked into designing or redesigning a website recently you’ve likely heard the phrase responsive web design, or RWD for short, thrown about. Responsive has been receiving quite a bit of buzz these days and for very good reason. But do you really know what’s involved, how it can help you or why it’s such a hot topic? If not, you’re not alone.
Much has been written on the subject by experts and amateurs alike. Unfortunately many of the experts tend to focus on how to build a responsive site and the articles are heavy on techno-jargon. The amateurs who often try to explain RWD in layman’s terms mean well but often lack the deep understanding to properly communicate important details of the subject leading to confusion about how and when to use it. My goal here is to clear things up and arm you with the information you need to decide if responsive is your best option and how to find the right person or company to help you with it.
Continue reading Responsive Web Design: What Businesses and Clients Need to Know.
I’ve recently run across a couple articles that aim to make the point that responsive web design (RWD) is not a cure all when it comes to designing for the web. While that is true, in the process of getting to their point the authors make several statements that are misleading, inaccurate, confusing and conveluted.
My goal here is not to bash these articles but to clarify some of the mis-information they contain. My concern is for those not well informed about responsive web design taking that bad information and basing their decisions on it and spreading their message. The article on Forbe’s site by Carin van Vuuren is of particular concern because of the sites reputation as a provider of trustworthy information. The article by Erik Martin on the EContent site is equally bad in its attempt to cover the topic and worth discussing here. Clearly not front-end developers, both van Vuuren’s and Martin’s lack of practical knowledge on the subject leads to many erroneous and inaccurate statements that I hope I can clear up here.
Continue reading Responsive Web Design – The Real Problem
Responsive Web Design (RWD) has really come into its own since 2010. This is due in large part to the explosion of mobile devices, notably smartphones and tablets, into the marketplace over the past couple years. But even the best and brightest minds in the field recognize that responsive is only part of the answer.
Continue reading Beyond Responsive Web Design
“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.
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