Inspect Element No. 1: <marquee>'s Biz Case
Grab a snack and pop open your developer console, because it's time to inspect some elements!
In this newsletter, we explore interfaces of all sorts, as well as the work and design behind their implementation. At Pulp, our expertise is in software accessibility, but we draw inspiration from other fields as well. This is our attempt to share that inspiration.
What’s Old Is New Again:
Wingnut fashion blog Man Repeller recently rebranded as Repeller alongside a top-to-bottom site redesign. This went over with its core audience like Kohl’s Cash at NYFW. Many in the comments surmised the blog’s blander identity had been deliberately crafted to appeal to advertisers, portending the inevitable style-mag slump towards “high-traffic content publishing platform.”
Man Repeller’s bright colors and kicky type have given way to page takeovers and chummy interstitials (in my case, for AmEx and a local casino). All content is fenced into a single center column: mobile-only instead of mobile-first. However, some attempt has been made to hold onto the site’s original quirky charm. On the new front page, a CNN-style news ticker features emoji-garnished headlines scrolling right-to-left at a galloping clip. Although it’s built with CSS animations, it recalls the much-maligned vintage
In the rip-roaring 90s,
<marquee> tags were everywhere on the web. Introduced by Microsoft in 1996 and initially only supported by IE,
<marquee> was soon adopted by other browsers, but was never officially sanctioned by the W3C. By the early aughts, the tag had veered into “considered harmful” territory and browsers began to drop support. The primary argument against
<marquee> was that its motion distracted users, made it difficult to concentrate on page content, and raised numerous accessibility issues. To content authors, this may seem like a bug, but to advertisers, it’s a feature.
It is unclear whether Repeller's headline marquee is a conscious throwback to the bad old days, or a serendipitous reinvention by someone too young to remember them. The element cannot be hidden and can only be paused when hovered with the mouse (a 2.2.2 Pause, Stop, Hide violation). To their credit, it is not position: sticky’d to the top or bottom of the viewport, but nevertheless the element, like its predecessor, is specifically designed to seize our attention. To a screen reader, however, this marquee is simply a static list of links -- arguably a better user experience. (No one tell them about
A Contrast-Friendly Color Picker
Here’s a great example of UX poka-yoke: An Opinionated Color Picker by Joe Ringenberg. Rather than putting the burden on users to find their own accessible color combinations, Wistia’s color picker limits their choices based on background color. This is a great example of a content creation platform ensuring downstream accessibility not just for its own users, but for its users’ users as well. Its docs around accessible video creation are also delightful.
Open Source in Education
Once in a while, open-source methodology comes in handy outside of the software industry. Distance Learning for Special Education is an unassuming and uncredited Google Site containing links to lesson plans, printables, videos, and how-tos for parents and educators. Its self-summary reads:
“Resources on this page are provided by educators and families from around the world. We are collaborating to support the needs of students with significant disabilities during the COVID-19 pandemic. These materials are open source and may be adapted to fit your child or student's need. They may not be used for purchase.”
Open-source lesson plans? Seems like the kind of thing the Internet was built for.
Don't be a stranger
See you next time!