Quieter Web Reading for Tired Eyes

[jesse_the_k]

Web browsers can present information in a variety of ways. We know the noisy version: tiny fonts, gray-print-on-lime green backgrounds, auto-play music or video, sudden intrusive requests to subscribe to newsletters.

I’m here to share the good word about “quiet web reading.” These are techniques and tools that fine-tune browser display so it’s easier to see and understand. Quiet web reading is great for those of us who want an uncluttered screen, with no flashing elements and the optimal font style, size, color and contrast so we can stop thinking about the device and just read.

I’m focusing here on tools which are the easiest-to-use for non-technical computer users. My design constraint was, “Can I talk someone through this over the phone?” I know there are more powerful tools which require some technical skill to use; feel free to recommend those in comments.

I know four ways to get quiet web reading:

1. Reader view (sometimes known as reader mode)
2. Zoom to mobile in desktop
3. Read-later services
4. Change the default browser display

I’m a lifelong Apple user, so I’m competent to discuss Mac and iPad/iPhone. I welcome recommendations for Windows, Linux, and other platforms in comments!

Reader View

Many browsers have “reader view” (aka “reader mode”) built-in:

• Firefox: command-option-r or click the icon to the right of the current link in address bar
• Safari: command-shift-R or click the icon in left edge of address bar
• most alternative, passion-project browsers, including
  • Brave
  • iCab
  • Vivaldi

Advantages:

• enables comfortable reading on small screens
• supports cleanly reformatting a wide range of sites, since it’s built in to the browser
• displays principal content in a single column
• offers black on white, black on sepia, and white on black display
• removes ads, pop-ups, secondary/sidebar articles, auto-playing media
• permits some control over font choice, size, color and contrast

Drawbacks:

• Designed for articles, not conversations. On most discussion sites (here, Tumblr, Wordpress or Blogspot sites, Reddit or Metafilter), you only see the initial post, not any response
• Embedded media–audio players, carousels, slide shows, videos, or photographs–may not appear

Bring Reader View to Chrome with Extensions

Chrome may never have this feature built in, since it hides Google’s text ads. (Weirdly, the newer Chromium-based Opera doesn’t have reader view either, but any Chrome extension works in Opera as well.) There are dozens of reader view Chrome extensions. Of the ones I’ve tested, I recommend:

• Mercury Reader: super-simple UI, minimal choices, max font size ~24pt, offers “send to Kindle”
• Reader View: basic choices, can save pages to disk, toggle image display
• Just Read. All display control is through CSS, but many users have uploaded theirs for you to copy and modify.
• Tranquility Reader: Very effective, comes with several useful presets, including high-contrast large font. Customizing requires more tech skills

Zoom to mobile in desktop: the Amazing Enlarge Trick

Keyboard zoom is available in every browser I’ve tried. This zooms the entire page. When you make the page large enough, a modern site will switch to “mobile mode,” where primary text is one column, hiding the noisy sidebars.

On Mac, zoom display with command-equals (⌘=) (The documentation says command-plus, but you don’t have to press the shift key.) Command-minus shrinks, and command–zero goes back to page as it first loaded.

On Windows, control-plus and control-minus zoom web pages. You can also right-click and roll the mouse wheel to change sizes. Back to the way it looked when you loaded? Use control–zero.

Read It Later Services

Instapaper and Pocket are the main platforms. Both require accounts and store modified content on their own servers, raising privacy issues. Both allow you to store streamlined text on your device, so you can bring weeks of reading where you don’t have net access.

Instapaper

• save is triggered by plugin (with key binding) or bookmarklet or share sheet in any browser
• clients for iOS, Android, Kindle with many font/color options
• also readable on web with limited font/color settings
• exports highlights and notes – it’s great for feedback on fanfic!
• integrated with many iOS apps
• exports to HTML & CSV
• can import direct from Pocket

https://instapaper.com owned by Pinterest, still in development and now free

Pocket

• built in to newest Firefox; triggered by extension or share sheet in other browsers
• clients for iOS, Android, can send to Kindle
• premium version $45/yr creates personal archives, offers better fonts and display
• integrated with many apps

https://getpocket.com

Change Browser Display

Instead of visiting a page and then switching to a more readable format, you can change what every web page looks like when you visit. Unfortunately, you’ll find that many web designers assume that everyone can read 11 point print. When you increase the minimum font size in your browser, pages can be unreadable. This is why reader view exists.

Using a Browser’s Own Preferences

Common browsers offer direct control of what the page looks like whenever you load a site: including whether it’s sans or sans-serif, as well as specific typefaces; font size, font color, background color, link appearance, and all-over page zoom. Any “modern” site that adjusts for mobile should be usable when you zoom it.

• Chrome > preferences > appearance > customize fonts
• Firefox > preferences > language & appearance > fonts > advanced as well as Firefox > preferences > language & appearance > fonts > colors
• Opera > preferences > websites > display > font size as well as Opera > preferences > websites> display > page zoom
• Safari on macOS offers per-site settings: always use reader mode, zoom level, disable content-blockers, suppress auto-play media, and camera/mic access permissions. Customize the toolbar to add the “Website preferences” gear, or choose “Settings for this website” right under Preferences in the app menu

Use Extensions (aka plugins or addons) to change display

DarkReader’s elegant UI supplies useful defaults as it inverts colors and changes contrast levels. You can also set the default font and stroke width, making text bolder and more readable

• Chrome
• Firefox
• Opera (after you add Install Chrome Extensions)

NoSquint Plus permits you to tune what your browser shows with site-by-site settings. The quick access panel offers full-page or text-only zoom, as well as your choice of text and background colors, unvisited and visited link colors.

• Chrome
• Firefox
• Opera

Comments

[anankastick]

Thank you! This is so helpful.

[jesse_the_k]

Glad to hear it!

[isis]

What a useful write-up - my old eyes thank you.

[jesse_the_k]

Maybe we can have an old-eye con?

[mdlbear]

Thank you! This is excellent, and useful.

My websites and Dreamwidth/LJ styles respect the browser's font size, on the grounds that the user probably had a good reason for setting it.

[jesse_the_k]

Thanks for your kind words.

From your mouth to God's ear. I was so thrilled when the web started out, and finally we had a platform where we could separate format and content! Ah well, maybe next tecnological era.

[vass]

This is such a good post. The sudden pop-ups and swooping navigation, they distress me so much.

Thanks!

[jesse_the_k]

Swoops for the lose!

[jazzyjj]

This is very well written. One of the reasons I like Dreamwidth so much is the fact that it can be customized so much, with all the themes and such. I'm happy to report that every theme I've tried out thus far is very accessible with VoiceOver and with Google's extension for Chrome known as Chromevox Classic.





VoiceOver has a feature in Safari called Reader, which I think is similar to Reader View. I haven't had to use it much but it seems to work well. I just got my first iPhone, and am excited to try out everything. I've got my first formal training session on Thursday at a place here in Chicago.

[jesse_the_k]

Thanks for the kind words.

I'm happy DW is as accessible for you as it is for me!

VoiceOver's Reader may in fact be the same as Reader View, with the "view" elided to comfort tender sensibilities *grin*.

What browser(s) do you prefer? Do you use both a Mac laptop and a Chromebook?

Best wishes for your iPhone session. It's taken me more than two years to be really comfortable with it. The single most helpful navigation tool is that many apps offer a "search" function. It's particularly nice in Settings, because there are more than 1500 possible prefs to modify there.

[jazzyjj]

I only have a Mac. I mainly use Safari, but a tutor of mine helped install Google Chrome on here. There's a fuller version of Chromevox, but I think it's only available on newer Chromebooks. Chromevox Classic--which is what I have--only works if a webpage is loaded but it's pretty good. VoiceOver does work in Chrome but not that great.