8 ms·

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

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).
  - rijoja 3y ago
    What's the best way to handle footnotes, from a accessibility point of view?
    - extra88 3y ago
      I don't know of a better option than what a number of blogs, like Daring Fireball [0] do, link the footnote number to to the footnote, end each footnote with a link back to the footnote number (typically using the ↩ character). Kitty Giraudel wrote about a version that's a bit "extra." [1] They make a whole word or phrase the footnote link text but style automatically inserted CSS counters so only numbers have the appearance of a link. Plus, each link has a description, "Footnote," to make it more clear to screen reader users where it goes. [0] https://daringfireball.net/2023/08/whats_the_deal_with_sensor_tower#fn3-2023-08-05 https://daringfireball.net/2023/08/whats_the_deal_with_senso... [1] https://www.sitepoint.com/accessible-footnotes-css/ https://www.sitepoint.com/accessible-footnotes-css/
      - rijoja 3y ago
        Interesting, thank you very much!
rijoja 3y ago
If an "ad hominem" is what you call it when someone criticizes a person instead of their argument, what do you call it when you criticize someone's webpage instead of it's content? I don't think the author's goal here is to persuade anybody of anything, but rather to inform people of design options, which I am very grateful for. Personally I also find the website to have a fantastic design, and that a source of inspiration in terms of design.
- brigandish 3y ago
  Argument ad paginum (paginum being page) or perhaps argument ad opus (opus being work or labour) ?
  - rijoja 3y ago
    Ah didn't expect an answer to that, but thank you, that is very interesting!
- threatofrain 3y ago
  I think both sides simultaneously have a leg to stand on. In terms of self-conduct, I try to skip past the noise and go for what I think is informative, and if complaining about a dentist's teeth is not informative then I skip past it. In this case I think there's more than enough value to skip past all the noisy complaints. At the same time I understand there is a part of how human judgment works that cannot help but develop a story on why the dentist has bad teeth, and thus it is an informal burden on a proponent to also be an exemplar of what they say.
  - rijoja 3y ago
    That's a really good point, and I agree with you fully. What I do not agree with and am not sure if you agree with either, is that the dentist has bad teeth to begin with. Furthermore if you where to say that 1+1=2, isn't in fact 2 because a dentist with bad teeth said it was then you are simply plain wrong. Personally I find gwern to produce exemplary content*, and on a page that is really well designed. Which very much might be a matter of taste obviously, but this is very much the type of taste that makes me visit HN frequently, both in terms of aesthetics and content. I would highly recommend anyone reading this, to have a look at the rest of the content on gwern's webpage.
gwern 3y ago
(I am the website author & tech co-creator with Said Achmiz.) > Everything is in black with white borders so the layers of pop over is hard to distinguish from everything else. They have double-white borders and drop shadows. It looks reasonably distinguished to me, but I suppose we could try one of the very light grays to see if that helps. > 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. ...Where else would the 'X' close button be? > it's also in black with white borders and looks visually more part of the page then the pop over The 'X' is right next to the title, it definitely does not look like it's 'more part of the page than the pop over'. > It also scrolls the back page to the link, so when you close the article now looks different then it did. If it didn't do that, then the anchor & context for the pop-over wouldn't be visible or the pop-over would have to be absurdly small whenever the tapped-link wasn't at the top of the screen already. So the shifting-to-top is good. I think you're right that it should restore the position. It was originally a pop-in, so that didn't come up before we recently swapped to pop-over. > that uses the same anchor text and looks like it goes to the same place! I'll modify the text to be clearer. > 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. That is not how it's supposed to look, and doesn't on other pages - just here. Amusingly, it's caused by an interaction between the .sidenote class, and the page URL being 'sidenote'. (Nor is this the first time! JS and web browsers, man.) If you had tried it on any other page, like the section links of the abstract in my most recent page, https://gwern.net/suzanne-delage https://gwern.net/suzanne-delage , it would've been fine. We've pushed a fix. > I commented then that that article had some wonderful "footnotes", they just expanded inline you could read or not the extra info very easily. It's a good essay (https://tylervigen.com/the-mystery-of-the-bloomfield-bridge https://tylervigen.com/the-mystery-of-the-bloomfield-bridge) but the footnotes are not the highlight of that page. - The zebra-stripe blockquote styling is annoying and makes them hard to read with visual moire (but can be fixed). - The fact that you have to opt into them with no indication of whether they are worth reading means cognitive burden (and while some are quite lengthy and worth reading, many are not). The author alleviates this a bit by sometimes specifying 'long note', but that increases the authoring burden, and doesn't solve the problem much (short notes can be interesting too). - 'Note' for each anchor is verbose & repetitive. - The footnotes are not aggregated at the end, so you can't skim or check them en masse. (And did you think you could just read or search the HTML source? Not without additional processing or word-wrap options to fix the ultra-long lines.) - The lack of a real hover popup is made up for with the hack of using tooltips - an idea I tried and abandoned very early on, because it strips formatting & cannot be made interactive or accessible; in his case, his tooltips are actually worse than useless because they silently, without indication, strip out large parts. For example, one tooltip at least bails out and tells you to click on it to see the email he sent, so at least you know you're losing everything, but then a later one ("The feds would pay up to 90% of the costs") silently drops an entire chunk! - The tooltips + default collapse also means that they aren't searchable: C-f 'pro-rata' will turn up nothing, because it's hidden in a footnote. (This is solved by aggregating or display by default; if one chooses not to do that, one should do something - for example, detect the search event, uncollapse all of them to make them visible for search, and then recollapse.) I can't fault it on some issues like mobile handling or multiple+large footnote handling, but that's only because it avoids the problem of desktop sidenotes entirely, and is just the mobile version. (Which is why I didn't bother to link it: it doesn't do anything better than the examples already on the page, although now that I've looked closer, it may be worth linking as an example of the problems with trying to stuff footnotes or annotations into tooltips.) You like it because you don't want desktop footnotes at all, apparently, not because it represents a good solution.

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).
- rijoja 3y ago
  What's the best way to handle footnotes, from a accessibility point of view?
  - extra88 3y ago
    I don't know of a better option than what a number of blogs, like Daring Fireball [0] do, link the footnote number to to the footnote, end each footnote with a link back to the footnote number (typically using the ↩ character). Kitty Giraudel wrote about a version that's a bit "extra." [1] They make a whole word or phrase the footnote link text but style automatically inserted CSS counters so only numbers have the appearance of a link. Plus, each link has a description, "Footnote," to make it more clear to screen reader users where it goes. [0] https://daringfireball.net/2023/08/whats_the_deal_with_sensor_tower#fn3-2023-08-05 https://daringfireball.net/2023/08/whats_the_deal_with_senso... [1] https://www.sitepoint.com/accessible-footnotes-css/ https://www.sitepoint.com/accessible-footnotes-css/
    - rijoja 3y ago
      Interesting, thank you very much!

rijoja 3y ago

If an "ad hominem" is what you call it when someone criticizes a person instead of their argument, what do you call it when you criticize someone's webpage instead of it's content? I don't think the author's goal here is to persuade anybody of anything, but rather to inform people of design options, which I am very grateful for. Personally I also find the website to have a fantastic design, and that a source of inspiration in terms of design.

brigandish 3y ago
Argument ad paginum (paginum being page) or perhaps argument ad opus (opus being work or labour) ?
- rijoja 3y ago
  Ah didn't expect an answer to that, but thank you, that is very interesting!
threatofrain 3y ago
I think both sides simultaneously have a leg to stand on. In terms of self-conduct, I try to skip past the noise and go for what I think is informative, and if complaining about a dentist's teeth is not informative then I skip past it. In this case I think there's more than enough value to skip past all the noisy complaints. At the same time I understand there is a part of how human judgment works that cannot help but develop a story on why the dentist has bad teeth, and thus it is an informal burden on a proponent to also be an exemplar of what they say.
- rijoja 3y ago
  That's a really good point, and I agree with you fully. What I do not agree with and am not sure if you agree with either, is that the dentist has bad teeth to begin with. Furthermore if you where to say that 1+1=2, isn't in fact 2 because a dentist with bad teeth said it was then you are simply plain wrong. Personally I find gwern to produce exemplary content*, and on a page that is really well designed. Which very much might be a matter of taste obviously, but this is very much the type of taste that makes me visit HN frequently, both in terms of aesthetics and content. I would highly recommend anyone reading this, to have a look at the rest of the content on gwern's webpage.

gwern 3y ago

(I am the website author & tech co-creator with Said Achmiz.) > Everything is in black with white borders so the layers of pop over is hard to distinguish from everything else. They have double-white borders and drop shadows. It looks reasonably distinguished to me, but I suppose we could try one of the very light grays to see if that helps. > 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. ...Where else would the 'X' close button be? > it's also in black with white borders and looks visually more part of the page then the pop over The 'X' is right next to the title, it definitely does not look like it's 'more part of the page than the pop over'. > It also scrolls the back page to the link, so when you close the article now looks different then it did. If it didn't do that, then the anchor & context for the pop-over wouldn't be visible or the pop-over would have to be absurdly small whenever the tapped-link wasn't at the top of the screen already. So the shifting-to-top is good. I think you're right that it should restore the position. It was originally a pop-in, so that didn't come up before we recently swapped to pop-over. > that uses the same anchor text and looks like it goes to the same place! I'll modify the text to be clearer. > 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. That is not how it's supposed to look, and doesn't on other pages - just here. Amusingly, it's caused by an interaction between the .sidenote class, and the page URL being 'sidenote'. (Nor is this the first time! JS and web browsers, man.) If you had tried it on any other page, like the section links of the abstract in my most recent page, https://gwern.net/suzanne-delage https://gwern.net/suzanne-delage , it would've been fine. We've pushed a fix. > I commented then that that article had some wonderful "footnotes", they just expanded inline you could read or not the extra info very easily. It's a good essay (https://tylervigen.com/the-mystery-of-the-bloomfield-bridge https://tylervigen.com/the-mystery-of-the-bloomfield-bridge) but the footnotes are not the highlight of that page. - The zebra-stripe blockquote styling is annoying and makes them hard to read with visual moire (but can be fixed). - The fact that you have to opt into them with no indication of whether they are worth reading means cognitive burden (and while some are quite lengthy and worth reading, many are not). The author alleviates this a bit by sometimes specifying 'long note', but that increases the authoring burden, and doesn't solve the problem much (short notes can be interesting too). - 'Note' for each anchor is verbose & repetitive. - The footnotes are not aggregated at the end, so you can't skim or check them en masse. (And did you think you could just read or search the HTML source? Not without additional processing or word-wrap options to fix the ultra-long lines.) - The lack of a real hover popup is made up for with the hack of using tooltips - an idea I tried and abandoned very early on, because it strips formatting & cannot be made interactive or accessible; in his case, his tooltips are actually worse than useless because they silently, without indication, strip out large parts. For example, one tooltip at least bails out and tells you to click on it to see the email he sent, so at least you know you're losing everything, but then a later one ("The feds would pay up to 90% of the costs") silently drops an entire chunk! - The tooltips + default collapse also means that they aren't searchable: C-f 'pro-rata' will turn up nothing, because it's hidden in a footnote. (This is solved by aggregating or display by default; if one chooses not to do that, one should do something - for example, detect the search event, uncollapse all of them to make them visible for search, and then recollapse.) I can't fault it on some issues like mobile handling or multiple+large footnote handling, but that's only because it avoids the problem of desktop sidenotes entirely, and is just the mobile version. (Which is why I didn't bother to link it: it doesn't do anything better than the examples already on the page, although now that I've looked closer, it may be worth linking as an example of the problems with trying to stuff footnotes or annotations into tooltips.) You like it because you don't want desktop footnotes at all, apparently, not because it represents a good solution.