Trends to Avoid: Marquee Animation

There is a concerning trend in web design that seems to have absolutely taken off, especially on platforms like Squarespace and ShowIt. Squarespace started us off with that perpetually spinning badge in the corner at the top of websites. ShowIt took us a step further and brought back the good old marquee, seemingly brought back from the dead.

The old HTML element has the same issues as the CSS and JavaScript solutions that have replaced it. Those issues include people with motion issues, varied reading speeds, and attention disorders. And the important thing to mention is that these things aren’t universal. Something that isn’t an issue for one person might actually be an issue for many others. The goal of accessibility is to get your site usable for as many people as possible.

“Moving text can be distracting, especially for people with attention deficits or cognitive disabilities. Moving text can also be difficult to read, especially for people with low vision or reading disabilities. A UI control that moves can be difficult to activate, especially for people with limited dexterity.” (Accessibility Insights – marquee)

Add some links into that marquee, and the complexities just pile on from there. Even if the animation pauses on hover and focus, you still have to be able to see the link on focus and keep your mouse moving in a specific path on hover. And for someone with attention or motion issues, they’re going to scroll away as fast as possible and miss it completely. It’s not just something that someone doesn’t like, but it’s something that actually hinders their ability to use a website.

Thinking deeper

Aside from accessibility issues, it’s also important to examine the why behind the motion. One reason given is they’re trying to keep up with the latest web design trends. They liked it because it dragged their attention. I was told by one person that they keep adding them to client sites who then keep asking them to take it off, and that one day someone will let them keep it.

Which at least gives me hope that people keep asking them to remove it. But if everyone keeps asking you to remove it from their site, it could be time to examine the purpose of thise element rather than try to keep pushing it on people because you like it personally.

When thinking about features like this, it’s important to ask if there’s a good reason for something, and is it something that we’re able to adjust for accessibility? Is it effective? What is this marquee bringing to your site? Besides motion for the sake of motion.

The text or images or whatever you have in this marquee is not going to be consumed in its entirety. Even if the text is small and repeated, it’s probably not going to even be read at all. Maybe glanced at, but there are going to be issues with screen readers and comprehension. Nothing important should be going in a marquee.

Do people even like it? Is it something that gets added because someone thinks it’s something people are going to enjoy and find playful and whimsical but nobody actually likes? Is it something we’re trying to improve without thinking it through? Something people think is helpful and fun but most people don’t even want there?

What are the issues with the marquee?

They’re distracting. They’re difficult to read. The speed can’t be controlled by the person reading it. It’s essentially useless when it comes to being something that should actually be consumed for any kind of practical purposes. It’s purely a fancy pretty thing to stick on a page.

It pulls focus, sure. But not in a good way.

I find marquees either distracting or dizzying, or both depending on the type of day I’m having, what I’m doing, and how long I’ve been on the computer already that day. The “I’m adding it because I like it” reason for adding the marquee seems like it’s just not taking into considerations the issues that it does cause and the discomfort I know people feel when that animation is just constantly moving without a way to pause it. And then not to mention the WCAG requirements around motion.

All of those things compel me to find more creative ways to bring motion and intrigue to a website. I love adding animation to a page in ways that make sense, that enhance the user experience, that provide feedback, that have purpose. I’d rather take what is happening in this perpetual motion on the page and come up with a more creative and less invasive way to infuse personality and creativity onto the page.

If you do use it

If you do end up going the way of the marquee, you’ll need to respect reduced motion settings. That’s the bare minimum. If I tell my computer to reduce motion, those spinning badges shouldn’t be moving and the marquee should not be moving. If the text is longer than what can fit in the width of the browser, it should also expand to display everything in the marquee. And for the people who might not have the need to reduce motion on the entire device but also have an issue with the marquee, a pause button should be included as well.

You should then test the marquee just like you would with any other element on the page. Test on initial page load, when the browser window size changes, when people return to the site. Make sure it works and saves user preferences. Check for bugs, for when JavaScript is disabled. There’s a lot to consider and test in situations that just might not work as intended.

Finishing up

My advice before adding a marquee element to the page is to focus on the accessibility of the rest of the page and the rest of your site. Then, down the line, the idea of a marquee can be revisited when you have the resources to devote to researching its effectiveness, the best way to implement it, if it should be added at all. All the considerations you need to make it accessible.

Unless you’re committed to getting it right and have a really good reason to use it, instead of designing a more user-friendly way to convey your information, this marquee trend definitely falls into the category of avoid. The marquee HTML element was deprecated, and it should stay in the past where it belongs.