HomeBrowsers

Readability for Firefox

Readability for Firefox
Like Tweet Pin it Share Share Email

How many times have you stumbled upon a website article only to be plastered with dozens upon dozens of sidebar widgets, social networking icons stamped all over the place or just other weird stuff that seems to distract you from the main article itself? Even worst, ever visited a website that employed really small fonts or deployed a too dark background with either too dark or too bright text? All of these situations can lead to a painful reading experience. Sometimes, we just want websites to be as simple as possible! No fancy fonts, no moving animations, no funky sidebar widgets, and definitely no social media advertisements! With a browser addon called Readability, readers now have the power to lay the smackdown on heavily clustered websites and focus on what actually matters the most: the articles! While everyone to their grandmothers have a blog these days, not everyone have the same taste in choosing a template layout or have the same ideas on what makes a website attracting.

Some users believe that the more stuff you put on there, the more likely the readers will be attracted and therefore lead to a longer visit time. Many others however, believe that less is more. I belong to the latter group, or at least I try to. While Anotherwindowsblog is not the cleanest looking site/blog out there, I believe that my articles are still very easy to read. It seems that I like to complain about a lot about widgets and whatnot on websites and blogs but that’s not totally true. I understand that many elements of a website are very important but where many users, including myself, have a problem with is when it’s time to actually read an article on that website. We just want a distraction free zone where we can comfortably read the article of interest! Only after reading the article should I take interest on the other elements of the site. For example, using the social media buttons to share the article, reading the recent comments, what are the top articles on that particular site, etc, etc.

UPDATE: Readability is no longer available. However, what they have done has sparked a revolution in that almost every modern browser has a built-in feature to mimic what Readability did. I’m using Chrome along with the Evernote plugin to achieve the same results. Their Simplified Article feature in the extension strips away all elements besides the main article making it a lot easier to read.

Readability Addon

It’s a shame I only recently found out about this awesome browser addon because it is exactly what I have been wanting for a long time. With the click of a button, the article you are reading will instantly be transformed into a simple layout (based on your choices) with all other elements besides the main article text and pictures, stripped away. This addon is so simple yet so brilliant that once you try it, it will be really hard to stop using.

1. There are two ways to install the Readability browser addon. Either as a regular Firefox addon or as a bookmarklet. If you already have many installed Firefox addon’s, you might want to consider to start using bookmarklets to take the load off of the browser. You can down the Readability Firefox addon here. Install it as how you would with any other Firefox addon’s.

If you want to use Readability as a bookmarklet, then visit the main website here. I’ll be using the bookmarklet version in this article but the Firefox addon works equally the same.

2. On the main website of Readability, we get to select our settings and Readability will automatically create our bookmarklet button. It’s pretty self-explanatory here. In the Style section, you’ll want to go over each option and select the layout/theme that best fits your reading style. You can easily see the results of your choices in the example section below. Personally, I prefer the Newspaper style because the font is very easy to read and the layout is as simple as it gets.
The Size setting is also very important. Here, you are allowed to set the text size that Readability will present to you. The good news here is that it doesn’t matter what font size the original article was set to. Once you press the Readability button, the addon will transform the text size and font to the setting you set here!

Last but not least, you get to choose your Margin setting. Once again, choose one that best fits your reading style.

Readability Settings
Readability Settings

If you opt for the “Convert hyperlinks to footnotes” option checkbox, then the links in an article formatted with Readability will be listed at the bottom of the article. You’ll still be able to click on the links in the main article but they will not be highlighted in blue.

In these first two pictures, the setting has been turned on. As you can see the link can still be accessed in the main article but is not highlighted. All of the link references are included at the end of the document.

Here, the option is not set and so the links are highlighted in blue to more easily let the readers know of it. The links will not be listed in the footnote.

Setting Off
Setting Off

If you opt to use the bookmarklet method to install Readability, you’ll be required to create a new bookmarklet button every time you choose to use a new setting. For example, if you chose to use the Newspaper style but later want to use the Novel style instead, you’ll need to re-customize it at Readability’s website, delete the previous bookmarklet button and then install the new one. With the Firefox addon method, you don’t have to go through this procedure as everything is customizable right from the addon itself.

3. Once you have configured the settings to your liking, it’s time for installation. Under the “Add your Bookmarklet” section, you should see the big button labeled “Readability”.

Bookmarklet Button
Bookmarklet Button

Simply drag this button to your Firefox bookmark toolbar area. If you do not see the bookmark toolbar, head over to View –> Toolbars –> and make sure the Bookmarks Toolbar option is checked and then try again. For Internet Explorer, rather than dragging the button, right click on it instead and select “Add to Favorites”. If you get a warning saying that you might be adding a bookmark that might not be safe, simply hit the Yes button to continue. In the Create In drop down box, select the Favorites Bar. Once done, you should now see your new Readability button.

Bookmarklet in Firefox
Bookmarklet in Firefox

4. We now have everything in place to begin using the awesome powers of Readability! Visit an article on any website, preferably one with a lot of widgets or other type of distractions. If you really can’t think of any at the moment, then simply head over to either CNN.com, Yahoo.com, or ESPN.com and find a random article.

Once in the article, hit the Readability button on your bookmarks toolbar and watch the magic of Readability go to work! Instantly, all elements besides the main article itself will be stripped away! The Readability layout and whatnot should be of those settings in which you configured earlier (style, text size and margin).

Here is quick example of a website article that is clustered with all types of distractions:

Here is the resulting article once I invoked Readability mode:

Readability Magic
Readability Magic

Ahh…Much better!

Things to note:

– Readability usually will not work on home pages of a website. You’ll be presented with a error message telling you to land on a specific article page first before using Readability mode.

– Readability does render pictures but only if it doesn’t include javascript. In the example article I used above, the pictures did not appear in Readability mode because the picture required javascript to open.

– Videos such as Youtube will also be stripped away. This is one thing that I dislike about using Readability. If future versions of Readability allowed videos and only videos in the main article and not anywhere else to load, it would be totally awesome. But I understand this might be a disadvantage since some videos, even in the main article, might be considered distractions or advertisements themselves. Maybe if Readability gave us the option to choose whether videos in the main article will load or not?

In the End…

While I totally understand the need for popular websites to load up on advertisements and other widgets and gadgets to entice readers to stay a bit longer, it really is a major distraction when one is trying to just read the article! With the Readability browser addon, users can easily strip away all the other elements of a website and focus on what really matters the most: the article.

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *

+ 6 = 7