11 ms·
"Congratulations, here's your first set of glasses" - the present I got when I turned 50. While the site focuses on seniors, a lot of the suggestions are good
by chiph 9y ago
"Congratulations, here's your first set of glasses" - the present I got when I turned 50.
While the site focuses on seniors, a lot of the suggestions are good ones in any case - fonts larger than legalese and with good contrast will make your page more easily approachable and less likely to lose viewers who get frustrated because they can't read what you're trying to say.
- beaconstudios 9y agolarger click targets also help with users on touch devices. Apple recommends a minimum of 44x44px but around 30-35 upwards is usually fine.
- coldpie 9y agoThere's a limit, though. I end up browsing most modern websites at ~60% zoom, because the text is so huge I find it distracting. Luckily the browser zoom feature is pretty great these days, so users can view at any size they like.
- Swizec 9y agoThere's a limit, though. I end up browsing most modern websites at ~120% zoom when I'm tired, because it's more comfortable. Lay back in chair, still read comfortably. There's so much wasted whitespace it usually doesn't even break the layout. I'm 29 and my eyesight with glasses is ok. Been wearing 'em for 22 years. But really the worst offenders are gray text on lighter gray background websites. Whyyyy designers why?
- s_kilk 9y ago> Whyyyy designers why? Because A E S T H E T I C I've yet to see any designer articulate a reasonable defense of this shit.
- thatwebdude 9y agoThat's too often a "reason".
- ralusek 9y agoWait, aesthetic is not a valid reason for a designer to do something?
- s_kilk 9y agoNot if it results in piss-poor UX
- noir_lord 9y agoSince the browsers remember zoom level I just set it to be comfortable for whatever it is and forget all about it, I had to check what I have HN set to on my desktop and it's 190%. It's not that I can't read it at 100 it's just tiring and I have mild astigmatism so I get eye strain.
- Androider 9y agoThe HN default of tiny text is headache inducing. I have pretty good vision, but HN is one of the few sites where I have to crank it up to 150% zoom minimum. https://blog.attackthefront.io/your-body-text-is-too-small-5e02d36dc902 https://blog.attackthefront.io/your-body-text-is-too-small-5... makes a pretty compelling argument that 18px is the new minimum, and I think I'll be following this advice on any of my future sites.
- coldpie 9y agoIt's weird, I think HN's text size is perfect and view the site at 100%. I clicked through to your link and immediately scaled it down to 66% to make it readable.
- neogodless 9y agoI think that's why I still do so much more of my reading on a desktop than on a mobile device. Right-click, inspect. Uncheck font-color setting on article!
- adrianN 9y agoThe less a website changes when I turn on Reader Mode in Firefox, the more I like the website.
- giardini 9y agoBut Reader Mode is not always available. I've settled into using the menu option "View..Page Style...No Style" on noisy pages. Now I need a "No Style" browser that finds the beginning of the narrative automatically.
- a3n 9y agoOn Firefox that's "View ... Page Style ... No style." And I do that enough times per day (precious snowflake designers, take note) that I installed the Firefox addon "Disable Style button" which adds a red/white "CSS" stop sign button. https://addons.mozilla.org/en-US/firefox/addon/disable-style-button/?src=search https://addons.mozilla.org/en-US/firefox/addon/disable-style... Honestly, that one button fixes almost every UI/UX problem I encounter. I never use Reader Mode, I never open developer tools, I just nuke styles, read the site and move on.
- giardini 9y agoOoooh! Thanks for that one!
- leni536 9y agoI would bet those designers never try to read the text on the site, they just adjust the contrast until it "looks good" with Lorem ipsum.
- kuschku 9y agoThe problem is the contrast ratios. The contrast between 0% black and 100% white on a good screen is so high, it physically causes pain, even migraines. Which is why on HDR screens, the colors of CSS are actually limited to avoid ever going darker than grey or brighter than grey, and the contrast is still very large. #000000 on a cheap screen is equivalent to #666666 on an HDR screen, #ffffff on a cheap screen is equivalent to #aaaaaa on an HDR screen. So if a designer uses something that looks exactly like newspaper contrast to them, it’ll look unreadable on a cheap screen.
- twanvl 9y ago> The problem is the contrast ratios. The contrast between 0% black and 100% white on a good screen is so high, it physically causes pain, even migraines. Maybe that means you need to turn down your screen's brightness.
- kuschku 9y agoNo, that’d be exactly the wrong solution. Because then displaying color-calibrated content on your display (such as movies, games, photos) is also completely distorted. Instead, we need a way to specify CSS colors relative to a colorspace and contrast ratio.
- leni536 9y ago>CSS colors It's called sRGB and it supposedly has a "black point" which is not entirely black. Nobody uses it though, on photos it would be useless. Also for me black on white is perfectly fine in a well lit room. White on pitch black is indeed problematic. Anyway, it could be a user/browser preference instead of a designer preference. Lowering brightness shouldn't distort color-calibration too. You are supposed to match your brightness to the surrounding lighting too.
- fastball 9y agoYour eyesight with glasses is just "ok"?? How bad is your eyesight with corrective lenses?
- Swizec 9y agoAs alluded to, yes it's "ok". How good it is varies based on how tired I am. I like sites at 100% or less zoom in the morning, and often at 110% or more zoom towards the end of the day. Also depends on how far away my screen is. For example, I tend to put my phone screen very near my face in the evening. No such thing as perfect eyesight when you've been wearing glasses since you were 8 ;)
- kuschku 9y ago> But really the worst offenders are gray text on lighter gray background websites. Whyyyy designers why? Color calibration. On a good monitor, 10 or 12bit depth, 1000 to 10000nits of contrast, which designers tend to have, black text on white background has such a high contrast that it creates actual pain, and migraine. So they use dark grey on light grey instead, and then, for them, it looks exactly like newspaper text. A customer on a cheap, garbage monitor – maybe just 6bit of colors, 50nits of contrast – on the other hand, can’t even reach the contrast of a newspaper if they’d go full black on white contrast. The contrast between the darkest black and the brightest white on a cheap monitor is equivalent to the contrast ratio between 40% (approx #666666) and 60% grey (approx #aaaaaa) on a designer’s monitor.
- Swizec 9y agoYeah I know. I use the same monitors that designers use. Or at least used to a few years ago when Apple monitors were still The Thing To Have. Haven't upgraded in a while. You know what happens with those gorgeous monitors with perfect contrast and beautiful calibration when it's sunny outside and my blinds aren't down or I'm physically outside with my laptop? They turn flat black. Can't see shit. Also designers sometimes push the contrast thing too far. In both directions.
- Symbiote 9y agoSend the offending designers to http://contrastrebellion.com/ http://contrastrebellion.com/
- GrinningFool 9y agoHow does that help the situation?
- Symbiote 9y agoIt shows nice designs with good contrast.
- GrinningFool 9y agoActually, I misread what you'd written. I read it as "send offending designs to..." - like it was a 'name and shame' kind of site instead of the reasonably helpful resource that it is. My apologies.
- Pxtl 9y agoAbout half the devs in my team have their font rendering cranked up on their desktops, and they're all in their 20s, so it's not just old people who benefit from this.
- jdmichal 9y agoFirst change I make on any Windows box is to bump up the desktop rendering to 125% or 150%, depending on the monitor size and resolution. I also set a minimum font size in Firefox of 14.
- fastball 9y agoHonestly, I've worn glasses all my life, and it's never occurred to me that, when I'm not wearing my glasses, the websites are the one's at fault for not making themselves more readable. I think "web developers should make things more readable" is addressing the symptom and not the problem. The solution is simple when it comes to readability: wear corrective lenses.
- 5ilv3r 9y agoThat's a personal solution not a general solution. Make your font bigger (14 please), choose the font face for clear character distinction, and increase the contrast.
- my_first_acct 9y agoAs you get older, a few things happen. First, as your eyes lose the ability to focus (which is a gradual process, not a step change), you find that over time you need more and more lenses: one for objects at 18 inches (your laptop), one for objects at 24 inches (your monitor), etc. You don't always have the proper lenses at hand when you need them. Second, all the transparent bits of the eyes slowly become less transparent with time. Some problems (cataracts for instance) can be fixed with surgery; others would require replacing the entire eyeball. Third, a number of unlucky people develop problems with their retinas, which may or may not be fixable, and the fixes rarely leave the retina in as good a shape as it was when it was younger. So "wear corrective lenses" is not a bad suggestion, but if web designers are targeting older people, they need to assume the the reader's eyes are not what they once were, and that there may not be much that the reader can do about it.