While callouts can be useful for things that are worth drawing attention to, there are often little bits of information that are worth including but not disrupting the flow of the content. You might often hear them referred to as ‘parentheticals’, ‘footnotes’, ‘end notes’ or something like that.
With footnotes and end notes, they’re generally tacked on at the end of an article or chapter. So they end up removed from the flow of reading. That’s where side notes and margin notes come in.11The idea for margin notes and sidenotes has a long history, but more recently Edward Tufte has made the practice more visible and has a thread on his site where he shares the background and reasons for the practice.
With a static piece of paper, sidenotes work more naturally because the margin is always there, but on the web, we have to think about responsive layouts and make adjustments accordingly.
<%= note 'This would be a sidenote that receives a number and is displayed in the margin.' %> A simple note helper can be passed a note, and the system takes care of the rest. These should be used inline directly following the word or phrase they relate to.
<span class="note"><sup class="note-number" id="note-ref-2"><a href="#note-2" title="Footnote 2">2</a></sup><small class="note-body" id="note-2" role="note"><sup class="note-number"><a href="#note-ref-2" title="Back to Footnote 2 Reference">2</a></sup><span>This would be a sidenote that receives a number and is displayed in the margin.</span></small></span> A simple note helper can be passed a note, and the system takes care of the rest. These should be used inline directly following the word or phrase they relate to.
At larger widths like one would see on a desktop computer or a tablet in landscape mode, the sidenotes are displayed in the margin as one would expect, but at narrow widths when the margin disappears, the sidenotes are collapsed and can be expanded inline by selecting the sidenote number in the prose.