Tech Note: Sidenotes

What they built
Unbreaking’s tech director Mark Llobera has rolled out a small but thoughtful tweak to how the site handles footnotes. On large browser windows, clicking a superscript footnote now pops the note into a right-hand gutter as a sidenote instead of sending you on a hop to the bottom of the page. The change is meant to keep annotations in context — no more losing your place to a long scroll. Llobera says the site still preserves screen‑reader focus when opening and closing a note, an important detail for accessibility.
Why it matters
Annotations are deceptively hard on the web. A sentence can rearrange itself across devices; what looks tidy on a laptop is a nightmare on mobile. Unbreaking’s issue pages can carry hundreds of annotations, and the traditional jump-to-bottom footnote pattern creates a lot of friction. The team prototyped two approaches — a floating tooltip and a sidebar sidenote — and after internal testing chose the latter for preserving context without obscuring the main text. Designer Ethan Marcotte helped simplify the code and tighten up the focus handling; the result, Llobera writes, is small but satisfying. Who doesn’t like the feeling of a fiddly problem finally behaving?
What’s next
The sidenotes are just one piece of a broader push. Since shipping the feature, the team has also prototyped site search and timeline date‑sorting, with more details promised in future posts. If you care about markup, web UX, or making complex information easier to parse, Unbreaking is inviting contributors — and the project notes it’s run under Raft Foundation Inc. Read more on their blog or follow them on BlueSky. Documenting damage and resistance. Unflooding the zone.
Sources: unbreaking.org, Lobsters
Comments