I have a theory as to one of the leading causes of this blight - screens on Macbooks show text in a way that gives more contrast than screens on most devices. Other devices vary obviously, but Apple tends to be quite far at one end of the spectrum (to my eye).
Designers obviously love their Macs, and while using them produce a design that is at the borderline of what's ok on their screen and then is unusable on lots of others.
I have a big, bright, high contrast monitor and good eyesight (in theory the best case), but it's connected to a Windows PC and various websites render as hard to read. At least I'm savvy and so can use StyleBot to fix the worst offenders!
Every designer should be aware of the difference between what they see on their monitor and how their final product will appear.
In college, I helped design part of my student newspaper. Images that looked beautiful and had perfect contrast levels rarely survived the shitty printer that darkened everything.
It's weird to think about, but designers should never put all their trust in what's on their screen.
This is obvious when your Macbook'd up designers demo something on a crappy projector, without having tested it there first. Entire areas of the design just... disappear.
Inside scoop from a creative director: Designers aren't toning down contrast to reduce eyestrain or to avoid black. It's an attempt (really a hack) to simplify a busy page / UI. They are telling you it's too much content on the screen at one time.
If you aren't empowered to trim the content, you can at least tone the type down in contrast & size to make it appear to be less. Every time I see subtle grey text on a marketing page, I can hear the designer thinking, "no one is really going to read this anyway."
Just like in speaking, my advice is to make your words bold but few.
Do you think this may be related to the rise of javascript and heavy front end, client-side frameworks?
To be clear, this is something I'm mulling over, not a hard conclusion, but here it goes...
Creating a simple, server rendered, text based web site may be exactly what the users need, but from a developer's point of view, it can also be a career risk. A rapidly increasing percentage of development jobs out there now require experience with a front-end framework. As a result, developers need this experience, so they start adding front end frameworks in order to 1) gain that experience, and 2) document that experience in a real world project. Remember, a project isn't just a project, it's an audition for your next project. This is how tech recruiting works[1]. So developers may be adding new bells and whistles that are not only unnecessary[2], but actively harmful to their current project, largely because they are necessary to their resume, and it's actively harmful not to have them there.
In short, one of the reasons the web is becoming unreadable is that web developers can't create the resume they'll need for their next gig by using the best tech for their current one.
[1] I'm getting long in the tooth enough to have seen this a few times. Companies required "EJB", it wasn't enough to have experience with Tomcat and standard Java. Later, Spring, Struts, Hibernate, iBatis were required. These days, it's ember, react, and other rapidly evolving JS frameworks.
[2] I want to be clear that I think many of these frameworks are actually pretty excellent, for projects that need them. The problem is, if your current project doesn't, you still have a strong incentive to bring them in.
I feel like there's a deep-rooted tension and aggression in the web space that is caused by the evolution of the web to an application platform.
I think we are increasingly needing a stronger separation between functionality oriented applications that operate in the browser vs media-based content (documents/videos/images/articles).
The web has become an unnecessary-hostile platform for web applications because you are standing on a thin layer of glass the whole time because you have to juggle so many combinations of environments and browsers and capabilities and devices and screen sizes and internet speeds and everything in between.
For example there's an insane amount of baggage involved today in deploying a decent production web application in terms of bundling the assets caching vendor prefixing feature detection and so on..
So much of that could go away if we had a more application-focused platform on the web.
So someone could say you want a web-based customer service desk application? Here install this 30MB bundle once and let us focus on everything else. It's not a big ask.
Instead we have a mindfuck of "minifying" "vendor prefixing" "css autopefix" "css sprite" "code splitting" "tree shaking" "___ javascript library that is only 4 kilo bytes!" "hash based cache busting strategy" "feature detection" and so on.
It just adds unnecessary complexity and baggage.
As a long-time web dev I'd like to see the web platform for applications evolve into a more friendly and predictable environment for the developers more similar to the mobile app platform.
Ok, many developers, especially at the beginning of their careers, do like to introduce new things into the projects when they believe those things could advance their careers or even simply sound cool to talk to the peers about. But this is not the reason for the unreadable web.
I think the reason is simpler, more like fashion: most people who are in a position to play with fonts and colors have absolutely no idea what they are doing and make decisions by copying somebody else who they perceive as cool, and there is always pressure to make it look cool, so it spreads.
Although this isn't directly related to the article, I can't upvote this enough.
To be clear, the article is almost solely about contrast between text and background colors, not JS heavy frontends. But I think what you've stated is very true and is also my opinion about the current state of web frontend.
Like another user said here, the contrast is a result of designers working with a page with too much content, and trying to reduce the feeling of content overwhelm. I don't think heavy JS frontend is directly related to that. But what you've said should not be discounted.
"My plea to designers and software engineers: Ignore the fads and go back to the typographic principles of print — keep your type black, and vary weight and font instead of grayness. You’ll be making things better for people who read on smaller, dimmer screens, even if their eyes aren’t aging like mine. It may not be trendy, but it’s time to consider who is being left out by the web’s aesthetic."
A plea like, "it’s time to consider who is being left out by the web’s aesthetic," is likely sending the wrong message. Some designers are going to interpret that as a plea to make websites accessible at the cost of aesthetics, and solidify their own stance. It would probably be better to present how accessible designs can improve their designs.
> Ignore the fads and go back to the typographic principles of print
IMO ever since we were rescued from the old-school print designers & design-challenged developers of the Early Web (up to ~2005-07) by the new wave of digital-first designers, web design's done nothing but get worse.
People keep asking why Firefox is losing market share to Chrome and how to reverse it.
The answer to the first question is simple: it doesn't do anything Chrome doesn't, so there's no particular reason to use it unless you care about maintaining competition among browsers.
The answer to the second question is also simple: start acting in the interest of the user! Get rid of the annoying sticky headers. Increase the contrast when it's too low. Increase the font size when it's too small. Word wrap when stuff is going to go off the edge of the page. Narrow the display width when text is too wide.
Yes, I know you can do all of the above with various tools. I've started using the kill-sticky tool in Chrome. But that's not as good as having the browser do it proactively for you. There's a lot of low-hanging fruit there that would be vastly easier then trying to crank another zillionth of a percent out of JavaScript benchmarks. All it takes is the will to do it.
I think that Firefox lost most of that market share mainly because Google is pushing chrome really hard on Google Search... They ask you to install it at every corner. But if they would care about privacy, they would still avoid it.
It's a cool idea! It could be a community-styled web experience, with the best user-style automatically applied and a button to easily return to plain mode. The "value" of an user-style could be treated as a multi-armed bandit problem, minimizing the number of return to plain mode.
Can't tell if this piece is genuine or not; ads taking up most of the space on the screen to the left and right; ads every 5 paragraphs; a video ad; constant moving of the article text as ads load.. ads popping in and out as I scroll... at least it's a great showcase of an unreadable article.
And laughably the grey quote text that is intertwined throughout the article which is as illegible as the contrast that the author suggests of other applications.
For me it's well organized, as a single column of text breaking for occasional graphics. I saw no popup ads or modal screens at all. Standard mobile Safari here... maybe this illustrates the growing divide between desktop and mobile web design?
For those complaining about the appearance of the article: it looks like the original link [1] now redirects to the wired.com version but used to redirect to medium.com [2], at least that's what happens when I enter it into archive.org. Also, previous discussion [3].
Brightness contrast is important, but so is color contrast. As readers of early WiReD magazine (ca. 1998) well know, reading orange text on a yellow background is just as painful as light gray on medium gray.
The same goes for font size. Due to the range of device sizes and display dot densities, small fonts can easily become unreadable. Mobile versions of web sites helps only so much. I find at least half of Apple's system menus to be unreadably small on my iMac 5K monitor and my Macbook retina. This illegibility needs to be user-fixable in a systematic way, and ASAP. Just telling the user, "Use an Accessibility service", is NOT the right response.
Maybe it's a case of self-describing expression. The form of the expression follows the point it's trying to make. Like when you try to explain the concept of redundancy by saying that it means repeating the same thing needlessly or by making several statements that mean the same thing. Or when you describe something by using words that sound like that thing. I'm sure it has proper name.
Unless they practice what they preach, anything from Wired (or any modern bloated "news" site for that matter) whining about this can be discarded. I don't even know why they publish this hypocritical crap.
"changed its text from legible to illegible. Text that was once crisp and dark was suddenly lightened to a pallid gray." - and Wired published it in... grey!
One thing that should go away from web and desktop software is the association with paper. Once we get rid of that damn white background on by default we can use softer foreground colors.
It may not look 2017, or even 2005, but who effing cares! I could stand in front of it for hours, as I do with my dark desktop, while anything resembling a white page hurts my eyes.
I'm aware that printing could be a valid argument against (dark background==huge toner/ink waste), so when printing make the theme change on the fly in a way that colors being too close in their component values won't be used as FG versus BG or highlighted FG versus FG.
Why not add a11y testing to your company's test suite? Tools already exist for automated testing of things like color contrast and WAI-ARIA elements.
If your company supported basic a11y then you would have an argument to use against designers that like low contrast text. It might also be a chance to educate them on WAI standards if they don't use them for their work yet.
Just like fashion, good designs will keep coming back, so in a few years the readability will be important again. The exec's at Google probably wanted the site to get a more modern look, and it does look more modern and nicer, but the old design had a more "robust" feel. I wonder if you buy Googe IaaS, are you looking for robustness or modernity ?
Modernity changes, and this article is part of a movement to change it. With luck soon modernity will involve text that is a different colour from the background.
I expected this article to be about the ad density on modern news websites. Considering the article itself is upwards of 50% ads, I guess it's not but I'm not willing to stay around long enough to find out.
[+] [-] rkangel|8 years ago|reply
Designers obviously love their Macs, and while using them produce a design that is at the borderline of what's ok on their screen and then is unusable on lots of others.
I have a big, bright, high contrast monitor and good eyesight (in theory the best case), but it's connected to a Windows PC and various websites render as hard to read. At least I'm savvy and so can use StyleBot to fix the worst offenders!
[+] [-] apozem|8 years ago|reply
In college, I helped design part of my student newspaper. Images that looked beautiful and had perfect contrast levels rarely survived the shitty printer that darkened everything.
It's weird to think about, but designers should never put all their trust in what's on their screen.
[+] [-] 5ilv3r|8 years ago|reply
[+] [-] ashark|8 years ago|reply
[+] [-] mmagin|8 years ago|reply
[+] [-] toddmorey|8 years ago|reply
If you aren't empowered to trim the content, you can at least tone the type down in contrast & size to make it appear to be less. Every time I see subtle grey text on a marketing page, I can hear the designer thinking, "no one is really going to read this anyway."
Just like in speaking, my advice is to make your words bold but few.
[+] [-] geebee|8 years ago|reply
To be clear, this is something I'm mulling over, not a hard conclusion, but here it goes...
Creating a simple, server rendered, text based web site may be exactly what the users need, but from a developer's point of view, it can also be a career risk. A rapidly increasing percentage of development jobs out there now require experience with a front-end framework. As a result, developers need this experience, so they start adding front end frameworks in order to 1) gain that experience, and 2) document that experience in a real world project. Remember, a project isn't just a project, it's an audition for your next project. This is how tech recruiting works[1]. So developers may be adding new bells and whistles that are not only unnecessary[2], but actively harmful to their current project, largely because they are necessary to their resume, and it's actively harmful not to have them there.
In short, one of the reasons the web is becoming unreadable is that web developers can't create the resume they'll need for their next gig by using the best tech for their current one.
[1] I'm getting long in the tooth enough to have seen this a few times. Companies required "EJB", it wasn't enough to have experience with Tomcat and standard Java. Later, Spring, Struts, Hibernate, iBatis were required. These days, it's ember, react, and other rapidly evolving JS frameworks.
[2] I want to be clear that I think many of these frameworks are actually pretty excellent, for projects that need them. The problem is, if your current project doesn't, you still have a strong incentive to bring them in.
[+] [-] borplk|8 years ago|reply
I think we are increasingly needing a stronger separation between functionality oriented applications that operate in the browser vs media-based content (documents/videos/images/articles).
The web has become an unnecessary-hostile platform for web applications because you are standing on a thin layer of glass the whole time because you have to juggle so many combinations of environments and browsers and capabilities and devices and screen sizes and internet speeds and everything in between.
For example there's an insane amount of baggage involved today in deploying a decent production web application in terms of bundling the assets caching vendor prefixing feature detection and so on..
So much of that could go away if we had a more application-focused platform on the web.
So someone could say you want a web-based customer service desk application? Here install this 30MB bundle once and let us focus on everything else. It's not a big ask.
Instead we have a mindfuck of "minifying" "vendor prefixing" "css autopefix" "css sprite" "code splitting" "tree shaking" "___ javascript library that is only 4 kilo bytes!" "hash based cache busting strategy" "feature detection" and so on.
It just adds unnecessary complexity and baggage.
As a long-time web dev I'd like to see the web platform for applications evolve into a more friendly and predictable environment for the developers more similar to the mobile app platform.
[+] [-] johnchristopher|8 years ago|reply
[+] [-] zzzcpan|8 years ago|reply
I think the reason is simpler, more like fashion: most people who are in a position to play with fonts and colors have absolutely no idea what they are doing and make decisions by copying somebody else who they perceive as cool, and there is always pressure to make it look cool, so it spreads.
[+] [-] godot|8 years ago|reply
To be clear, the article is almost solely about contrast between text and background colors, not JS heavy frontends. But I think what you've stated is very true and is also my opinion about the current state of web frontend.
Like another user said here, the contrast is a result of designers working with a page with too much content, and trying to reduce the feeling of content overwhelm. I don't think heavy JS frontend is directly related to that. But what you've said should not be discounted.
[+] [-] unknown|8 years ago|reply
[deleted]
[+] [-] unknown|8 years ago|reply
[deleted]
[+] [-] iokevins|8 years ago|reply
"My plea to designers and software engineers: Ignore the fads and go back to the typographic principles of print — keep your type black, and vary weight and font instead of grayness. You’ll be making things better for people who read on smaller, dimmer screens, even if their eyes aren’t aging like mine. It may not be trendy, but it’s time to consider who is being left out by the web’s aesthetic."
[+] [-] II2II|8 years ago|reply
[+] [-] ashark|8 years ago|reply
IMO ever since we were rescued from the old-school print designers & design-challenged developers of the Early Web (up to ~2005-07) by the new wave of digital-first designers, web design's done nothing but get worse.
[+] [-] arkh|8 years ago|reply
They don't care about the usability of their creation, they only want something which looks good for their portfolio.
[+] [-] nerdponx|8 years ago|reply
[+] [-] rwallace|8 years ago|reply
The answer to the first question is simple: it doesn't do anything Chrome doesn't, so there's no particular reason to use it unless you care about maintaining competition among browsers.
The answer to the second question is also simple: start acting in the interest of the user! Get rid of the annoying sticky headers. Increase the contrast when it's too low. Increase the font size when it's too small. Word wrap when stuff is going to go off the edge of the page. Narrow the display width when text is too wide.
Yes, I know you can do all of the above with various tools. I've started using the kill-sticky tool in Chrome. But that's not as good as having the browser do it proactively for you. There's a lot of low-hanging fruit there that would be vastly easier then trying to crank another zillionth of a percent out of JavaScript benchmarks. All it takes is the will to do it.
[+] [-] zeep|8 years ago|reply
[+] [-] zokier|8 years ago|reply
[+] [-] ebalit|8 years ago|reply
[+] [-] hacker_9|8 years ago|reply
[+] [-] adrianN|8 years ago|reply
[+] [-] mbesto|8 years ago|reply
[+] [-] code_duck|8 years ago|reply
[+] [-] cholantesh|8 years ago|reply
[+] [-] brynedwards|8 years ago|reply
1. https://backchannel.com/how-the-web-became-unreadable-a781dd...
2. https://web.archive.org/web/20161019173808/https://backchann...
3. https://news.ycombinator.com/item?id=12743628
[+] [-] randcraw|8 years ago|reply
The same goes for font size. Due to the range of device sizes and display dot densities, small fonts can easily become unreadable. Mobile versions of web sites helps only so much. I find at least half of Apple's system menus to be unreadably small on my iMac 5K monitor and my Macbook retina. This illegibility needs to be user-fixable in a systematic way, and ASAP. Just telling the user, "Use an Accessibility service", is NOT the right response.
[+] [-] kbuchanan|8 years ago|reply
[+] [-] rhizome31|8 years ago|reply
[+] [-] Dirlewanger|8 years ago|reply
[+] [-] zokier|8 years ago|reply
[+] [-] n0us|8 years ago|reply
Then the author puts quoted highlights in a pallid gray through the article. I guess this could be intentionally ironic but I sorta doubt it.
[+] [-] fenwick67|8 years ago|reply
[+] [-] Nomentatus|8 years ago|reply
[+] [-] quadrangle|8 years ago|reply
I love that, nice strong contrast. Turn down the display brightness if that's too strong…
[+] [-] aphextron|8 years ago|reply
[+] [-] squarefoot|8 years ago|reply
Just take a look at this screen capture (not mine, found in 2 minutes search): https://2.bp.blogspot.com/-Cq983WOS58E/VyYjnISP_II/AAAAAAAAF...
It may not look 2017, or even 2005, but who effing cares! I could stand in front of it for hours, as I do with my dark desktop, while anything resembling a white page hurts my eyes. I'm aware that printing could be a valid argument against (dark background==huge toner/ink waste), so when printing make the theme change on the fly in a way that colors being too close in their component values won't be used as FG versus BG or highlighted FG versus FG.
[+] [-] greenyouse|8 years ago|reply
If your company supported basic a11y then you would have an argument to use against designers that like low contrast text. It might also be a chance to educate them on WAI standards if they don't use them for their work yet.
[+] [-] z3t4|8 years ago|reply
[+] [-] adrianratnapala|8 years ago|reply
[+] [-] pmiller2|8 years ago|reply
[+] [-] jaclaz|8 years ago|reply
https://justinjackson.ca/words.html
Maybe a bit "extreme", an "artistic site" has all the rights in the world (+1) to be "artistic", but maybe it has been a tadbit overdone.
[+] [-] pluma|8 years ago|reply