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.

score 1 · canonical