Hacker News Reader

Comment by gjstein | Hacker News Reader

This gets shared on here from time to time and while I love it (and Tufte), it really falls short on mobile devices. When the page is sufficiently narrow, revealing sidebar items is done via small clickable elements: if the user has never seen those before, I expect they will miss out on them. Note that this includes both footnotes and also figure captions, which are often not "optional content" as are many of the sidenotes. My own blog / lab website [1] has a similar style, yet instead makes all sidebar elements visible even when the page is collapsed; fell free to emulate!

[1] https://cs.gmu.edu/~gjstein/2018/12/toward-real-world-alphaz...

View on HN

I just checked one of the best "online-first" technical books I can think of, "Crafting Interpreters" by Bob Nystrom, because it uses side notes heavily. What it does when the screen width is narrow (like on a phone) is move the side notes to the main flow, but in a smaller font size and separated with horizontal lines to set them off.

It does break up the flow a little bit (which is why they're side notes in the first place), but at least they're clear and obvious. And this book's side notes are often quirky and interesting -- definitely worth reading!

Example: https://craftinginterpreters.com/the-lox-language.html

I went to read the page and found them very intuitive. In fact, it took me longer to figure out what you meant by "sidebar elements". I think you meant "sidenote elements".

A very common idiom in long-form webpages is a clickable superscript to show a footnote-like item inline.

To improve usability for people less used to this sort of format I would underline it in blue like a link. I know it's not fashionable, but I think click targets should be styled as either links or buttons and this fits the concept of a link better.

You're completely right the target should be larger. The fix is to add a little padding.

> When the page is sufficiently narrow, revealing sidebar items is done via small clickable elements: if the user has never seen those before, I expect they will miss out on them.

Absolutely this!

Upon seeing sidenotes and before reading the article, my first instinct was to see how these elements would react in full v. narrow, and was immediately turned off with how information appeared to wholesale disappear.

Thanks for sharing your blog as a contrasting implementation...so clean and beautifully nuanced.

Yup, I found latex.css (https://latex.vercel.app/) has a better layout but worse typography so a hybrid is the best of both worlds.

That was the irritant I noticed. If I was to deploy this I'd de-Tufte the wee footnote numeral links a bit and make them more Webby, somehow. Otherwise it's a great-looking implementation.

> it really falls short on mobile devices

Tuft and his obsessives have always lived in a print-focused world; the digital equivalent only being the desktop computer.

Reply on news.ycombinator.com