📝 CSS-Tricks 243: Critical vs. Valuable

View this newsletter on the web.

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s