4 ms·

This website is completely unreadable on an ultrawide monitor, it seems to make the font size dependent on the window's width, which makes it absolutely massive

by pta2002 2y ago

This website is completely unreadable on an ultrawide monitor, it seems to make the font size dependent on the window's width, which makes it absolutely massive (I can maybe fit half a paragraph on the screen?), and the browser zoom does not seem to change the font size because of it...

DrScientist 2y ago
Ironic
alt227 2y ago
> the browser zoom does not seem to change the font size because of it This is one of the worst cases of this I have seen. It is literally unreadable for me. Normally I can use browser zoom to sort it out, but this beauty even defeats that workaround.
- rmarques7 2y ago
  The irony of this happening on an article talking about bad design...
  - deleted 2y ago
    [deleted]
  - hgomersall 2y ago
    It's not ironic; it just demonstrates that design is hard to get right.
    - kmoser 2y ago
      It's not hard to design a web page that's 95% text and which lets the user adjust the font size via the browser's zoom controls.
- tapland 2y ago
  Yup, but while making the window smaller to write this I noticed I can make it a small window, about the size of my phone, to get text that is reasonable. The site, giving UI advice, is written assuming your display is always ~7" ?
  - alt227 2y ago
    I thought that the site must be designed for mainly mobile, so I switched mobile mode on in the dev tools in firefox. However then there is some menu header text overlapping the main body. It seems the design of this site is very much style over function.
    - Traubenfuchs 2y ago
      Text on safari mobile is too small for my bad eyes and increasing font size does… not increase font size.
SirMittens 2y ago
One solution you could use to get around this weird design decision, is to use the reader mode in Firefox (I'm not sure what is the alternative for other browsers).
- alt227 2y ago
  This worked for me, thanks :)
- pjc50 2y ago
  "Reader mode" is the ultimate weapon against designer unreadability. It feels like it should have ADA-mandate level importance.
Brajeshwar 2y ago
Someone while designing for the mobile, forgot about desktops. ``` :root { font-size: calc(1vw + 1vh + .5vmin); } html { max-width: 100%; } body { color: #444; font-family: "Vollkorn", georgia, serif; margin: 0 auto; max-width: 100%; } ``` They can remove the width on the HTML and replace the body's `max-width: 100%` with something like; ``` width: 100%; max-width: 1200px; ```
zo1 2y ago
All they have to do is remove "p {max-width: 28rem;}" and the website becomes beautiful. The text fills the entire width of the screen, and the font scales with the screen size (though they should dial it back a bit, or have a different scaling ramp). It's like reading an actual document, and how the web should be. Bonus points, it's ridiculously "responsive" for small screen sizes. Yes, I know they got it kinda "wrong", but they're arguably going in the right direction here. I'd give the author points for trying something out of the box, and also for "sticking it" to the monstrosity that Bootstrap started many years ago.
- pjc50 2y ago
  > the font scales with the screen size The font somehow re-scales if you zoom the web page, at least with mousewheel zoom on a desktop browser. Instant accessibility failure. I've also never seen this before and couldn't work out how it had been achieved?

DrScientist 2y ago

Ironic

alt227 2y ago

> the browser zoom does not seem to change the font size because of it This is one of the worst cases of this I have seen. It is literally unreadable for me. Normally I can use browser zoom to sort it out, but this beauty even defeats that workaround.

rmarques7 2y ago
The irony of this happening on an article talking about bad design...
- deleted 2y ago
  [deleted]
- hgomersall 2y ago
  It's not ironic; it just demonstrates that design is hard to get right.
  - kmoser 2y ago
    It's not hard to design a web page that's 95% text and which lets the user adjust the font size via the browser's zoom controls.
tapland 2y ago
Yup, but while making the window smaller to write this I noticed I can make it a small window, about the size of my phone, to get text that is reasonable. The site, giving UI advice, is written assuming your display is always ~7" ?
- alt227 2y ago
  I thought that the site must be designed for mainly mobile, so I switched mobile mode on in the dev tools in firefox. However then there is some menu header text overlapping the main body. It seems the design of this site is very much style over function.
  - Traubenfuchs 2y ago
    Text on safari mobile is too small for my bad eyes and increasing font size does… not increase font size.

SirMittens 2y ago

One solution you could use to get around this weird design decision, is to use the reader mode in Firefox (I'm not sure what is the alternative for other browsers).

alt227 2y ago
This worked for me, thanks :)
pjc50 2y ago
"Reader mode" is the ultimate weapon against designer unreadability. It feels like it should have ADA-mandate level importance.

Brajeshwar 2y ago

Someone while designing for the mobile, forgot about desktops. ``` :root { font-size: calc(1vw + 1vh + .5vmin); } html { max-width: 100%; } body { color: #444; font-family: "Vollkorn", georgia, serif; margin: 0 auto; max-width: 100%; } ``` They can remove the width on the HTML and replace the body's `max-width: 100%` with something like; ``` width: 100%; max-width: 1200px; ```

zo1 2y ago

All they have to do is remove "p {max-width: 28rem;}" and the website becomes beautiful. The text fills the entire width of the screen, and the font scales with the screen size (though they should dial it back a bit, or have a different scaling ramp). It's like reading an actual document, and how the web should be. Bonus points, it's ridiculously "responsive" for small screen sizes. Yes, I know they got it kinda "wrong", but they're arguably going in the right direction here. I'd give the author points for trying something out of the box, and also for "sticking it" to the monstrosity that Bootstrap started many years ago.

pjc50 2y ago
> the font scales with the screen size The font somehow re-scales if you zoom the web page, at least with mousewheel zoom on a desktop browser. Instant accessibility failure. I've also never seen this before and couldn't work out how it had been achieved?