
How the Web Became Unreadable (2016) - rbanffy
https://www.wired.com/2016/10/how-the-web-became-unreadable/?mbid=social_tw_backchannel
======
rkangel
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!

~~~
mmagin
I thought Mac OS X had switched to using the same default Gamma setting as
Windows quite some time ago.

~~~
ponyous
Author is probably talking about screens

~~~
zokier
No, font rendering on OS X has traditionally been bit heavier than on Windows,
and I think that is what OP was referring to.

------
toddmorey
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.

~~~
Veen
One of the motivations I've heard bandied about is that reducing the contrast
of content allows sites to increase the perceived contrast of calls to action
without making them garish. If everything is grey on grey, the dark bold "Buy
me now" button stands out.

------
geebee
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.

~~~
johnchristopher
The article deals with text readability and typography, not with an over
reliance on JavaScript front-end frameworks to render « simple » text.

~~~
geebee
That's absolutely true. However, my question is whether part of the decline of
text readability is due to a resume building need to involve technologies that
don't have much to do with basic text.

Here's the thing - people don't like to bring in a more complex technology
simply to do exactly the same thing as they could do with a simpler one. They
need to justify its presence in there _somehow_.

For instance, supposed you decided to re-implement hacker news with a client
heavy javascript framework. Would you leave it looking _exactly_ the same as
before? Almost certainly not, you'd start using that javascript stuff, and (in
my opinion), the end result would no longer be the simple, easy to read, text
based website that it currently is.

That's the connection I'm getting at here (and once again, it's something I'm
mulling over, not a hard conclusion I've reached).

~~~
munchbunny
I would agree that what you state are factors, but I would disagree that they
are the main factors.

One thing I notice in my work (in product management) is that people naturally
gravitate towards shiny things. So we design things to be shiny in order to
attract those people.

At various points, a specific aesthetic gains popularity because, for well-
founded reasons, it increases usability and readability. Then everyone starts
to imitate it, partly because it works, but also partly because people are
drawn to it. Then frameworks are created to enable teams to rapidly replicate
the style.

At a certain point, the frameworks are good enough to just replicate the style
in basic settings with little input needed from someone who is actually
thinking really hard about the design. In many ways that's a good thing
because it lowers the barrier to entry. It's much easier to make things
because the framework drastically reduces the amount of wheel reinventing
you'd need to do. But you end up with designs where nobody really thought that
hard about it - and so you end up proliferating potentially bad defaults
encoded in the frameworks.

I'm personally much more willing to believe that the decline in overall design
quality is due to negligence from convenience.

~~~
adrianratnapala
In my work, I have noticed that users are reluctant to move towards shiny
things, and it is the developers of the shiny things and some manegers who
gravitate. The rest of us get pushed.

~~~
zzzcpan
Exactly, in web design almost no one actually thinks about the user, it's all
about impressing each other with shiny things, rather than well thought out
user experience.

------
iokevins
Summary:

"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."

~~~
nerdponx
I'm still trying to understand where these fads came from in the first place.

~~~
anigbrowl
There's a strong economic incentive in business to distinguish oneself from
one's competitors by any means necessary because (whisper it) capitalism is a
zero-sum game.

Have you ever noticed in science-fiction and other speculative genres,
computer systems almost invariably have clean consistent user interfaces.
That's what consumers want - relatively simple UIs that work the same for all
the content they deal with. that's why things like Bloomberg Terminal are
popular, that's why people fall in love with the UIs in videogames.

What retailers and other businesses want is to be different and stand out from
their competitors. Since the costs of entry to the web are much lower than
those for print (billboards or magazine publication) there is correspondingly
more visual clutter. But this isn't a new thing with the web, it's been around
as long as there have been magazines. I suffer from severe ADHD; I tend to
avoid large racks of magazines in stores because looking at all that imagery
and typography at once is very similar to being screamed at by a crowd of
people.

This does not mean I hate all graphic design and typography, far from it. But
where we went wrong (imho) is that the web became about making every page
distinctive instead of concentrating on hypertext and letting people customize
it at the client end. Facebook beat MySpace because FB is consistent and
graphics are subordinate to the white-and-blue color scheme. Wikipedia
succeeds in larger part because it's visually consistent. GeoCities is a
graveyard because it wasn't.

The basic problem is that absent other incentives money typically flows
towards novelty. But competition alone rarely yields optimal results; rather
it tends towards a lower common denominator.

~~~
TeMPOraL
I strongly agree. This is precisely why I love fictional UIs in sci-fi movies
and videogames. This is also why I find it natural to use Emacs as my proxy
operating system - because there everything is functional _and_ consistent.
And it's also why I prefer native UIs to web UIs - because again, there's a
deeper system-wide consistency in native UIs.

To your analysis I'd add: companies, because of business pressures, mostly try
to _milk you_ instead of helping you. I sometimes call it "extracting value
from users" instead of "delivering value _to_ users". The consequence of that
is, they want to control as much of the interaction with you as they possibly
can. On the web, it means they want to control the rendering phase. As a user,
this is precisely what I _don 't_ want them to do. I want their data, not
their presentation decisions. This conflict is pretty visible where it comes
to ad blockers and reader modes, and also one of the big reasons people resort
to scrapping websites. In a perfect world where companies cared about
delivering value to users, scrapping would not be necessary.

------
rwallace
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.

~~~
zokier
Firefox ships with reader view, sounds like it does pretty much what you want.

~~~
rwallace
So it does! Trying it now, don't yet know how comprehensive it is, but it
seems to work well on a Medium post, at least. Thanks!

Now, how to increase awareness of that feature?

~~~
zokier
There was a campaign when it was new feature that showed a popup hilighting
the feature after update, like this:

[http://winaero.com/blog/wp-
content/uploads/2015/05/Firefox-3...](http://winaero.com/blog/wp-
content/uploads/2015/05/Firefox-38-reader-mode.png)

Considering that reader view has it's own dedicated button and all, I'm not
sure how it possibly could be made more promenient without being annoying. The
popup already was bit on the edge of being annoying.

------
hacker_9
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.

~~~
adrianN
It looks very neat for me, but I have scripts disabled and run an adblocker.
Javascript makes the experience worse on almost every site.

~~~
andrewstuart2
Surely we can acknowledge that JS is not the cause, just as HTTP is not the
real cause of all those ads you see.

The problem is shortsighted business and design decisions that have
prioritized squeezing every last fraction of a penny out of the page,
borrowing against the user's perception of the site. In the long run, that
debt is going to come due and the user is going to stop coming back to your
site from lack of cost/benefit.

~~~
adrianN
Well yes, JS is not the cause, but it's the tool that enables websites to
invade their users privacy, eat their battery, and blink and slide and splash-
screen ads from every angle. Before JS became so well suited for that task
Flash was the main culprit. The web was better without a Flash plugin (and it
still is).

~~~
greggman
Used "correctly" the web with JS is way better than the web without. There's
plenty of sites that use JS great from actual apps to articles and tutorials
with interactive examples. In fact personally I find myself disappointed when
I see an article that would clearly be better with interactive diagrams but
the authors are stuck thinking the web it just a transmitted book and not it's
own medium but better strengths.

A couple of examples where IMO JS makes the page superior to one without

[https://mattdesl.svbtle.com/drawing-lines-is-
hard](https://mattdesl.svbtle.com/drawing-lines-is-hard)

[https://bost.ocks.org/mike/algorithms/](https://bost.ocks.org/mike/algorithms/)

[https://pomax.github.io/bezierinfo/](https://pomax.github.io/bezierinfo/)

------
brynedwards
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].

1\. [https://backchannel.com/how-the-web-became-
unreadable-a781dd...](https://backchannel.com/how-the-web-became-
unreadable-a781ddc711b6?gi=a6d57afcfc45)

2\.
[https://web.archive.org/web/20161019173808/https://backchann...](https://web.archive.org/web/20161019173808/https://backchannel.com/how-
the-web-became-unreadable-a781ddc711b6?gi=a6d57afcfc45)

3\.
[https://news.ycombinator.com/item?id=12743628](https://news.ycombinator.com/item?id=12743628)

------
randcraw
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.

------
kbuchanan
The first thing that appeared upon clicking the link, for me, was a full-
screen overlay ad asking me to subscribe to Backchannel. Unreadable indeed.

~~~
rhizome31
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.

------
Dirlewanger
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.

~~~
zokier
The article itself at least has very legible high-contrast font. So I'd say
they practice what they preach in this case.

~~~
Sleeep
And the links look different than the non hyperlink text. Sure,they look like
highlighted text, and some people might not like that (I do), but at least
they look _different_! Many sites nowadays make you guess where the links are.

------
n0us
> Text that was once crisp and dark was suddenly lightened to a pallid gray.

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
To be fair I'm not sure the author is in control of this.

------
Nomentatus
"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!

~~~
SippinLean
False

    
    
        color: #000;

~~~
Nomentatus
You're right - they got to the equalent of grey by using an unreadably thin
font. There's always another way to screw up if you're devoted to finding it,
I guess. At least they chose serif, though.

------
quadrangle
I never want to go back to standard web usage after getting used to this
plugin: [https://addons.mozilla.org/en-US/firefox/addon/dark-
backgrou...](https://addons.mozilla.org/en-US/firefox/addon/dark-background-
light-text/)

I love that, nice strong contrast. Turn down the display brightness if that's
too strong…

------
aphextron
The irony of this article is incredible

------
squarefoot
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.

Just take a look at this screen capture (not mine, found in 2 minutes search):
[https://2.bp.blogspot.com/-Cq983WOS58E/VyYjnISP_II/AAAAAAAAF...](https://2.bp.blogspot.com/-Cq983WOS58E/VyYjnISP_II/AAAAAAAAFZk/Kt7E_qjw4swET3YORO5AvTRzCA60ZYAsQCLcB/s1600/manjaro-
lxqt-dark.jpg)

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
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.

------
z3t4
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 ?

~~~
adrianratnapala
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.

------
pmiller2
This article doesn't even render in a readable form for me on iOS chrome.
Great job, Wired! Way to illustrate your point. :P

------
jaclaz
Just in case:

[https://justinjackson.ca/words.html](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
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.

------
creeble
Wired'd print magazine is _easily_ the least-readable mag on the planet.

Among other poor style choices, they abandoned text borders some years back -
text blocks are within tiny fractions of character width from high-contrast
(often just black) page features.

I guess it's what they call "edgy", literally. So hard to read!

But I may be the last remaining subscriber anyway.

------
xigency
Given the comments, it seems like most readers don't see the entire article as
a single vertical column of characters.

~~~
WorkLobster
Same here. Given the title, I spent a couple of minutes trying to figure out
the joke.

------
harry8
Well wired are in a unique position to answer this question given I haven't
been able to read their articles for sometime and instead get a message
"Here's the thing about ad-blockers"

I don't use an ad-blocker.

The quality of their journalism usually isn't much better. Was it this time?

------
discreteevent
[http://contrastrebellion.com](http://contrastrebellion.com)

~~~
mrob
That "Contrast Rebellion" is no such thing. It uses the same low contrast text
it complains about. Sure, worse examples exist, but that's no excuse to
deliberately use gray text (#191919). The correct color is #000000, which is
the closest to high quality printing on paper.

~~~
nilved
[https://ianstormtaylor.com/design-tip-never-use-
black/](https://ianstormtaylor.com/design-tip-never-use-black/)

#191919 is "real black."

~~~
mrob
Advice for beginning painters, who might otherwise be inclined to overuse
black, has no relevance to typography. Printer toner is made from carbon
black, which is as close to pure black as you're going to get without very
exotic materials.

~~~
nilved
The title isn't "don't overuse black," it's "never use black." Black is an
unappealing colour to look at.

~~~
mrob
Artists use pure black all the time. "Never use black" is something said to
beginners because never using it is better than using it excessively. It's
like saying "never use passive voice" to a beginning writer. Black is
appealing if used correctly, and because all commonly used printing and
display technologies have lower dynamic range than typical real-life scenes,
careful use of pure black and pure white is essential if you want an
appearance of realism.

And typography is a completely different subject to painting. People have
aimed for darker blacks from the very beginning of ink technology. Even now,
people put up with the hassle of dip pens instead of fountain pens because
they allow for darker black inks. Extremely high contrast is considered a mark
of quality in printing, so why should it be any different on screen?

------
Traubenfuchs
This article is published on a website that uses the blurry mess that is
Exchange. At least it's black.

------
megamindbrian
I like this line "So, as a physicist by training, I started looking for
something measurable."

------
bogomipz
The article has nearly half the screen real-estate taken up by a social media
"Share" bar, a "Most Popular stories bar and a top nav bar. Jammed between
these is actual content.

The web has become unreadable indeed Wired, I'm not sure if contrast ratios
and typography are the first things that come to most people's minds however.

------
grimmdude
I don't know, I think much of the web is much more readable now than ever
personally.

