Filters for Reading on the Web

Will reading lengthy text on the web ever be as comfortable as curling up in your favorite chair with a paperback? In theory, computers offer some reading advantages such as fast look-up and infinite storage. In practice, conflicting priorities of site design and current display technology get in the way.

For people like me who read hours per day, there has to be a better way. Luckily, there is.

Why Reading on the Web is so Difficult

The paperback novel is the easiest of all formats for me to read and the benchmark against which I compare all forms of reading. Currently, reading text on the web is not even close. Here is how I classify the various reading issues on the web that make it so much more difficult to read than a paperback:

1. Typography choices
   • fonts
   • type size and line spacing (usually too small)
   • colors (too bright, over-contrast, under-contrast)
   • page layout
2. Distracting web page elements
   • ads (blinking text, pictures, animations)
   • branding
   • links
   • site navigation
3. Distracting interface (browser and operating system)
   • tabs, icons and buttons
   • menus and search boxes
   • windows, title bars, and scroll bars
   • status and tool bars
   • pop-up messages
4. Hardware
   • light emitting monitors unnatural for human eyes
   • monitor resolution lower than print resolution
   • reading at a desk for long periods is uncomfortable

Some people address these problems by reformatting and printing most long articles. This is fairly easy to implement and comes close to addressing all four reading issues, though the 8.5 x 11 format is not as good for sustained reading as the paperback book. More of a problem is the act of printing, which uses up paper, ink, time, money, and storage space. This is not for me.

How to Vastly Improve Reading on the Web: Three Filters

If you suffer from distraction, eyestrain, or reduced concentration while reading on the web, the following three filters should help. If you spend a lot of time reading on the web, the combination of all three is best:

1. Readability button from arc90 (or Readable)
2. F11 key on your browser (Windows and Linux only)
3. Small device or narrow screen

Continue reading for more detail on each filter and additional help for widescreen monitors.

Reformat with the Readability button

Before installing the Readability button, your bookmarks toolbar must be enabled. On Firefox Menu: View > Toolbars > Bookmarks Toolbar. Then you can follow the instructions here to install the Readability button. Before installing the Readability button, choose the style, size, and margins you think will be most readable for you. On a vertically aligned, 19 inch monitor, I like Style: Novel, Size: Large, Margin: Medium.

After installing, click on the Readability button in the Bookmarks Toolbar. It will extract the main body text from the current web page, formatted beautifully. There are no drawbacks (except that it doesn’t work on all web sites). If you don’t like the formatting style, delete the button and reinstall with different style, size and margin choices.

An alternative to Readability that (as of March 2011) is faster and provides more options is Readable.

I love the Readability/Readable button approach and use it extensively – with one click, the issues of typography and distracting page elements go away.

Eliminate distractions with F11

There’s a very simple and effective method for Windows and Linux users to eliminate all interface distractions:

Press the F11 key to put Firefox, Internet Explorer, or Opera into full screen mode. Read.

F11 works terrifically on small screens, especially on a narrow display. F11 completely gets rid of all interface clutter from the browser and the operating system. If used in combination with the Readability button, it cleanly and easily takes care of the first three web reading issues. Just click Readability then press F11.

F11 used alone does not always work so well for reading on large and/or widescreen monitors. It does work well for sites like FilterJoe where the main page width is fixed and there is a dull colored background color outside the main page. But most web sites are not designed this way. Pressing F11 may cause text to stretch wide, may expand a distracting background, or may cause the menu or other elements to slide far to the left.

UPDATE: The rest of this section is no longer necessary. Readability now fixes the width of the text instead of the margin.

For F11 to improve reading on a widescreen monitor, you’ll want to create a second Readability button designed to work in combination with F11. Here’s how:

1. Right click on the Readability button you installed
2. Choose properties
3. Rename to something else, perhaps “read” in small letters
4. Go to arc90’s Readability site again, here
5. Choose Style: Novel, Size: Large, and Margin: Extra Large
6. Drag this Readability button to your toolbar
7. Rename it to something else, perhaps “READ”, that will help you remember that this version of the Readability button will produce very large type with very wide margins.

Now click the new button you created followed by F11. The browser will fill the screen and you’ll see very large text with a very wide margin.

While the above procedure works, a preferable solution would not require jumbo fonts.

Effectively using large monitors is a topic in and of itself with benefits far beyond reading. After much testing, I’ve concluded that it’s very hard to eliminate distractions on large, horizontal wide-screen monitors. Thankfully, large monitors are now available that can rotate into vertical position, which is the best monitor setup to reduce distraction.

Use a narrow screen or better yet a small device

Many people now use large, wide monitors with their desktop computers. As described in the prior section, such monitors are not very well suited for reading lengthy text. A vertically orientated monitor is a big improvement, and is what I recommend for online reading at a desk. Those of you with a large or widescreen monitor can hook up a second, smaller monitor to your computer for reading. Alternatively, a second computer with small monitor can be used.

The first two filters work well with any device whose width is 1080 or fewer pixels. Unfortunately, this still doesn’t take care of the fourth reading issue, “Hardware.” I’m not yet aware of a hardware solution as simple and effective as the filters I’ve mentioned so far.

What I would really like to see is all four reading issues go away with one click. Can someone please make the following a reality?

Go to web page. Click. The text appears on a piece of E-paper (Electronic Paper), well formatted for reading. You can carry it with you and therefore read it anywhere.

There are a number of small, portable devices that are superior to reading at a desk, but they all have shortcomings. Briefly expressed, here is my opinion regarding current portable choices for reading:

• E-book readers by Sony and Amazon–easy to read but slow, restricted web access
• Nokia tablet–too small, no rotation
• iPhone and iPod Touch–great interface but even smaller (UPDATE: the new higher resolution display makes the iPod Touch 4g great for reading)
• Netbooks–currently best–see below

Until a better device is released (like my E-paper idea or the oft-rumored Apple tablet), the best full computing experience for reading is a 9 or 10 inch netbook, in my opinion. For example, owners of an Asus EEE PC netbook with EEErotate and the Readability button installed, can read a web site as follows:

1. Click on Readability button
2. F11
3. Control-Alt-RightArrow

The last step rotates the screen 90 degrees, which means the text display is similar to a book. To return to the original state:

1. Control-Alt-UpArrow
2. F11
3. F5 (refresh)

The following screenshots show a New York Times article. The first image shows the article on a 24 inch monitor before any filtering. The next image shows two screen shots from an EEE PC 1000h netbook, after all three filters are applied.

 

This combination is not as good as a paperback book. The netbook is far heavier, emits light, and takes three actions to get into a highly readable format, and another three actions to return to the regular browser window. But I’ve found it to be the simplest and most effective method for using a computer to read lengthy text off the web at this point in time.

The Future

Thanks to rapid innovation on several fronts, reading on the web could soon approach the experience of reading a book. E-paper displays are as easy to read as regular paper and are perhaps a year or two away from mass adoption.

While devices like the Amazon Kindle and the Sony Reader already use E-paper, they will likely remain a niche product if data access and connectivity continues to be purposefully restricting.  (NOTE:  Kindle connectivity has improved enough since this post was written that I bought one and wrote about it here)

Safari on an iPod Touch combines unlimited web access with a great interface for reading on the web. If Apple comes out with a moderately larger model, I think it would do for reading what the iPod did for music. If my print-to-E-paper idea becomes reality, that would be even better.

I know there are many other tricks out there to increase readability and reduce distraction. I’ve found most to be excessively complicated or not effective enough for the average person. Be sure to let me know in the comments if you’ve found anything as simple and effective as Readability, F11, and using a small screen.