Two years ago, I wrote about
prefers-reduced-motion, a media query introduced into Safari 10.1 to help people with vestibular and seizure disorders use the web. The article provided some background about the media query, why it was needed, and how to work with it to avoid creating disability-triggering visual effects.
The article was informed by other people’s excellent work, namely Orde Saunders’ post about user queries, and Val Head’s article on web animation motion sensitivity. … Read article “Revisiting prefers-reduced-motion, the reduced motion media query”
As a young nerd, I loved to immerse myself in digital worlds, learning the ins and outs of the rules someone else had created for me (intentionally or not). But the older and crankier I get, the more I find myself losing patience when navigating these “delightful” experiences.
This fascination was great for my eventual career as a designer, but unfortunately, it was also like teaching someone kerning—once you learn how to quantify a bad user experience, you can’t … Read article “Reader Mode: The Button to Beat”
The Open Web continues to show up in places we would have never originally expected to find it: our phones, televisions, watches, books, video game consoles, fast food menus, gas pumps, elevators, cars—even our refrigerators.
By not making too many or too strict assumptions about how the web should be used, it remains flexible and adaptable. These qualities have allowed it to outperform closed technologies like Flash and Silverlight.
With the web’s growth comes new features to better accommodate its … Read article “The possibilities of the color-adjust property”
Not everyone uses a mouse to browse the internet. If you’re reading this post on a smartphone, this is obvious! What’s also worth pointing out is that there are other forms of input that people use to get things done. With these forms of input comes the need for focus styles.… Read article “Focusing on Focus Styles”
The semantics inherent in HTML elements tell us what we’re supposed to use them for. Need a heading? You’ll want a heading element. Want a paragraph? Our trusty friend
<p></p> is here, loyal as ever. Want a download? Well, you’re going to want… hmm.
What best describes a download? Is it a triggered action, and therefore should be in the domain of the
<button></button> element? Or is it a destination, and therefore best described using an
<a></a> element?… Read article “Building a Good Download… Button?”
Much like their physical counterparts, the materials we use to build websites have purpose. To use them without understanding their strengths and limitations is irresponsible. Nobody wants to live in an poorly-built house. So why are poorly-built websites acceptable?
Considering that written words are the foundation of any interface, it makes sense to give your website’s typography first-class treatment. When setting type, the details really do matter. How big? How small? How much line height? How much letter-spacing? All of these choices affect the legibility of your text and can vary widely from typeface to typeface. It stands to reason that the more attention paid to the legibility of your text, the more effectively you convey a message.… Read article “Keeping track of letter-spacing, some guidelines”
Boston, like many large cities, has a subway system. Commuters on it are accustomed to hearing regular public address announcements.
Riders simply tune out some announcements, such as the pre-recorded station stop names repeated over and over. Or public service announcements from local politicians and celebrities—again, kind of repetitive and not worth paying attention to after the first time. Most important are service alerts, which typically deliver direct and immediate information riders need to take action on. … Read article “Let’s Talk About Speech CSS”
Sites all too often inundate their audiences with automatically playing, battery-draining, resource-hogging animations. The need for people being able to take back control of animations might be more prevalent than you may initially think. … Read article “An Introduction to the Reduced Motion Media Query”