Footnotes are always a mandatory disruption to the flow of reading, because readers can’t tell up front whether a footnote is worth the effort or not. Like when reading on paper, a footnote should always be in view and never require interaction, so it can be read with just a glance. Which implies that on a web page it’s better to lay out that kind of thing as an aside, without trying to emulate paper footnotes.
“Footnotes” on web pages are more like endnotes in books, where you have to keep an extra finger between the pages and repeatedly flip back and forth. (Even worse if the endnotes are used for both citations and commentary!)
I find it a little better when it’s footnotes you can hover over to see a pop-up with the content. But that’s just a smaller disruption, it’s still a disruption.
What I like to do when I have to is to add blocquotes starting with “Note:”. You can see a few examples of that in this post: https://mort.coffee/home/fast-interpreters/ It doesn’t do exactly the same job as footnotes but I think there are some examples there which footnote users would’ve written as a footnote.
If I used footnotes, I would want any readers who care about the footnotes to finish reading the paragraph, then go back and read the footnotes. The worst case scenario would be that a reader jumps to the footnote mid-sentence and starts reading a whole different sentence. So why not just put the content of the footnote in the next paragraph, so that I retain control of the reader’s flow?
Just my personal feedback: the footnotes are at the bottom where my thumb also is. Trying to scroll the page leads to scrolling the footnotes instead and I have to move my thumb higher up which is unintuitive. It would perhaps be nicer if the footnotes were in an expandable drawer that doesn’t constantly interfere with the scrolling.
I don’t think I have seen this pattern elsewhere on narrow screens. They really are “footnotes!” Myself, I have recently switched to CSS anchor positioning to have margin notes falling back below the current paragraph if the viewport is not wide enough.
Could you give me a short example how you do it? Do you hand-roll your blog or is the SSG you use that extensible? I’ve read many fun tricks over the years, but most blogging engines feel like they have a fairly narrow idea what a blog post should be and don’t really allow for arbitrary extensions…
I am using a fork of Hyde (it’s an unmaintained SSG written in Python). The markdown is generated by Python-Markdown and I am post-processing the generated HTML to change the markup used for footnotes to be able to turn them into sidenotes. Likely, I could also have written/overloaded a specific extension for Python-Markdown.
One day, I’ll rewrite all this from scratch to not depend on a specific blog engine, but for now, I live with this hacky setup. Depending on what I need, I either patch Hyde, extend it with a plugin, add a plugin for Pygments, shell-out to Node.JS (notably for CSS stuff, with PostCSS to downgrade CSS files), or add a post-build step (image minification, cache busting). It’s still quite flexible and fast enough (about 30s), even if it’s not pretty.
Side notes are nice, but, on the contrary, I don’t really like how Tufte styling handles foot/side notes on mobile by collapsing them, which is quite against what the parent comment says:
Like when reading on paper, a footnote should always be in view and never require interaction, so it can be read with just a glance.
Is it in view? No, it’s collapsed. Does it require interaction? Yes, you need to click that ⊕ icon. (And what does “⊕” even mean? It’s definitely baffling for a first-time reader.) And then, there’s also browsers’ reading mode which ignores those clever CSS trick. As a result, all the side notes are inlined into the main text, with no boundary indicators, which is quite disastrous for reading experience in my experience.
One of my blogs does use side notes. But instead of fully following Tufte CSS, I separate footnotes into several blocks (grouping nearby footnotes together, similar to how each page of a book may have its own footnote block), and then place each block one or two paragraphs below their references. On wider screens, they are styled as side nodes; in reading mode or on mobile, they are just normal text blocks, placed near the references, between the paragraphs where I see fit to insert a slight disruption.
Footnotes are always a mandatory disruption to the flow of reading, because readers can’t tell up front whether a footnote is worth the effort or not. Like when reading on paper, a footnote should always be in view and never require interaction, so it can be read with just a glance. Which implies that on a web page it’s better to lay out that kind of thing as an aside, without trying to emulate paper footnotes.
“Footnotes” on web pages are more like endnotes in books, where you have to keep an extra finger between the pages and repeatedly flip back and forth. (Even worse if the endnotes are used for both citations and commentary!)
score 1 · canonical
I find it a little better when it’s footnotes you can hover over to see a pop-up with the content. But that’s just a smaller disruption, it’s still a disruption.
What I like to do when I have to is to add blocquotes starting with “Note:”. You can see a few examples of that in this post: https://mort.coffee/home/fast-interpreters/ It doesn’t do exactly the same job as footnotes but I think there are some examples there which footnote users would’ve written as a footnote.
If I used footnotes, I would want any readers who care about the footnotes to finish reading the paragraph, then go back and read the footnotes. The worst case scenario would be that a reader jumps to the footnote mid-sentence and starts reading a whole different sentence. So why not just put the content of the footnote in the next paragraph, so that I retain control of the reader’s flow?
score 1 · canonical
Agreed! I wrote a blog post about this.
https://basis.kobes.ca/20260726-doing-footnotes-wrong/
score 2 · canonical
Just my personal feedback: the footnotes are at the bottom where my thumb also is. Trying to scroll the page leads to scrolling the footnotes instead and I have to move my thumb higher up which is unintuitive. It would perhaps be nicer if the footnotes were in an expandable drawer that doesn’t constantly interfere with the scrolling.
score 1 · canonical
I don’t think I have seen this pattern elsewhere on narrow screens. They really are “footnotes!” Myself, I have recently switched to CSS anchor positioning to have margin notes falling back below the current paragraph if the viewport is not wide enough.
score 2 · canonical
Could you give me a short example how you do it? Do you hand-roll your blog or is the SSG you use that extensible? I’ve read many fun tricks over the years, but most blogging engines feel like they have a fairly narrow idea what a blog post should be and don’t really allow for arbitrary extensions…
score 1 · canonical
I am using a fork of Hyde (it’s an unmaintained SSG written in Python). The markdown is generated by Python-Markdown and I am post-processing the generated HTML to change the markup used for footnotes to be able to turn them into sidenotes. Likely, I could also have written/overloaded a specific extension for Python-Markdown.
One day, I’ll rewrite all this from scratch to not depend on a specific blog engine, but for now, I live with this hacky setup. Depending on what I need, I either patch Hyde, extend it with a plugin, add a plugin for Pygments, shell-out to Node.JS (notably for CSS stuff, with PostCSS to downgrade CSS files), or add a post-build step (image minification, cache busting). It’s still quite flexible and fast enough (about 30s), even if it’s not pretty.
score 1 · canonical
This, 100%. I really like how Tufte CSS formats footnotes: They appear on the side on wider screens, and are revealed directly in the text on phones.
score 2 · canonical
Side notes are nice, but, on the contrary, I don’t really like how Tufte styling handles foot/side notes on mobile by collapsing them, which is quite against what the parent comment says:
Is it in view? No, it’s collapsed. Does it require interaction? Yes, you need to click that ⊕ icon. (And what does “⊕” even mean? It’s definitely baffling for a first-time reader.) And then, there’s also browsers’ reading mode which ignores those clever CSS trick. As a result, all the side notes are inlined into the main text, with no boundary indicators, which is quite disastrous for reading experience in my experience.
One of my blogs does use side notes. But instead of fully following Tufte CSS, I separate footnotes into several blocks (grouping nearby footnotes together, similar to how each page of a book may have its own footnote block), and then place each block one or two paragraphs below their references. On wider screens, they are styled as side nodes; in reading mode or on mobile, they are just normal text blocks, placed near the references, between the paragraphs where I see fit to insert a slight disruption.
score 1 · canonical