Give footnotes the boot – alternatives to footnotes on the web (opens in new tab)

For footnotes/sidenotes/endnotes, I think about a few implementations:

- Dorian's expandable parentheticals (click on the gray phrases): https://doriantaylor.com/person/dorian-taylor#me

- Gwern's list of sidenote implementations: https://gwern.net/sidenote

- The ellipsis -> bottom modal pattern, found on buttondown articles like this one: https://buttondown.com/hillelwayne/archive/you-can-cheat-a-t...

These days, I try to remove tangents from my writing, publishing any good tangents as microblog content instead.

I'm also considering unhyperlinked footnotes, and letting the reader scroll to the bottom if they want, the low-tech way. It's less distracting that way, and there's no accessibility issues either.

On my personal site, if there's enough room, I show the footnotes to the side of the page, with their top roughly aligned with their position in the text. There's still links, and hovering over the superscript indicator adds a slight background to the corresponding sidebar element. This seems to work well,on desktop. They still follow all the traditional conventions you'd expect, with anchors and return links, so if you can't use the sidebar, it's not an utterly useless experience either

I've been thinking about adding popups, koreader style, for mobile, but haven't yet. Partially because I haven't figured out some of the deeper UX concerns, but mostly because I'm lazy

Anyway, here's an article with a decent amount of footnotes (side notes?):

https://pdx.su/blog/2024-08-10-diy-permanent-xmas-lights/

I've always enjoyed the to-me graceful experience of coupling each link to a footnote with a return anchor, so that you get the (to olds like me) familiar experience of footnotes without the pain of navigating to the bottom and then forgetting where you came from. My memory is that Daring Fireball, among many other sites, does this. (I just checked, and it does. Here's the most recent article that uses a footnote: https://daringfireball.net/2025/06/apple_app_store_policy_up.... Here's the reference to the footnote: https://daringfireball.net/2025/06/apple_app_store_policy_up.... And here's the footnote itself: https://daringfireball.net/2025/06/apple_app_store_policy_up.... This does require some special handling if you refer to the same footnote multiple times, but, if you really need to do that, the solution could be as simple as having the second reference be to a new footnote that immediately refers to the old one.)

I'm a big fan of sidenotes as a solution for this. If you're on desktop they'll pop out to the side and it's easy enough to glance over at them or stay focused on the main text without having to navigate around. On mobile that obviously doesn't work, but instead you can just have them open inline, so you don't have to deal with the annoying anchor link jump behavior and remembering where you were. And it's all doable with CSS and float, no Javascript!

Here's an example with a fair number of sidenotes:

https://blog.alexbeals.com/posts/possession

Lila any good solution design, we should start with the problem, but the author skips right over that part:

> [The superscript number] indicates to you that I, the writer, have something more to say on this topic.

Not really, though? Notes range from citations to parentheticals. “Having more to say” would be included in the main text I’d think. The point of notes is that you don’t “have more to say” on the main topic, but you have this other information that some readers might find useful.

I do agree that there is no need to get hung up on solutions used in print (footnotes and endnotes) for online material.

I have to question the premise here: is reading footnotes really that hard? I can't recall ever struggling to find where I was in the text after "returning" from a footnote.

Those aren't footnotes. Those are endnotes. Footnotes go at the bottom of the same page they're cited on.

I hate that every e-book format I've encountered seems to only do endnotes, too.

I use footnotes abusively on https://allaboutberlin.com. I also use all the tricks mentioned. I exclusively use then to cite sources.

I can tell that some readers check sources, because the links sometimes shift around and users report those errors. They're a good way to get clarification on certain things.

I do think that the markers are distracting. They also get included in copied/pasted text. I tried different fixes but they all fall short. Numbers work best.

> 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.

Your "ideal" body text size (an line spacing) is way too large anyway. Even the footnotes are still well above ideal size.

> I see good, smart people, who'd always avoid using "click here" as link text

Links to: https://www.w3.org/QA/Tips/noClickHere

> contributed Sep 2001 by Aaron Swartz

RIP you're still remembered

Good stuff, thanks.

As an aside, I didn't know that the popover technique could be done with html and CSS only, neat! I'll use this for my learning content in-line glossary links from now on.

Leaving aside the author's unsubstantial introductory diatribe, he does not properly evaluate the "popover" footnote implementation, which is the clear solution, nor does he compare it with his three alternatives.

Regarding the popover:

> We could try to solve that problem by dynamically pulling the content from the footnotes and displaying it in a popover. In some browsers (including yours) that will display like a tooltip, pointing directly back to the footnote marker. Thanks to modern web features, this can be done entirely without JavaScript.

> 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.

The claim that footnotes are "contextless" is not sound. One cannot attribute the "contextlessness" of "click here" hyperlinks to footnotes because footnotes and hyperlinks fundamentally differ: footnotes are simply placeholders for additional text and do not call the user to action.

Perhaps the author meant that a footnotes's form, i.e. a number or symbol, doesn't provide context for the note itself. While this claim is sound, it is irrelevant because a footnote link shouldn't need context; the sentence provides it.

While the claim about a "tiny-weeny hit target" is sound, the author fails to consider alternatives. Increasing font size or wrapping the link in brackets would help the problem.

Regarding popovers vs. the three proposed alternatives: i) parentheses; ii) `note`; and iii) `<details>`:

1) All three options are more distracting because they occupy more space. And (ii) and (iii) add color. And I'd guess that readers are more likely to unintentionally skim (ii) or open (iii) because they're primed by other websites. All these modes of distraction run contrary to the purpose of the footnote. In fact, a footnote occupies the minimum space possible.

2) Option (ii) adds lots of unseemly vertical space to the webpage.

3) Option (iii) moves the webpage text below the note up and down. This interferes more with the reading experience than does the static popover.

4) Options (ii) and (iii) are not portable over copy paste. If you copy a webpage with these elements into another file, you'll have to manually rearrange them to appear as actual footnotes.

5) All options, as implemented by the author, eliminate the key-value nature of footnotes. One cannot refer to a particular parenthetical, `note`, or `<details>` because they aren't numbered. While (ii) and (iii) could be numbered with no problem, numbered parentheticals start to look weird.

6) All three options give footnotes more visual presence than they should have. Particularly (ii) will make the footnote seem like the most important quote of the article. Footnotes should be out of eyesight most of the time, just like feet.