Why footnotes should be side notes on websites
<p>I use footnotes on <a class="wikilink" href="/this_website_is_not_a_blog/">this website</a> because I made it grow from the flow I had while taking notes and writing books. However, a footnote on a book normally appears at the end of a page and allows the reader to access it with a very low effort. On a website, the footnote appears at the end of the page which may be out of sight for a reader. </p>
<blockquote class="quoteback" darkmode="" data-title="Sidenotes%20For%20Web%20Design" data-author="Gwern Branwen" cite="https://www.gwern.net/Sidenotes">
Sidenotes/margin notes are a typographic convention which improves on footnotes & endnotes by instead putting the notes in the page margin to let the reader instantly read them without needing to refer back and forth to the end of the document (endnotes) or successive pages (footnotes spilling over).
<footer>Gwern Branwen <cite><a href="https://www.gwern.net/Sidenotes">https://www.gwern.net/Sidenotes</a></cite></footer>
</blockquote>
<script note="" src="https://cdn.jsdelivr.net/gh/Blogger-Peer-Review/quotebacks@1/quoteback.js"></script>
<p>Tooltips do not solve the issue because they only work with a pointer. Touch devices won't display the footnotes. Moreover, they are hidden from sight, it requires the reader to take an active action to display the footnote instead of just being able to see it. </p>
<p><a href="https://edwardtufte.github.io/tufte-css/">TufteCSS</a> provides a lengthy discussion on some typographic tips for web design, including how to implement side-notes. </p>
<p>Filed under: <a class="wikilink" href="/things_i_want_to_do/">things I want to do</a></p>
Backlinks
These are the other notes that link to this one.
Nothing links here, how did you reach this page then?
Comment
Share your thoughts on this note. Comments are not public, they are
messages sent directly to my inbox.