Category: UX

8 Tips for Improving Bootstrap Accessibility

A few years ago, I wrote about my experiences on developing a Bootstrap version 3 project to be fully accessible for people with disabilities. This focussed mostly on how accessible it is in terms of front-end design. (It didn’t cover accessibility in terms of screen readers, as that’s a whole other story.) While I...

Help Your Users `Save-Data`

The breadth and depth of knowledge to absorb in the web performance space is ridiculous. At a minimum, I’m discovering something new nearly every week. Case in point: The Save-Data header, which I discovered via a Google Developers article by Ilya Grigorik. If you’re looking for the tl;dr version of how Sav...

Why Use a Third-Party Form Validation Library?

We’ve just wrapped up a great series of posts from Chris Ferdinandi on modern form validation. It starts here. These days, browsers have quite a few built-in tools for handling form validation including HTML attributes that can do quite a bit on their own, and a JavaScript API that can do even more. Chris even sh...

Form Validation – Part 4: Validating the MailChimp Subscribe Form

Over the last few articles in this series, we’ve learned how to use a handful of input types and validation attributes to natively validate forms. We’ve learned how to use the Constraint Validation API to enhance the native browser validation process for a better overall user experience. And we wrote a poly...

Form Validation Part 3: A Validity State API Polyfill

In the last article in this series, we built a lightweight script (6kb, 2.7kb minified) using the Validity State API to enhance the native form validation experience. It works in all modern browsers and provides support IE support back to IE10. But, there are some browser gotchas. Not every browser supports every Valid...

Form Validation Part 2: The Constraint Validation API (JavaScript)

In my last article, I showed you how to use native browser form validation through a combination of semantic input types (for example, <input type="email">) and validation attributes (such as required and pattern). While incredibly easy and super lightweight, this approach does have a few shortcomings. You can s...

Form Validation Part 1: Constraint Validation in HTML

Most JavaScript form validation libraries are large, and often require other libraries like jQuery. For example, MailChimp’s embeddable form includes a 140kb validation file (minified). It includes the entire jQuery library, a third-party form validation plugin, and some custom MailChimp code. In fact, that setup...

“UX drives all of this.”

This little Twitter exchange has stuck in my mind quite a bit. 1997: Let’s make a website!*fires up vi* 2007: Let’s make a website!*downloads jQuery**fires up vi* 2017: Let’s make a website!😵 pic.twitter.com/RT4VVnJjNS — Thomas Fuchs (@thomasfuchs) February 22, 2017 Cut the crap. Websites in 20...

Radios and Checkboxes on GOV.UK

An interesting journey of form UX, documented by Tim Paul. It started with browser defaults. It’s unclear why that wasn’t working. But interestingly, an alteration that included giant label-based click areas in color-offset boxes didn’t help. What actually helped was bigger (and custom) radios and che...

Input Masking

I don’t have any UX research to cite, but anecdotally, I like it when inputs that expect data in a specific format us an input mask. I thought I’d just line up a few demos for really easy reference. Robin Herbots’s (jQuery) Inputmask This is an actively maintained plugin. See the Pen jQuery Input Ma...