First up this week, Tatiana Mac wrote about taking a no-motion-first approach to animations where she argues that animations can be neat and fun and great but for some folks animations are horrible and can cause them actual discomfort or even pain.
In light of this, Tatiana argues that we should make our websites work without motion first:
Animations help to breathe life into interactive experiences. Animations, especially when overused and abused, can make people very ill. Through this article, I hope to provide you an approach and guidance to discussing how you/your company use animation thoughtfully and responsibly.
This approach doesn’t require us to completely change the way we work, only the way we think. And so Tatiana recommends that when we need to add animation we ought to use this fancy media query called prefers-reduced-motion:
@media (prefers-reduced-motion: no-preference) {
/* animation styles go here */
}What this will do is check to see if the user has disabled animations in their operating system and if they haven’t, it’ll then apply those animation styles within. That certainly sounds simple enough to me.
I also really liked this bit of the article where Tatiana describes what’s critical versus what’s valuable in interface design on the web:
When I collaborate with a designer/animator on an animation, I first ask, “Is this animation critical to understanding the content?”
More often than not, the answer is “no.” (It might take some finessing of the conversation, so remember to emphasise that being critical isn’t the same thing as being important or nice or aesthetic.) When conceived well, animations should be an enhancement to an explanation.
I love this because it’s progressive enhancement through and through. What’s truly critical in an interface? Are fonts? Are images? Are those border radiuses and that fancy scroll-jacking animation that flips across the screen? We have to let our ego take a raincheck for a bit and admit that, well, nope—when it comes to web design all of those things are accessories, additions to the critical functions of the site.
This reminds me of a story I heard about Nintendo and how they made Mario 64. Throughout the entire development process the team had a single question they would ask themselves whenever they added a new feature or mechanic: “Is this fun?” It was their only metric for success and helped guide them through the development process of a truly brilliant game.
Perhaps when it comes to web design we should be asking ourselves a similar question. And maybe our question depends on the company/the problem/the context of whatever we’re trying to build.
But I think a good starting point is to ask ourselves: “Is this critical?” Because when it comes to web design what’s truly critical is HTML and that’s about it. Everything else is a nice to have but words and links and forms are perhaps the only truly critical parts of an interface—and that’s the beautiful thing about progressive enhancement.
Platform News: is(), where(), and MathML
Šime Vidas’s Platform News is always extremely good and this week’s edition is certainly no different. Šime writes about the prefers-contrast media query and how it’ll help us make interfaces have higher contrast for some folks…
Šime also mentions MathML and that’s something I had never heard of before, but according to the W3C it’s “a low-level specification for mathematical and scientific content on the Web and beyond.” So if you need to show complex equations on the web, then MathML is your friend. It sounds like there’s renewed interest in making this properly integrated into the web platform, which certainly sounds like good news.
A Quick Reminder About Forms
Melanie Sumner made a great thread on forms where she reminds us what we should priortize as we build them. Here’s two quick notes that are worth remembering:
- Group radio buttons together with the
fieldsetandlegendelements. - If it’s a form for a search, put
role=“search”on theformelement.
And perhaps the most important rule I see broken over and over again:
Finally, all form elements need a label! And I mean, a programmatic label. The
labelelement is best. Placeholders are not acceptable labels.
Also this reminds me about this excellent deep-dive into Form design by Geri Reid which is absolutely worth your time. Also also, I just love the design of this site, too:
A Generative SVG Starter Kit
This piece by George Francis caught my eye earlier this week because it shows how to use SVG as a canvas. George walks through a number of different tools and libraries, such as SVG.js, that can help us do the painting.
I also love how George reminds us all what’s possible with SVG, randomness, and animation when he links to examples from Liam Egan like in this demo:
Speaking of SVG being an artistic medium more than just a practical one, I also loved this piece by Bence Szabó on creating patterns with SVG filters.
For years, my pain has been not being able to create a somewhat natural-looking pattern in CSS. I mean, sometimes all I need is a wood texture. The only production-friendly solution I knew of was to use an external image, but external images are an additional dependency and they introduce a new complexity.
I know now that a good portion of these problems could be solved with a few lines of SVG.
In Praise of the Unambiguous Click Menu
How many times have you hovered over a menu item and struggled clicking the right thing? Or suddenly seen a bunch of menu items appear and then disappear out of sight as you moved your mouse across the screen?
That’s what Mark Root-Wiley tackles in this post all about why we should make menus clickable and not hoverable; it’s so much better for usability and accessibility:
Instead of relying on the hover interaction or some other “creative” (and confusing) solution, let’s build menus where parent items are buttons that show and hide submenus when clicked. This instantly solves the hover menu problem because click menus work unambiguously.
Did you know about the :has CSS selector?
Although it’s not in our browsers yet (and maybe it won’t ever be), I think it’s useful to learn about the :has() selector in CSS:
File this under stuff you don’t need to know just yet, but I think the :has CSS selector is going to have a big impact on how we write CSS in the future. In fact, if it ever ships in browsers, I think it breaks my mental model for how CSS fundamentally works because it would be the first example of a parent selector in CSS.
I also made a quick note there about how handy the :not() and :is() pseudo-classes are. I think :not() alone is enough to change how I work with CSS on a day-to-day basis, with simple lines of CSS like this…
ul li:not(:last-of-type) {
margin-bottom: 20px;
}…giving us the ability to only add CSS if the element is not the last of its type. Before, you might have had to set some whacky styles up to tackle this problem or remove margin from the last item. I often tend to forget how much has changed with CSS in just a few short years — features like this makes me extremely excited for where CSS is headed next.
axe DevTools Pro
“Friends don’t let friends ship inaccessible code,” writes Chris Coyier in this sponsored post about how to use axe DevTools Pro. This is an extremely nifty browser extension that scans your page and shows you all of the accessibility problems with it in a flash:
The “Gray Dead Zone” of Gradients
Here’s an effect in design that I’ve known about for years but didn’t know there was a name for: the gray dead zone of gradients. That’s what Erik D. Kennedy calls this effect:
Notice how on the left image there’s this grayish color between the yellow and the blue? That’s the gray dead zone and the way we can fix it is by using a third color in between the two colors.
Erik even created a gradient generator that helps us pick this third in-between color, which looks extremely helpful.
Sponsor
GoDaddy Pro
Do more for clients with GoDaddy Pro, a free set of site, client and project management tools. Manage and monitor all your clients’ sites from a single place, no matter where they’re hosted.
Sponsor
Build exactly the eCommerce website you want
WooCommerce is a customizable, open-source eCommerce platform built on WordPress with everything you need to start selling online. Add the WooCommerce plugin to any WordPress site and set up a new store in minutes. Get secure payments, configurable shipping options, and more, out of the box — for free.
[Chris]: Here’s a thing: The Browser Company. It’s a startup, and as far as I can tell they’ve shared very little about what the big plan is. Focus mode and a text editor (what’s been shared so far) are kinda neat but not the kind of thing you get a massive bucket of VC bucks for. You don’t pay a staff of 20 A-listers without a massive bucket of VC bucks.
I say “massive” bucket, but I’d guess it’s some tens of millions of dollars, which is somehow both riches beyond belief and a small-to-medium-sized runway for a tech startup. So what they aren’t doing is building a browser engine from scratch.
I don’t have direct industry experience with creating a browser, but this is how I imagine it plays out. If you want to seriously make a new entire browser engine, it’s a billion+ dollar play. A massive staff of top-tier engineers experienced in this exact thing and years and years of time. In the end, you’d probably have a worse product than Chromium, because they are decades ahead of you in getting thousands upon thousands of details ironed out. Even if it’s as good or better, there is no business model directly behind a browser engine. You can’t sell it because everyone else gives out their great open-sourced ones for free. It’s not a game that’s worth playing. A better game is: how can we make the ones we already have better?
I assume that’s the game The Browser Company (of New York!!! lol) is playing. And in all honestly, I hope it’s awesome. I think there is a ton of potential in taking an existing, awesome, open-source browser engine and re-inventing the entire UX around it.
It sounds like they’re going to take a pretty big swing at it, which I’d love to see. The smaller swings aren’t doing it for me. For example, I came across Sidekick the other day, which is Chromium plus dedicated left-side tabs for work-apps. Gmail! Notion! Figma! I use all that stuff. Seems like it’s kinda made for me. But I just couldn’t get into it. I can’t even tell you why exactly, but in the end, I think it just didn’t give me enough above vanilla Chrome.
