Why I Changed How This Site Renders Footnotes

Last week I modified my footnote rendering, which gave me reason to think about how I actually use footnotes and what that means for how they should be presented.

For most of my early writing career, I avoided footnotes entirely. My view was simple: if something was important enough to include, it belonged in the main text; otherwise, it should be cut. That policy held through my early books and articles on this site until the late 2000s.

The turning point came while writing an article about the technology behind Obama's 2008 campaign. I wanted to include many specifics about the work done, but packing them into the narrative made the piece feel like a list and buried whatever story there was. Moving lots of those details into footnotes let the main text stay coherent while still making the material available to anyone who wanted it. That became the core of my footnote philosophy: footnotes are for details I want to include but that would derail the main argument if placed inline.

What the Old and New Renderings Do

My original system rendered each footnote reference as a short link, like [1], to the corresponding entry at the bottom of the article. Clicking took the reader to the bottom, and the browser's back button returned them to their place in the text. The new rendering still opens on a click, but the footnote body appears directly beneath the paragraph instead of at the article's end. I keep the end-of-article footnote section as well, since printouts still need it. My one hesitation about the new approach is that a reader on a phone may need to scroll to see the answer if the paragraph is long — an acceptable trade-off, because I didn't want to split paragraphs just to accommodate the footnote.

Why Not Sidenotes?

Some sites render footnotes as sidenotes, placing the note text in a margin beside the article body. I find that approach too tempting for the eye: it's easy to glance over and read the sidenote, which interrupts the flow of the main prose and defeats the purpose of having footnotes at all. The click requirement matters. Asking the reader to click gives them a deliberate moment to decide whether to read the note†. That choice should be conscious; if reading it is nearly mandatory, you might as well have put it in the text. There is also the problem that sidenotes don't work well on phone-sized displays and would need a fallback rendering anyway.

† Like this

Since this relies on a deliberate click rather than a casual glance, a small superscript seems inadequate. Instead, I use a light grey box as the reference marker — subtle enough not to demand attention, but a large enough target to invite a tap on a phone or tablet.

The Notes

  1. It was a fun bit of programming to support both the new and the obsolete footnote system for this one article.
  2. The reader may need to scroll if reading it on a phone after a long paragraph. But I didn't want to split paragraphs for the footnote text.
  3. There's also the point that sidenotes don't really work on a phone-size display, so will need a different rendering for that case. (And I didn't bother with that for this example.)