{"id":7482,"date":"2025-07-01T11:37:32","date_gmt":"2025-07-01T11:37:32","guid":{"rendered":"http:\/\/localhost\/?p=7482"},"modified":"2025-07-01T11:37:32","modified_gmt":"2025-07-01T11:37:32","slug":"give-footnotes-the-boot","status":"publish","type":"post","link":"https:\/\/zero.redgem.net\/?p=7482","title":{"rendered":"Give footnotes the boot"},"content":{"rendered":"
\nI hate footnotes1, and hopefully by the end of this, you will too. Let’s get down to it\u2026<\/p>\n
## The UX of footnotes in printed media<\/p>\n
You, the reader, encounter a tiny number2 within some prose. This indicates to you that I, the writer, have something more to say on this topic. And, for your inconvenience, I’ve put it way down at the bottom of the page.<\/p>\n
The choice is yours: do you skip over it, and stay in the flow of the article, or do you set off on a side-quest to discover the extra wisdom I have to offer?<\/p>\n
It’s like one of those “choose your own adventure” books, except you know the destination is a dead-end, meaning you’ll have to re-trace your steps so you can continue the main thread of the article.<\/p>\n
Maybe if you know me well enough, you can be in tune with the kinds of things that I’d choose to leave in a footnote, and you can make some kind of judgement on whether it’s likely to be worth your time. But since this is the first time I’ve used footnotes in an article3, you don’t really have anything to go on. All that little 3 tells you is that there’s some additional content that may or may not be contextually useful to you, and that it’s the third time I’ve done this to you.<\/p>\n
Whether you go out of your way to read the footnote content is really just a test of your curiosity.<\/p>\n
If you did make your way down to the footnotes, I hope you appreciated that I set the text size to be a little smaller than the ‘ideal’ size that I chose for the main body content, making them harder to read, such is the tradition within the footnote community.<\/p>\n
And if you enjoyed all of that, I have _great news for you_ : many people bring this experience to the world wide web.<\/p>\n
## Footnotes on the web<\/p>\n
If reproduced as-is, footnotes on the web are even worse than their printed counterparts. In print, the footnotes are usually at the bottom of the current page, so they’re a quick glance away, and you can use a finger to mark your place in the main text while you’re off on your side-quest. Whereas on this beautiful pageless web of ours, you have to scroll all the way down to the end of the article. You can try flinging right to the bottom of the document, but if there’s a sizeable footer or comments section, you’ll overshoot the footnotes. And of course, after all of this, you have to scroll back to where you were, which is easier said than done.<\/p>\n
However, most webby footnoters have realised that in the printed world, the numbering of footnotes is used to manually _link_ the primary content to the supplemental content, and the web has a dedicated feature to enhance connections like this: hyperlinks4.<\/p>\n
Of course, with footnotes being at the bottom of the article, sometimes these links will simply take you to the end of the document, so you’ll _still_ have to visually scan for the pertinent footnote5.<\/p>\n
If the footnote markers are links, then the user can use the back button\/gesture to return to the main content. But, even though this restores the previous scroll position, the user is still left with the challenge of finding their previous place in a wall of text6.<\/p>\n
We could try to solve that problem by dynamically pulling the content from the footnotes and displaying it in a popover. In some browsers that will display like a tooltip, pointing directly back to the footnote marker. Thanks to modern web features, this can be done entirely without JavaScript7.<\/p>\n
But this is still shit! I see good, smart people, who’d always avoid using “click here” as link text, littering their articles with link texts such as 1, 7, and _sometimes even 12_. Not only is this as contextless as “click here”, it also provides the extra frustration of a tiny-weeny hit target.<\/p>\n
And all this for what? To cargo-cult academia? Stop it! Stop it now! Footnotes are a shitty hack built on the limitations of printed media. It’s dumb to build on top of those limitations when they don’t exist on the web platform. So I ask you to break free of footnotes and do something better.<\/p>\n
## Alternatives to footnotes on the web<\/p>\n
Here are the goals:<\/p>\n
* Provide easily-read supplementary content. * Let the user easily skip over it if they’re not interested. * Make it easy for the user to decide if they’re interested or not.<\/p>\n
Given that:<\/p>\n
### Just, like\u2026 parentheses?<\/p>\n
Honestly, if you’ve got a quick little aside, just pop it in parentheses. If the reader really wants to skip it, scanning for the next closing parenthesis is pretty easy (unless you’re nesting them \u2013 don’t do that), and it keeps the reader in the flow of the article.<\/p>\n
### A ‘note’ section<\/p>\n
If your content is a little longer, you can use `<\/p>\n` and style it to look self-contained.<\/p>\n