5 ms·

Sidenotes in Web Design

120 points by 12_throw_away 3y ago

deleted 3y ago
[deleted]
troupo 3y ago
I'm always endlessly mesmerized by this website's design. It also shows a glimpse of what document-heavy hyperlinked web could've been, and never became.
- imjonse 3y ago
  Since most of the hyperlinked web is not document-heavy today, as opposed to what it was 30 years ago, form followed function and we have distracting visuals and annoying UX over mostly shallow content :)
  - troupo 3y ago
    Most of the web is still document-heavy, but yeah, it's mostly ads and annoying UX over a sea of nothingness
yoava 3y ago
looks like a really deep analysis of side notes in web design. Super interesting. However, I do not see a discussion of side notes and SEO (search engine optimization), and the implication of using this or that technique on SEO
- gwern 3y ago
  There are no SEO implications, AFAIK.
  - yoava 3y ago
    it is not that simple. If you are using JS generated sidenotes, they are invisible for SEO engines.
    - gwern 3y ago
      As I understand it, any search engine whose SEO you care about will be loading web pages in a headless browser running JS these days, so depending on JS doesn't make something invisible. In any case, there is not much reason to use 'JS generated sidenotes', and I'm not sure any of the scores of examples I link do so. The sidenotes are part of the document, and get served with the rest of the document. (The ones which rely on JS are only doing so for presentation; the actual sidenotes continue to live in various span or div or aside elements that a search engine should have no problem understanding.) Unless you have some major counterexample, sidenotes/SEO seems like a non-issue to me which really is that simple: "no".
hennell 3y ago
This article would be a lot more persuasive if it's footnotes on mobile weren't a total mess of a system that's going in my bookmarks of bad design. Everything is in black with white borders so the layers of pop over is hard to distinguish from everything else. The close button is also only at the top which isn't immediately obvious to find when you've read the text and is hard to reach on big mobile screens. (it's also in black with white borders and looks visually more part of the page then the pop over). It also scrolls the back page to the link, so when you close the article now looks different then it did. At least when a link scrolls down to a footnote then back there's visual indication it did some scrolling. Here the scroll is obscured by the popup so it's very disorienting that it changes when you close the modal. (Again compounded by the fact everything looks the same colour and design) Conversely the preview links (?) suffer from being too different to each other - the top block on mobile (starting "Sidenotes/margin notes are a typographic convention..." has three links. The first tufte link pops up a decent text that has better typography then this source article. The second tufte link (that uses the same anchor text and looks like it goes to the same place!) shows an identical pop up style with totally different text, now in a tiny size with a screenshot of even tiny text to add to the confusion. Just in case you can squint to read it's all made slightly transparent so you can still read the 4x larger original article text underneath. There was an article on hacker news a couple of weeks ago where a guy was looking into the history of the Bloomfield bridge. I commented then that that article had some wonderful "footnotes", they just expanded inline you could read or not the extra info very easily. This is just an ugly and frustrating experience and certainly not anything that instills me with confidence in their articles advice.
- canadiantim 3y ago
  I did some sleuthing to look into the footnotes implementation done by that guy looking into history of the Bloomfield bridge. Here it is for anyone else who’s interested as well: https://www.stevans.org/inline-footnotes/ https://www.stevans.org/inline-footnotes/
  - extra88 3y ago
    Like pretty much all CSS interactivity hacks, those footnotes are not accessible; you can't operate them with a keyboard and screen readers only read the footnote number as a part of the text (even if the screen reader user guesses it's meant to be interactive, they can't click it).
mbwgh 3y ago
Since the article mentions the sidenotes package for LaTeX, I would like to mention the sidenotesplus and snotez packages as well. Both aim to improve over some perceived shortcomings of the original sidenotes package. The snotez-package is probably easier to use, while sidenotesplus has more batteries included.
wetpaws 3y ago
[dead]
red_admiral 3y ago
There's a maximum width that humans are comfortable with, reading paragraphs of text - usually measured in characters rather than inches though. Designers disagree on the precise limit, and how to count "characters" in variable-width fonts, but "don't go over 80" is a good start as a rule of thumb. That is why newspapers print in multiple columns, novels are printed on smaller page sizes than the usual Letter/A4 (depending on continent) and why the default margins for TeX' article and related classes are so large compared to your average word document. It's also why variations on `main {max-width: 800px; margin: 0 auto;}` are so common on the web (along with all kinds of multi-column layouts). If you're on a medium that's wider than this limit, then sidenotes are absolutely a good use of space - like a 1000+ pixel wide browser window, or physical textbooks (Crafting Interpreters, whose author gwern also mentions for their previous book on game design, is an especially good example of this). If your medium is a mobile device, then you don't have that much "side" to put the notes in, so you have to get creative another way (you also don't have the same "hover" semantics as on desktop). (End note: personal hobby horse of mine, but I hate "let's increase the width of our code from 80 to 120ish as everyone has widescreens now". Not only do I find a single file harder to read that way, but the main benefit of a wide screen for me is that I can have two panels open side by side at the time.)
- kqr 3y ago
  > If your medium is a mobile device, then you don't have that much "side" to put the notes in, so you have to get creative another way (you also don't have the same "hover" semantics as on desktop). When I designed my site (https://two-wrongs.com https://two-wrongs.com) I figured you don't have to get creative at all. A person reading on a small screen will likely want a more condensed text, with less of the semi-relevant asides.

120 points by 12_throw_away 3y ago

deleted 3y ago

[deleted]

I'm always endlessly mesmerized by this website's design. It also shows a glimpse of what document-heavy hyperlinked web could've been, and never became.

imjonse 3y ago
Since most of the hyperlinked web is not document-heavy today, as opposed to what it was 30 years ago, form followed function and we have distracting visuals and annoying UX over mostly shallow content :)
- troupo 3y ago
  Most of the web is still document-heavy, but yeah, it's mostly ads and annoying UX over a sea of nothingness

yoava 3y ago

looks like a really deep analysis of side notes in web design. Super interesting. However, I do not see a discussion of side notes and SEO (search engine optimization), and the implication of using this or that technique on SEO

gwern 3y ago
There are no SEO implications, AFAIK.
- yoava 3y ago
  it is not that simple. If you are using JS generated sidenotes, they are invisible for SEO engines.
  - gwern 3y ago
    As I understand it, any search engine whose SEO you care about will be loading web pages in a headless browser running JS these days, so depending on JS doesn't make something invisible. In any case, there is not much reason to use 'JS generated sidenotes', and I'm not sure any of the scores of examples I link do so. The sidenotes are part of the document, and get served with the rest of the document. (The ones which rely on JS are only doing so for presentation; the actual sidenotes continue to live in various span or div or aside elements that a search engine should have no problem understanding.) Unless you have some major counterexample, sidenotes/SEO seems like a non-issue to me which really is that simple: "no".

hennell 3y ago

This article would be a lot more persuasive if it's footnotes on mobile weren't a total mess of a system that's going in my bookmarks of bad design. Everything is in black with white borders so the layers of pop over is hard to distinguish from everything else. The close button is also only at the top which isn't immediately obvious to find when you've read the text and is hard to reach on big mobile screens. (it's also in black with white borders and looks visually more part of the page then the pop over). It also scrolls the back page to the link, so when you close the article now looks different then it did. At least when a link scrolls down to a footnote then back there's visual indication it did some scrolling. Here the scroll is obscured by the popup so it's very disorienting that it changes when you close the modal. (Again compounded by the fact everything looks the same colour and design) Conversely the preview links (?) suffer from being too different to each other - the top block on mobile (starting "Sidenotes/margin notes are a typographic convention..." has three links. The first tufte link pops up a decent text that has better typography then this source article. The second tufte link (that uses the same anchor text and looks like it goes to the same place!) shows an identical pop up style with totally different text, now in a tiny size with a screenshot of even tiny text to add to the confusion. Just in case you can squint to read it's all made slightly transparent so you can still read the 4x larger original article text underneath. There was an article on hacker news a couple of weeks ago where a guy was looking into the history of the Bloomfield bridge. I commented then that that article had some wonderful "footnotes", they just expanded inline you could read or not the extra info very easily. This is just an ugly and frustrating experience and certainly not anything that instills me with confidence in their articles advice.

canadiantim 3y ago
I did some sleuthing to look into the footnotes implementation done by that guy looking into history of the Bloomfield bridge. Here it is for anyone else who’s interested as well: https://www.stevans.org/inline-footnotes/ https://www.stevans.org/inline-footnotes/
- extra88 3y ago
  Like pretty much all CSS interactivity hacks, those footnotes are not accessible; you can't operate them with a keyboard and screen readers only read the footnote number as a part of the text (even if the screen reader user guesses it's meant to be interactive, they can't click it).

mbwgh 3y ago

Since the article mentions the sidenotes package for LaTeX, I would like to mention the sidenotesplus and snotez packages as well. Both aim to improve over some perceived shortcomings of the original sidenotes package. The snotez-package is probably easier to use, while sidenotesplus has more batteries included.

wetpaws 3y ago

[dead]

red_admiral 3y ago

There's a maximum width that humans are comfortable with, reading paragraphs of text - usually measured in characters rather than inches though. Designers disagree on the precise limit, and how to count "characters" in variable-width fonts, but "don't go over 80" is a good start as a rule of thumb. That is why newspapers print in multiple columns, novels are printed on smaller page sizes than the usual Letter/A4 (depending on continent) and why the default margins for TeX' article and related classes are so large compared to your average word document. It's also why variations on `main {max-width: 800px; margin: 0 auto;}` are so common on the web (along with all kinds of multi-column layouts). If you're on a medium that's wider than this limit, then sidenotes are absolutely a good use of space - like a 1000+ pixel wide browser window, or physical textbooks (Crafting Interpreters, whose author gwern also mentions for their previous book on game design, is an especially good example of this). If your medium is a mobile device, then you don't have that much "side" to put the notes in, so you have to get creative another way (you also don't have the same "hover" semantics as on desktop). (End note: personal hobby horse of mine, but I hate "let's increase the width of our code from 80 to 120ish as everyone has widescreens now". Not only do I find a single file harder to read that way, but the main benefit of a wide screen for me is that I can have two panels open side by side at the time.)

kqr 3y ago
> If your medium is a mobile device, then you don't have that much "side" to put the notes in, so you have to get creative another way (you also don't have the same "hover" semantics as on desktop). When I designed my site (https://two-wrongs.com https://two-wrongs.com) I figured you don't have to get creative at all. A person reading on a small screen will likely want a more condensed text, with less of the semi-relevant asides.