And using an inner scrolling area for the content instead of the document scrolling area is very problematic for keyboard users, unless you focus the true scrollable pane on load, and ensure that any time the body becomes the active element, you change it back to the scrollable pane. This is fiddly to get right, and requires JavaScript; I should finish the blog post I started writing on the topic. I made sure we got it as right as possible for Fastmail’s webmail, but I don’t think I’ve ever encountered any other site using an inner scrolling area even trying to get it right.
As it is, keyboard users will have to press Tab seven times before the keyboard navigation keys (arrows, Space, Shift+Space, Page Up, Page Down, Home, End) work.
For this reason, I strongly recommend that websites (as distinct from web apps) avoid placing article content within a new scrolling area. Use the document scroll area.
Yes, I see that too much too, although in this case I just disabled CSS. (In other cases, I sometimes click with the mouse on the area I want to scroll and then use the arrows and page up and page down keys to scroll.)
> For this reason, I strongly recommend that websites (as distinct from web apps) avoid placing article content within a new scrolling area. Use the document scroll area.
I spent a couple of minutes staring at it, unsure if I liked it or not. I concluded that the retro styling is kinda cool, but they make me expect a text adventure or puzzle. Nice for a change. :)
This complaint is kind of a trope on Hacker News now -- which isn't to say that there aren't still sites using tiny gray fonts on light gray backgrounds, but off the top of my head I can't think of any sites that launched or were redesigned within the last... five or six years now, at least, that still follow that particular trend. Medium, for both better and worse, has led an awful lot of design since it exploded onto the scene, and as far as I know it's always had bigger-than-default body text that's near-black on a pure white background. WordPress's default theme going back at least to 2016 is the same way; ditto for Ghost; ditto for virtually every theme from Squarespace.
Again, I'm sure there are lots of sites still out there like this, but I just don't see them very often. My eyesight isn't top-notch anymore, but the only site that I routinely visit that I have to have set on a higher-than-default zoom to be able to read is (ahem) Hacker News, because it uses tiny black fonts on light gray backgrounds. (Except for the places it uses, uh, tiny gray fonts on light gray backgrounds.)
> the only site that I routinely visit that I have to have set on a higher-than-default zoom to be able to read is (ahem) Hacker News, because it uses tiny black fonts on light gray backgrounds. (Except for the places it uses, uh, tiny gray fonts on light gray backgrounds.)
Your whole comment is spot on, but this is particular funny because I pointed it out to someone the other day and instead of scrolling up to see for himself he just...chose not to believe it. [1]
SendGrid's website is entirely unusable without zooming; often the fonts render as less than a pixel wide at normal zoom. Combined with light gray on white color scheme it makes the site a headache to use.
More amusing was the advertised blogpost last time I logged in that said using a dark theme for your email promotions was modern and would attract more interaction.
Their front page doesn't look that bad to me, but as I poke through other pages, there's definitely a lot of text at "usually reserved for legal disclaimers" font size, isn't there?
I don't use Sendgrid, so I don't know what their admin panel is like. I recall that some of the worst remaining offenders in the "gray text on gray background" category are SaaS dashboards...
I prefer to just avoid CSS as much as possible. That way, it uses the user's settings in their browser in order to make it readable according to the user's preferences.
That's a laudable attitude in general. Problem is, most users are not aware that these preferences exist, nor do they care. Most usecases are covered by Ctrl+Mousewheel.