De-clutter the Web With the Readability Bookmarklet

Arc90 ReadabilitySometimes it’s nice to read an article without distractions. SitePoint’s design features links, forms and adverts but I personally think its layout offers good readability. Unfortunately, there are many sites that give the impression their advertising is more important than their actual content (I mention no names — they know who they are!)

Brooklyn-based web agency Arc90 describes the problem:

Reading anything on the Internet has become a full-on nightmare. As media outlets attempt to eke out as much advertising revenue as possible, we’re left trying to put blinders on to mask away all the insanity that surrounds the content we’re trying to read.

It’s almost like listening to talk radio, except the commercials play during the program in the background. It’s a pretty awful experience.

Fortunately, they have also produced a solution: Readability.

Readability is a browser bookmarklet that makes reading web pages simpler and more enjoyable. Those using small screens, such as netbooks, could benefit the most because the system strips the superfluous information and shows the main content in a single column of easy-to-read text.

To use it:

  1. Visit the Readability page.
  2. Choose your page style, text size, and column width (a preview is shown).
  3. Drag the Readability link to your toolbar.

You can now surf to any page and hit the Readability icon to extract and view the main text. It’s not perfect, but it works most on most websites — I find myself using it increasingly often.

As a side note, the bookmarklet also provides an interesting assessment of web page accessibility. Certain development techniques can cause content to disappear; if Readability doesn’t show the page text, it may be that screen readers or Google will have trouble accessing it too.

What do you think of Readability? Does it work on your favorite sites? Will you use it?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • just_passing_by

    Gave it a quick spin. All I can say is: Nice try, BUT pretty useless at the moment. From http://www.spiegel.de/ it picked an article right from the middle of the page (chose the same in both FF and MSIE, I have no idea why it grabbed this particular one). Upon opening that article with Readability the links at bottom were gone. Does not work in Seamonkey (in conjunction with the – unfortunately discontinued Multizilla extension simply the best browser). Might prove pretty useful when usable.

  • http://www.optimalworks.net/ Craig Buckler

    Mmm, that is unusual, although home pages can have an unusual structure. Also, it does look for elements like <div id=”content”>, so German equivalents may not be found. However, it does work better if you view individual articles.

  • http://www.curtismchale.ca curtismchale

    This bookmarklet is great but I really think it’s up to the site owners to make sure that the reading is experience is just that ‘an experience.’ In a site redesign I’m working on we’re going to remove all of the sidebar clutter when you click to read a single post. It will all be stashed off to the side with jQuery and navigation can be shown on hover. I personally hate the reading experience of google reader and honestly the reading experience of sitepoint leaves much to be desired as well. Lots of crap in the sidebar with moving pictures that draw attention away from the item I’m trying to consume.

  • alydarus

    I have to say the web experience is going downhill. Tactful, non-moving advertising has its place, BUT I just ran into a newspaper site tonight that literally “drove a tractor” left-to-right across the screen and over the article I was trying to read to reach its ad destination in the right column. Maybe if i had broadband if wouldn’t have stalled over the content I was trying to read, but REALLY!

    I don’t care how much the ad client wants something like that. Any company willing to let THEIR content be completely obstructed by an AD must be desperate. Doesn’t bode well for the actual site owners at all. I won’t go back there.

  • Wardrop

    Credit to the Readability developers for not only making a a cool and useful tool, but for making it accessible in such a unique, intuitive way. A bookmark containing javascript is genius I think.

  • Tarh

    I need NoScript, AdBlock and Greasemonkey. What I don’t need is more bookmarks. I had forgotten that the web had ads until you mentioned it.

  • EPB

    @curtismchale

    Chances are that client paid upward of $60-$70 per thousand impressions for that ad. Newspapers pay a lot of money for their content, so they’re still trying to find a good way to make money off of it. Part of this will be experimentation with different kinds of ads online. They should have provided a close button or something though so you could get it out of the way.

    It wouldn’t surprise me if these types of ads became less frequent as time progresses. The only way they would grow more frequent is if advertisers were seeing a return on those types of ads.

  • Pavvo Vitunen

    If a page is really horrible to read or worse yet, doesn’t have proper print stylesheet to isolate theain article or body of the page, I use Aardvark add-on for Firefox. Once you learn the hotleys, it is amazing. You can either isolate sections or remove sections. It is also a great development tool allowing you to quickly and visually see all your diva and sections.

  • http://www.brothercake.com/ brothercake

    You can often get a similar result just by viewing a page in “print preview” mode – since print stylesheets tend to be content-focused, you often find that by doing this you effectively remove all the clutter, ads, navigation, and so on.