If you’ve ever read a long article online, you know that reading on-screen is not easy on the eyes. Some web designers do a good job at making their content readable. Some, well, let’s just say they want to keep to traditions and keeping simple.

Let’s say you have to read a long article on one of those traditional-looking web pages. You don’t have to subject your eyes to the torture of reading tiny fonts on a stark white background. We’re going to save your eyes using bookmarklets, which are bookmarks that use Javascript code to do some task instead of going to a page.

The bookmarklets in this post will change the look of the web page you apply them on to something that is more readable and easier on the eyes. Some of those bookmarklets can be customized to your liking, e.g. in terms of background color. So let’s start…

We’re going to use the Wikipedia entry for “Blogs” to test the bookmarklets.

 

1. Readability

In my opinion, the best of the bookmarklets I mention in this article.

Readability is simple to use. You just go to its website, you customize how you want the website should be changed in terms of style, text size and margin. Then you drag the bookmarklet to your browser’s Bookmark bar or menu for example. Then to use it, you just click on the newly-added bookmarklet and watch as the magic happens.

Why do I think Readability is the best? Because it gives fantastic results. You can what Readability did to our benchmark. Hopefully, you’ll find the “after” more readable. (I’m using the Inverse style of Readability here)

2. Readable

Confusing huh, Readability and Readable? Yet they are two different bookmarklets.

What I like about Readable is that it’s very customizable. Unlike Readability’s 3 customizable parameters, Readable gives you a dozen or so to play with. A major difference is that Readability got rid of the right sidebar, while Readable kept it, and formatted it. Also, I’ve tried to make Readable give a look like Readability’s for comparison. You’re free to adjust it, for example margins if you think the box is too narrow. Check out the result:

3. Purifyr

Purifyr is meant to format web pages into simpler versions for automatic parsing. But it works just as well for humans to read. The catch is, it’s not really meant to “purify” each and every website that you had to it.

They have a couple of demos on their website, which simply passes the website URL as parameter to their script. So you can just replace their passed links with your own to have your websites purified. It’s kind of hackish, and I don’t really know how long this trick will work, but in the mean time, enjoy. If you want a bookmarklet that does this link-replacing thing for you, just drag this link to your bookmarks bar or menu, and you’re done. When you want to clean the page you’re on, just click the bookmarklet and Purifyr will do the job for you.

Below is what a purified page looks like. Not very customizable, but the result is satisfactory.

4. Clippable

Previously called Readability 2, and as the author says, he “unceremoniously lifted code from the original Readability”, Clippable is a modification of Readable, with some added features and enhancements, such as the ability to use keyboard keys to adjust features. For example, using the left/right arrow keys, you can change the applied style, and Escape reloads the original page.

I have to say, Clippable didn’t work for me on Wikipedia. It did change the style, but for some reason, the arrow-keys were not working. I also tested on a couple of other sites, such as a Google search result page and Engadget. None worked, except the Clippable site itself responded as it should. I’m including the screenshot, if you’re interested. I’m using the darker style, after a couple of arrow-key presses.

5. TinyRead

This one is a bit… weird. In my opinion, it doesn’t make things easier on the eyes. Actually, it’s meant to format web pages for better reading on mobile devices. It just simplifies pages, removing ads and other extraneous content. TinyRead allows you to add the page you cleaned to your Read It Later list too, if you use the service.

Give it a try if you see that’s what you want. Result is below. Notice how the content gets stuck to the left side of the screen. If you have a large screen, it’s quite a problem. Screen space lost is never good.

Bonus!

You can find an interesting set of Bookmarklets that enhance page readability on this site. The more interesting ones are Zap Colors, Zap Style Sheets and Zap Cheap Effects. Take that, blinking monstrosity!

We are done! Now you have the means and know-how to protect your eyes when reading online. I’ve only listed bookmarklets here, but there are certainly other ways to change the look of web pages such as the GreaseMonkey addon and Stylish scripts for Firefox.

A word of warning before we end. Some bookmarklets out there may have malicious intents, so only use those from sites you trust.

That’s it for this article. Thanks for reading. If you have any tips, don’t hesitate to comment. 🙂