Web Reading UX Etcetera

Nearly every week, I encounter another thread or article that's related to the web reading experience. Since the other pages are getting too big, I'll store the new findings here.

Quotes from this page that I like:


Design By Writing

A couple weeks ago on Twitter I said: “I still maintain the Drudge Report is one of the best designed sites on the web. Has been for years.” A few people agreed, but most didn’t. Some thought it was a joke. I wasn’t kidding.

To clarify, my definition of design goes beyond aesthetic qualities and into areas of maintenance, cost, profitability, speed, and purpose. However, I still think that the Drudge Report is an aesthetic masterpiece even though I also consider it ugly. Can good design also be ugly? I think Drudge proves it can.

Here are a few reasons, in no particular order, why I think The Drudge Report is one of the best designed sites on the web.

The reasons:

And the site looks the same in 2016, but it does offer a mobile web version at http://idrudgereport.com.

The site's perceived or actual influence is fascinating.

Excerpts from Jason Fried's article about the Drudge Report:

The Drudge Report, on the other hand, has proven timeless. It’s generic list of links, black and white monospaced font, and ALL CAPS headlines have survived every trend, every fad, every movement, every era, every design do or don’t. It hasn’t changed since at least 1997, and I believe the design goes back even further. How many sites can survive — and thrive — unchanged for a decade? That’s special.

There are no tricks, no sections, no deep linking, no special technology required. It’s all right there on one page.

When you’re on the Drudge Report you’re on the Drudge Report. There’s no question where you are. The design has become iconic. How many other news sites can claim that?

Many news sites have lost their balls. They’re afraid to really call out one big story. Drudge, on the other hand, says “this is the story of the moment” with a huge headline. This is what’s important in the news right now and nothing else even comes close. Drudge isn’t afraid to be an opinionated editor and his site design perfectly emphasizes that. It’s bold, it’s risky, and it’s pure Drudge design.

Stories aren’t grouped or organized except probably more interesting ones up top. And that’s it. Your eye darts all over the place looking around for something that looks interesting. The design encourages wandering and random discovery. The site feels like a chaotic newsroom with the cutting room floor exposed. I think that’s part of the excitement — and good design.

Have you seen “breaking news” on MSNBC or CNN lately? Almost anything can pass for breaking news now. [even back in 2008]

Breaking news used to mean something seriously big and important or spectacular just happened. But the major news sites have watered it way down.

But when you see a big honking red ALL CAPS headline with the flashing siren on Drudge, you know it’s newsworthy.

The site is run by Matt Drudge full time with help from an occasional part-time contributor. Based on published ad rates and traffic numbers, it’s estimated that Matt Drudge makes “over a million a year.” Not bad for a single black and white page on the internet.

The Drudge Report is a headline site. There’s no “content” on the site. Yet, that’s news. The headlines themselves can be news. Drudge breaks stories without writing stories.

When you visit The Drudge Report, you get the Drudge report. There are no interstitial ads. There’s no load time. There’s no buffering. There’s nothing but instant content.

The design of the Drudge Report doesn’t require a fancy CMS or, in fact, any CMS at all. It’s edited by hand. His overhead is probably a couple grand a month max. A few thousand bucks a year in overhead that generates a few million a year in revenue. That’s good design.

The Drudge Report is one page. Every visit and every visitor is focused on that one page with a headline and three columns. He knows exactly what people are going to see, he knows exactly how people are going to see it. There’s no mystery page here that hasn’t been redesigned or mystery page there that’s throwing an error. It’s one page to look at at one page to work on. It is what it is. It doesn’t try too hard to be something it’s not.

This is interesting and seemingly counter to the thinking that exists today.

There’s actually no content on the Drudge Report. Well, sometimes he will post an email or a memo on his site, but it’s 99% links out to other news sources. His site is designed to send you away to bring you back. The more often you hit his site to go somewhere else the more often you’ll return to go somewhere else again. You visit the Drudge Report more because you leave the Drudge Report more. This is one of the secrets to building traffic: The more you send people away the more they’ll come back.

Create a Comfortable Reading Experience

Now think about fonts: is the critical path showing text, or styling it? I’d argue that unless your app is in the 1% it’s-all-a-magical-visual-experience bucket (in which case this post is not for you), it’s probably trying to communicate some content, and ugly content (that you prettify after) is better than no content.

Excerpts from the top HN comment:

Being on a slow connection, I've come to loath web fonts. There is nothing wrong with them in general but it's just that they've come to symbolise over-indulgence and a myopia towards the users actual task-focused needs as opposed to aesthetics.

Would also encourage those who have the choice to use system fonts instead of web fonts. Seems more in-line with the spirit of the web and these fonts are very well tested in general.

The second HN comment:

As much as I believe font matters, I really think people should just use system fonts in general. No content is definitely more annoying than ugly content, but I have a seething hatred for webpages who jump around as content loads. "Let's click on this link... ah, not that link, let's go back. Yes, this link... NO! STOP MOVING!"

Besides, I'm used to my fonts. I know your fonts are a deliberate design choice, but I'm here for content. Maybe I'm just a neophyte, because I think a smaller cleaner website is better than a reactive design that has to constantly change to cram everything in. I don't care though, it's stupid when I have to wait 10 seconds for a page to load on my home connection because you've got so much crap going on, and all the while the content is jumping around like a frog with it's butt on fire.

If your site sucks, I'm not going to whine about it on twitter, I'm just going to stop visiting.


There are a lot of arguments around why you should use webfonts. In none of those arguments, have I heard about a single problem being solved for users.

User-testing is an important part of the design process. It allows you to both hear what users have to say as well as observe how they use a product. It can help you separate your ego and desires from the problem solving at hand.

I never heard a user complain about:
1. The use of system fonts in a design.
2. A website having the same typeface as another site.
3. A page using system fonts that loaded too quickly.
4. A site NOT using web fonts.

On the flip side I:
1. Observed users abandon a website because the page was loading slowly.
2. Heard people complain about the dreaded flash of unstyled text.

These points were enough to convince me that webfonts cause more problems then they solve and weren't worth the cost to my users or myself. Webfonts come with a number of costs. They cost money to license. They cost time to implement. They cost time to download, and with some mobile data plans they can cost money to download as well.

Typography is not about aesthetics, it's about serving the text. If even a small percentage of people don't consume your content due to a use of webfonts, your typography is failing.

I care deeply about aesthetics, and I've found the following two sentiments to be true: System fonts can be beautiful. Webfonts are not a requirement for great typography.


How about dear publishers or website owners, stop the irritating action of auto-play videos? Auto-play video is an instant reason for me to disable JavaScript for that site or to close the tab immediately. I despise auto-play video.

Top HN comment:

Things that make me just close tabs straight away:

1) Autoplaying videos, especially ads.
2) Pop-ups / overlays.
3) Loading lots of extra elements causing text to jump around.

Especially true if I'm just browsing around and click on something that looks interesting, the above will take that thing from "this might be worth 30 seconds" to "not worth it".

Why kill that little dopamine boost someone just got from clicking on a link to your site? If you're wondering why your bounce rate is so high... though maybe these dark patterns bring in enough ad revenue that it's worth it. I don't see how 3 helps that, though, just lazy coding. Or maybe other people are more tolerant and it doesn't really affect the bounce rate.


I thought my eyesight was beginning to go. It turns out, I’m suffering from design.

It’s been getting harder for me to read things on my phone and my laptop. I’ve caught myself squinting and holding the screen closer to my face. I’ve worried that my eyesight is starting to go.

Though age has indeed taken its toll on my eyesight, it turns out that I was suffering from a design trend.

There’s a widespread movement in design circles to reduce the contrast between text and background, making type harder to read. Apple is guilty. Google is, too. So is Twitter.

Typography may not seem like a crucial design element, but it is. One of the reasons the web has become the default way that we access information is that it makes that information broadly available to everyone.

But if the web is relayed through text that’s difficult to read, it curtails that open access by excluding large swaths of people, such as the elderly, the visually impaired, or those retrieving websites through low-quality screens.

We should be able to build a baseline structure of text in a way that works for most users, regardless of their eyesight.

So why are designers resorting to lighter and lighter text?

The theory espoused by designers is that black text on a white background can strain the eyes. Opting for a softer shade of black text, instead, makes a page more comfortable to read.

Let me call out the shibboleth here: Schwartz himself admits the conclusion is subjective.

What you see when you fire up a device is dependent on a variety of factors: what browser you use, whether you’re on a mobile phone or a laptop, the quality of your display, the lighting conditions, and, especially, your vision.

When you build a site and ignore what happens afterwards — when the values entered in code are translated into brightness and contrast depending on the settings of a physical screen — you’re avoiding the experience that you create.

And when you design in perfect settings, with big, contrast-rich monitors, you blind yourself to users. To arbitrarily throw away contrast based on a fashion that “looks good on my perfect screen in my perfectly lit office” is abdicating designers’ responsibilities to the very people for whom they are designing.

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.

Corresponding October 2016 Hacker News discussion that contains over 300 comments.

HN top comment:

I basically think design is like a cancer on the web anymore. You know what works? Craiglist, that's what works. I seriously want to punch a hipster every time I have to use an app that used to work and has now been designed to death.

another hn comment:

I think it all comes down to humility. Don't let your notions of aesthetics overrule the needs or wishes of the users, and especially wish for things not to change.

hn comment:

Is it the stylization, or is it feature-overload and overall "bloat" of software and web apps? Or, is it the overload of 3rd party scripts meant to harvest your information and sell it off to affiliate marketers?
Or is it some of all of the above? I think some of the newer age design techniques, such as responsive design, are very elegant compared to any slight performance costs of some of CSS3's new features.

hn comment:

The usability issues compound when that page was created with 1.2MB of JS (and another 2MB of ads), and I have to see a loading spinning wheel when it could have been easily been static content. ...And then when the page loads, I accidentally click an ad instead of a link because the ad moved over the content that I was reading to offer me 10% of joining the exclusive mailing list.

hn comment about what is probably a common reason for many bad web UI/UX issues:

Changing for the sake of change as the primary reason usually never works well with an established user base.

great comment:

It’s true that many designers tend to look at text more like a texture. Instead of making it large and distinct they will make it small and light colored when it's in fact the only valuable thing on the screen.

hn comment:

The latest web design trends feel like they are trying to make things "readable" for people who don't actually want to read. At the expense of people who want to read. I am so happy when I see a simple page with text and pictures I can scroll through without things reloading or things jumping around.

sounds like i wrote this comment, but i didn't. so glad to see that i'm not alone.

I think it's a broader problem - too much css fluff, far too much javascript; even the simplest webpages now seem to feel the need to be miniature apps in their own right, instead of just serving the damned content already. I often websurf using an old 1st gen iPad and it's a massively frustrating experience just how many sites nowadays just crash the damned browser.


Can somebody please explain why so many sites are making their text harder to read? A lot of sites are using gray-on-white or gray-on-gray text -- including this one! Is there some backroom deal with eyedrop vendors? Why are designers doing this?

response:

Black text on white background is generally considered to be too high a contrast and hard on the eyes. A very dark grey on white is easier to read.

As of October 2016 at my boghop.com site, I'm using fafafa as the background color, which is a very light grey, and for the text color, I'm using 222222, which is near black or charcoal.

More color contrast issues discussed in this post:

The debatable recommendations:

Don't pick colors arbitrarily; use a color palette instead. Material Design colors and Flat UI colors are good palettes to start with.

It is recommended to not use pitch black #000 as your body text color. Instead, use a very dark gray such as #333.

Sometimes, it is better to use an alpha value or opacity instead of a lighter color.

Make sure that there is enough contrast between the text and the background. Use this contrast checker tool to help you.

And it would be excellent if good color contrast existed between the visited and un-visited link text, located within the body of an article, especially if the links are not underlined.

I like article body links to be underlined. Menu links that are located in the header and footer of the site can exist without underlines, since menu links are usually created with one-word nouns and verbs, and their locations imply navigation or something similar.


Clearly, aesthetics are important but aren't the ultimate goal of design. And often poor readability doesn't get noticed during the design process, as we are not like our users. We don't read the texts as a visitor does."

When making the contrast of the text lower and lower... designers need to think of elderly users with bad vision, low quality monitors, bad lighting and glare, reading on tiny screens.

W3C's Web Content Accessibility Guidelines set the minimum contrast between text and its background so that it can be read by people with moderately low vision (which is quite common).

Another experiment confirms that reading time is lower when there's high contrast between the text and the background. What's more, contrast sensitivity declines with age


Comments from a Feb 13, 2017 Hacker News thread about medium.com's business strategy. Naturally, the thread swerved into other areas, including the user experience at medium.com.

Anyone who's trying to optimise should first make sure they don't mess up what has been working for two decades. There's a persistent footer when I scroll, which reduces the visible screen area. Medium breaks a lot of things that were working with every other blog for many years. Please, if you want to innovate, make sure you don't already break what is the norm.

Another comment that was about fixed footer areas used on responsively designed websites when viewed with mobile browsers:

That fad is spreading on the web like wildfire. Looks like we (mostly) survived the low contrast epidemy only to get afflicted with the reduced reading space one. Some sites even stick in a huge (as in 1/4 of the screen) persistent header.

Another comment:

It's even worse when it's a sticky header. In those cases when you hit the "Page Down" key the content is covered by the header and you have to press "Up" a few times to read it.

The fixed header and footer areas annoy me too. I used fixed headers on my own websites back in 2013-2015, but I have eliminated most of them. I have never employed a fixed footer area.

To me, the fixed footer on the mobile web is an example of website developers trying to copy the functionality of native apps. I understand why this is done, probably to create a similar or familiar look-and-feel compared to most native apps, but it's frustrating when the web works fine as is.

I rarely ever click on something within the fixed footer and header areas, which means those are wasted space on my iPhone 5. Apple still makes the 5 footprint with the 5se. Some people prefer the smaller phones.

I don't need fixed headers nor the headers that disappear and re-appear, depending upon which way that I'm scrolling because when I need to race back to the top of the web page, I tap the top of the browser, and shazam, I'm back at the beginning. That works unless a web developer has decided to use CSS to implement a smooth scroll, which means the racing-to-the-top doesn't work, at least within Safari. Mobile Chrome defaulted to smooth scroll.

For one of my websites, I used CSS to implement smooth scroll when reading with mobile web browsers, but when the tap-to-race-to-the-top no longer worked, and when the URL window remained fixed on the screen, then I removed the smooth scroll.

I like Fastmail's mobile web interface, and they implement their own smooth scroll. Since that's a web service that I log into, then I accept their UI/UX. But for text-heavy websites that I'm reading as a browsing-only user, then I don't see the point of native app-like functionality on the mobile web.

I still encounter too many websites that use a light grey text that is difficult to read. But in my opinion, the worst design flaw that shows no signs of waning is the usage of a microscopic font size when viewing a responsively-designed website on a mobile browser. This may be the ultimate in designing for death and creating a reader-hostile web experience.

I'm not talking about an old website that does not list a viewport to make the font size adjust to the browser on the phone. No, these are modern websites, designed responsively, yet they use a nearly impossible read font size. Even when reading this irritating websites in portrait mode on my iPhone 5, too many words get displayed on each line, making it a little harder to keep track of where to begin on the next line.

I hate the design tactic on mobile websites that prevent me from zooming in to enlarge the font size even if that means getting a horizontal scrollbar. Again, I understand this design concept for a web app that requires the user to log into the site. But for browsing-only users who are mainly reading the site, I don't understand this reader-hostile design function.

More HN comments:

[Medium] focus overtly on prettiness and leaves many usability aspects unaddressed.

[Medium] went all out with JavaScript overengineering. On mobile devices I don't want to use it at all

[Medium has] their own SPA logic, so when you click new article, only the content will be loaded, other parts will stay same.

I'm not changing my browsing habits because Medium's engineers suck at sending text.


January 2017 Hacker News thread about accessing websites over slow connections, including dial-up.

If you use vimperator (http://www.vimperator.org/) on Firefox, put this in your ~/.vimperatorrc so you can disable CSS with the "s" character (and re-enable it with Shift-S). It removes 99% of bullshit from web pages and allows you to read articles the way Tim Berners-Lee intended, guaranteed!
nmap s :emenu View.Page Style.No Style
nmap :emenu View.Page Style.Basic Page Style


Comments from a Feb 14, 2017 Hacker News thread :

This describes me, although I did not post this comment.

[Firefox NoScript add-on] makes many more [websites] completely usable. Floating headers and footers? Dead. Survey pop-ups? Dead. Pop-ups begging for your email address? Dead. Dumb fading in text and images? Dead. Needless whiz-bang animations? Dead. Site load times? Dramatically reduced. Browsing the web with NoScript is far more pleasant, even if I have to sometimes open a menu to enable a couple domains to make a poorly developed website usable. I'd highly recommend it to anyone even remotely technical. If your website requires active content in order to display plaintext, images and navigation, then yes, it is poorly developed. You failed to use the right tool for the job.

Battle Web Page Bloat

http://mars.nasa.gov/MPF/index0.html

https://news.ycombinator.com/item?id=13100910

HN comments:

Look at those fantastic loading times, and its not pulling down 1.2mb of cancerscript to make some text appear!

Cancerscript? That's a new description to me for unnecessary JavaScript.

https://www.webpagetest.org/result/161205_PY_585/
mars.nasa.gov/MPF/index0.html
From: Dulles, VA - Chrome - Cable
12/4/2016, 10:41:33 PM
First View Fully Loaded:
Time: 0.342s
Requests: 6
Bytes In: 59 KB
Cost: $

No CSS and no JavaScript. That site was created in 1997. Most of the bytes downloaded were probably from a single jpeg file.

The site contained a link to all text.

https://www.webpagetest.org/result/161205_AF_5EF/
mars.nasa.gov/MPF/mpf/alltext.html
From: Dulles, VA - Chrome - Cable
12/4/2016, 10:51:08 PM
First View Fully Loaded:
Time: 0.365s
Requests: 5
Bytes In: 10 KB
Cost: $

No real noticeable diff, since the version with the image is still a small web page. Microscopic by today's standards.


Feb 8, 2017 Hacker News thread titled The web sucks if you have a slow connection that referenced this post at danluu.com, titled Most of the web really sucks if you have a slow connection.

By "web" I assume that everyone meant "websites". Therefore the respective titles should have been states as:

In my opinion, the web is fine even if the internet connection is slow. And if text-heavy websites were designed as simple as boghop.com, then reading text over a slow internet connection would not be a painful experience.

But developers and designers build websites for perfect conditions: high speed internet, high-res monitors, latest CPUs, excellent INDOOR lighting, and 20/20 vision.

The danluu.com author titled his post correctly within the URL for the post. The slug for the post is /web-bloat. Yes, bloated websites are the problem, not the web.

https://danluu.com is designed simply (well). Pages use a tiny bit of inline CSS and no external CSS. About the only JavaScript used is for Google Analytics.

https://www.webpagetest.org/result/170209_BS_7H4/
https://danluu.com/web-bloat/
From: Dulles, VA - Chrome - Cable
2/8/2017, 7:31:00 PM
First View - Fully Loaded:
Time: 0.832 seconds
Requests: 3
Bytes In: 37 KB
Cost: $

Nicely done. For the Bytes In or bytes downloaded, 50 percent of the download was due to JavaScript, the analytics.

Hilarious quote from the HN thread:

I'm not gonna lie, if my fat high-res site images make life a lil harder in Vanuatu but convert a bunch of black-turtleneck d-bags in San Francisco to customers, I know which side of the bread the butter is on.

Yep. In may cases, website design is determined by the website's primary audience. A design like Boghop.com would be senseless for a website that's promoting a video game.

HN comment:

I used to work at a place that had a <1mbps modem, and a ~7 year old destkop. If their software didn't work on that, it needed to be optimized. I wish more places would test this way. Your sight may work fine in downtown SF, but that doesn't mean it's going to work well anywhere else.

Another HN comment:

UX guy here. I've always kept performance in mind. One of my pet phrases is that speed is part of design. I've gotten a lot of blank stares. That's why more designers don't bother: decision makers usually respond only to look/flashiness/branding.

HN comment:

Sad thing is that most of the web sucks on rather fast connections too. Pages being almost 5mb of data, making multiple dozens of requests for librairies and ads. Ads updating in the background, consuming evermore data. I don't notice it much on my PC, since I've got a FTTH connection, but on LTE and 3G, it's very noticeable. Enough that I avoid certain websites. And that's nowhere near slow by his standards. I do agree that everyone would benefit from slimmer websites.

No, most of the web does not suck with a fast internet connection. Websites suck.

HN comment:

I have Javascript off-by-default, and about 80% of the time it simply makes everything better. Oh, sure, a few sites need JS (and get whitelisted) and some just have minor layout quirks... But I can actually scroll down and read the text of a news article rather than suffering through waiting times and input-latency as Javascript churns.

An HN response to the previous comment:

Same here - I would highly recommend people to at least try this once and get a reminder of how fast sites can be.

When I'm web surfing, I read most media sites with JavaScript disabled.

HN comment:

... the JS bloat mentioned in the article is like driving a semi-truck carrying only one carton of oranges. It's a lot of extra waste for a very slight benefit.

Interesting HN comment:

... websites should fail like escalators, not like elevators. Too many people design sites like elevators though. ... my point isn't about safety, it's about usability. Escalators can still be used as stairs when they fail. Elevators can't be used at all.

HN comment:

Can't browsers provide a service like txt://example.com that shows web content in plain text, no images, no javascript, nothing, something like readability but directly without loading the whole page first? It would also be good for mobile connections. Wikipedia should be the first site to offer that txt: protocol, Google second. Btw, hacker news is the perfect example of a text only site.

What about Gopher? Problem is, website owners would need to maintain the Gopher version separately. And most browsers don't support the Gopher protocol.

HN comment:

Most of the web really sucks on fast internet connections too. Thanks to so many web developers thinking every dang thing needs to be a single page app using a heavy JavaScript framework. Add animation, badly optimized images and of course ads and it becomes really unbearable. We keep repeating our same mistakes but just in a different way.

HN comment:

I saw a sarcastic comment a while back saying that webdevs should be forced to work on a Pentium II machine and they would cut their bullshit, I laughed, and moved on. But after seeing many examples where sites were built on huge iMacs with no care for users running off a battery, slower network connection or with an average 1366x768 display I somewhat agree with the sentiment.

It's great to see that others are annoyed by unnecessary website bloat.

JavaScript is not the problem. The misuse of JavaScript is the problem as in using JavaScript for unnecessary tasks. Example: http://wiki.c2.com. Why Ward? Why?

When logged into a site's admin interface or dashboard, then I expect a smooth, useful experience that's most likely led by JavaScript. That's fine.

But when I'm a browsing-only user, reading a text-heavy site, then using JavaScript to create scrollbars, display links, and other basic functions that browsers have supported for 25 years is infuriating.

When CSS needs to be "compiled", is that a sign of too much complexity?

HN comment:

I've been very tempted to start publishing content on the gopher protocol, its immune to the cancers of the modern web.

Last August, I created a test site that uses Gopher. gopher://gopher.soupmode.com. Chrome does not support Gopher. Firefox does. And so does Lynx. On the iPhone, I use the iGopher browser app to view Gopher sites.

Gopher files have their own text markup, but the Gopher browsers that I have used also support HTML files that are served by a Gopher server.


January 2017 Hacker News thread about accessing websites over slow connections, including dial-up.

Comments:

My point is that it is absolutely possible to not give in to shitty bloated web trends driven by the expectation to increase popularity, while making a quality, profitable website.

In all reality, I just want to dump the modern web's approach. CSS, Javascript, you name it. Give me simple HTML and text ads, if you need ads. Give me pictures when I want them, with descriptive captions. I agree with the intent of the blog--quit making crappy ads and bloated sites! I use elinks often, and find it's text-based approach easier to comprehend.

Significant amount of web requests is now performed via mobile connections, which, depending on a lot of factors, can be as bad as 2G. We don't use modems, of course, but we still need web sites that work on low bandwidth.

... on a slow connection, everything is going to suck in unpredictable ways, because of server-side bloat, and the trendiness of developers deploying 5MB js libraries. Worrying about whether the browser [or CPU or monitor] was recent or supported misses the point. Any browser can suffer these sorts of problems on a 56KB dial-up connection. (3G mobile data is frequently throttled at 128KB by popular ISP's, btw)

Bloated websites can crush older CPUs with only 5 to 10 browser tabs open.

#manifesto