5 ms·

My advice to bloggers: if your blog readability is improved by activating Reader mode, you have a styling bug to fix. Two universal improvements: 1. Bump up yo

My advice to bloggers: if your blog readability is improved by activating Reader mode, you have a styling bug to fix. Two universal improvements: 1. Bump up your font size. 2. Increase contrast.

nicbou 5y ago
3. Remove all the crap that isn't the article the user came for I don't use Reader mode for readability, but to remove all the clutter on the page.
- dredmorbius 5y ago
  It's not absolutely necessary to remove it, but when reading the article it should not be front-and-centre on the page. That means: - Single-column layouts. Sidebars suck. - No fixed-position elements. Especially not headers or footers, though fixed sidebars are also almost always a mistake. (There can be some benefit for reference / tools, but only about one time in a thousand that they're actually used.) On desktop, I disable all of these with either CSS (Stylish) or uMatrix element blocker. I've given up on any nuance here. If it's a choice of fixed header/footer or none at all, it's none at all. - A static set of nav or informational links above or below the main article text is acceptable. It's present, but doesn't interfere with the reading flow. - Put in a motherfucking scrollbar already.
  - omaranto 5y ago
    > - Put in a motherfucking scrollbar already. You mean you want two scrollbars? One from the web page and one from the browser window. That seems like an odd choice.
    - dredmorbius 5y ago
      Presently the fashion appears to be none. Worse: the scrollbars which do exist are indicator-only, they cannot be used to actually navigate on the page. On the four mobile devices I routinely have access to, none has an actual grabbable persistent scrollbar for navigation. https://ello.co/dredmorbius/post/0hgfswmoti3fi5zgftjecq https://ello.co/dredmorbius/post/0hgfswmoti3fi5zgftjecq https://news.ycombinator.com/item?id=21356511 https://news.ycombinator.com/item?id=21356511
      - paulcapewell 5y ago
        Amusingly, given this topic, when I clicked your ello link, I had to accept a cookie consent, ignore a request to 'join the creators network' (whatever that means), and the page itself has a floating header. Oh, and yes, on Chrome on Android I can see a tiny scrollbar when scrolling, but I can't interact with it.
        dredmorbius 5y ago
        You'll find that I no longer post to Ello due to numerous issues, including those rather annoying elements you describe. It's unfortunate as the platform was clean and does do some things well (Markdown and quite nice image display). It managed to kill off an active discussion community quite effectively however. With an effectiveness that strongly suggests intent. Believe me, it's annoying for me as well even to visit and link back my old content from there. More, if you can take the pain ;-) https://ello.co/dredmorbius/post/8yvblh2kk33or_oz5nvmhw https://ello.co/dredmorbius/post/8yvblh2kk33or_oz5nvmhw
  - nicbou 5y ago
    I'm curious to hear your thoughts about the layout on allaboutberlin.com. I built this website to be as pleasant as possible for the readers, but perhaps I've been staring at it for too long...
    - dredmorbius 5y ago
      Pretty good, at a glance.
    - UntitledNo4 5y ago
      Not the poster of the original comment, but I just visited your website (I live in Berlin), I found it very informative, pleasant and readable. Well done.
    - rhn_mk1 5y ago
      I'm following a similar philosophy as the parent (kill fixed elements, disable CSS in extreme cases), and your web page manages to look stylish and readble at the same time. The fixed side bar on the "visiting" page is barely enough to fit on the display, and when I shrink the window (or increase the text enough), bottom items get cut off without recourse. The banners on most pages are so big that I usually see only 1 line of an article, which is mildly annoying. Note: disabling JS is a required part of making the web readable for me, and that's how I perfomed the review.
      - nicbou 5y ago
        That sidebar was a late addition. It broke the layout on some older pages that don't follow the latest practices. This is one of them, and I'm currently rewriting it completely. The website should work exactly the same without JS (sans fancy parallax). However I'm curious about your screen resolution. The header is meant to leave plenty of text above the fold.
        rhn_mk1 5y ago
        I usually keep the window small, around 700-800px in height.
  - FabHK 5y ago
    > Especially not headers or footers What drives me insane: website with floating header and footer, and I read, then hit space to scroll down to the next "page", but it doesn't take into account what's hidden behind header and/or footer, so now I'm missing two lines, and have to grab mouse/arrow keys to scroll back up two lines. It just works and then you put in extra work to make it not work thank you very much arghhhhhh
  - Seirdy 5y ago
    I described a good set of similar practices for text/article-centric websites: https://seirdy.one/2020/11/23/website-best-practices.html https://seirdy.one/2020/11/23/website-best-practices.html I don't expect anyone to follow it 100%, but the gist is that the page layout shouldn't look too different from browser defaults or use advanced features.
  - dredmorbius 5y ago
    Erm, Stylus, not Stylish. Stylus is a useful CSS manager. Stylish is a piece of malware that spies on you.
ducttapecrown 5y ago
And add margins!
- reaperducer 5y ago
  A little line-height: 1.2em goes a long way, too.
bityard 5y ago
Honestly, I see way more blogs with a font size 20% to 50% bigger than what I consider readable. Pro-tip: if the text is so huge that only like 10 words can fit on a line in a non-maximized browser window, your font size is way too big. It's like they are formatted for reading by teleprompter or something.
- vanderZwan 5y ago
  Could it be that they're optimized for small screens and don't consider the desktop?

My advice to bloggers: if your blog readability is improved by activating Reader mode, you have a styling bug to fix. Two universal improvements: 1. Bump up your font size. 2. Increase contrast.

nicbou 5y ago

3. Remove all the crap that isn't the article the user came for I don't use Reader mode for readability, but to remove all the clutter on the page.

dredmorbius 5y ago
It's not absolutely necessary to remove it, but when reading the article it should not be front-and-centre on the page. That means: - Single-column layouts. Sidebars suck. - No fixed-position elements. Especially not headers or footers, though fixed sidebars are also almost always a mistake. (There can be some benefit for reference / tools, but only about one time in a thousand that they're actually used.) On desktop, I disable all of these with either CSS (Stylish) or uMatrix element blocker. I've given up on any nuance here. If it's a choice of fixed header/footer or none at all, it's none at all. - A static set of nav or informational links above or below the main article text is acceptable. It's present, but doesn't interfere with the reading flow. - Put in a motherfucking scrollbar already.
- omaranto 5y ago
  > - Put in a motherfucking scrollbar already. You mean you want two scrollbars? One from the web page and one from the browser window. That seems like an odd choice.
  - dredmorbius 5y ago
    Presently the fashion appears to be none. Worse: the scrollbars which do exist are indicator-only, they cannot be used to actually navigate on the page. On the four mobile devices I routinely have access to, none has an actual grabbable persistent scrollbar for navigation. https://ello.co/dredmorbius/post/0hgfswmoti3fi5zgftjecq https://ello.co/dredmorbius/post/0hgfswmoti3fi5zgftjecq https://news.ycombinator.com/item?id=21356511 https://news.ycombinator.com/item?id=21356511
    - paulcapewell 5y ago
      Amusingly, given this topic, when I clicked your ello link, I had to accept a cookie consent, ignore a request to 'join the creators network' (whatever that means), and the page itself has a floating header. Oh, and yes, on Chrome on Android I can see a tiny scrollbar when scrolling, but I can't interact with it.
      - dredmorbius 5y ago
        You'll find that I no longer post to Ello due to numerous issues, including those rather annoying elements you describe. It's unfortunate as the platform was clean and does do some things well (Markdown and quite nice image display). It managed to kill off an active discussion community quite effectively however. With an effectiveness that strongly suggests intent. Believe me, it's annoying for me as well even to visit and link back my old content from there. More, if you can take the pain ;-) https://ello.co/dredmorbius/post/8yvblh2kk33or_oz5nvmhw https://ello.co/dredmorbius/post/8yvblh2kk33or_oz5nvmhw
- nicbou 5y ago
  I'm curious to hear your thoughts about the layout on allaboutberlin.com. I built this website to be as pleasant as possible for the readers, but perhaps I've been staring at it for too long...
  - dredmorbius 5y ago
    Pretty good, at a glance.
  - UntitledNo4 5y ago
    Not the poster of the original comment, but I just visited your website (I live in Berlin), I found it very informative, pleasant and readable. Well done.
  - rhn_mk1 5y ago
    I'm following a similar philosophy as the parent (kill fixed elements, disable CSS in extreme cases), and your web page manages to look stylish and readble at the same time. The fixed side bar on the "visiting" page is barely enough to fit on the display, and when I shrink the window (or increase the text enough), bottom items get cut off without recourse. The banners on most pages are so big that I usually see only 1 line of an article, which is mildly annoying. Note: disabling JS is a required part of making the web readable for me, and that's how I perfomed the review.
    - nicbou 5y ago
      That sidebar was a late addition. It broke the layout on some older pages that don't follow the latest practices. This is one of them, and I'm currently rewriting it completely. The website should work exactly the same without JS (sans fancy parallax). However I'm curious about your screen resolution. The header is meant to leave plenty of text above the fold.
      - rhn_mk1 5y ago
        I usually keep the window small, around 700-800px in height.
- FabHK 5y ago
  > Especially not headers or footers What drives me insane: website with floating header and footer, and I read, then hit space to scroll down to the next "page", but it doesn't take into account what's hidden behind header and/or footer, so now I'm missing two lines, and have to grab mouse/arrow keys to scroll back up two lines. It just works and then you put in extra work to make it not work thank you very much arghhhhhh
- Seirdy 5y ago
  I described a good set of similar practices for text/article-centric websites: https://seirdy.one/2020/11/23/website-best-practices.html https://seirdy.one/2020/11/23/website-best-practices.html I don't expect anyone to follow it 100%, but the gist is that the page layout shouldn't look too different from browser defaults or use advanced features.
- dredmorbius 5y ago
  Erm, Stylus, not Stylish. Stylus is a useful CSS manager. Stylish is a piece of malware that spies on you.

ducttapecrown 5y ago

And add margins!

reaperducer 5y ago
A little line-height: 1.2em goes a long way, too.

bityard 5y ago

Honestly, I see way more blogs with a font size 20% to 50% bigger than what I consider readable. Pro-tip: if the text is so huge that only like 10 words can fit on a line in a non-maximized browser window, your font size is way too big. It's like they are formatted for reading by teleprompter or something.

vanderZwan 5y ago
Could it be that they're optimized for small screens and don't consider the desktop?