Scott Hanselman

Two Must-Have Tools for a More Readable Web

August 28, 2010 Comment on this post [61] Posted in Tools
Sponsored By

Here's how most folks use the Web. You get a link in email, Twitter, Facebook, IM, whatever and you open it in a new tab.

Instapaper - Google Chrome

Then, at some point in your copious free time, and possibly while reading other more pressing things, you'll read these 43 tabs, right? Even better, some of the articles are 8 pages long so you'll load up pages 1-4 and 6 and you don't even know why.

Then, maybe your browser crashes or your system reboots or something locks up or you get confused as to why you wanted to read that in the first place.

This is not cool and I refuse to use the web in this way anymore. Here's what I do.

Consider this new workflow. You'll either Read It Now or Read It Later.

First, Reading Stuff Later

Workflow Flow Chart - sorry if you are blind. There's text about this soon.

Whenever you find something long that you KNOW you want to read but you just don't have time now, don't open a tab. Save it to Instapaper. I've got a bookmarklet for Instapaper in my bookmark bar on all my computers in all my browsers. This important, hence the bold.

image

If it's not setup on all your machines in any browser where you might find content, you'll fall back to old habits and not use it. Take the 10 minutes and do it. The bookmarklet even works from within Google Reader. Anywhere you find stuff you want to read later. You can even have your Instapaper queue sent over to your Kindle if it makes you happy.

Example Workflow

Lets say I see this article by Phil Haack tweeted. I visit the page and while it looks interesting, he's SO loquacious and I'm busy now. I'll read it later.

We’re Not Paid To Write Code - Google Chrome

I'll click "Read Later" in my bookmarks bar, and I see this notification.

image

Fast forward some hours. I've got time and I've collected a few interesting bits that I'm looking forward to reading. I visit Instapaper and see this:

Instapaper - Google Chrome (2)

There's the articles I've saved lately, with new ones first. It knows what I've read, what I've starred and what's been articled.

Here's an interesting bit, while I can click the link for Phil and visit his site, I don't. I'll click "Text" for Phil's article using a filter. The Instapaper filter is a lot like Readability (more on that later) in that it removes the non-content parts of the article. It also adds a little bar at the top where I can select between readable fonts, change the width, font size and line spacing. Everything here is focused on text and making the content I'm consuming more soluble.

We’re Not Paid To Write Code - Google Chrome (2)

I can of course also read from my phone (I'm working on a Windows Phone 7 version) or whatever device makes me happy. It's the same queue.

Instapaper in iPhone Instapaper in iPhone

Second, Read It Now - with Readability

Sometimes I want to read something right now, but the site I'm looking at is just too busy. Recently I wanted to read this article on overclocking my motherboard. However the site looked like Las Vegas.

I have another bookmarklet called Readability.

Introduction - Gigabyte X58A-UD9 Extreme Motherboard Review  [H]ardOCP - Google Chrome

There it is...

image

And as Rob Conery likes to say pressing it "is like closing the car windows while driving on the freeway."

Introduction - Gigabyte X58A-UD9 Extreme Motherboard Review  [H]ardOCP - Google Chrome (2)

I find that the simple introduction of these two tools, Instapaper for Reading Later and Readability for Reading Now not only allow me to consume and collect MORE information than before, but I'm slightly less stressed out while I'm doing it. Goodbye 43 tabs.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
August 28, 2010 1:47
+1 on Readability. It keeps my eyes from being distracted and is a must-have for reading longer articles online. Works with 95% of the sites I use. Try the black background with white text.
August 28, 2010 1:47
I read blogs almost exclusively through instapaper now but the readability link looks like a real gem. Thanks!
August 28, 2010 1:50
Interesting. I use Read It Later (which has a nice application for my iPod Touch), and whenever I want to read something later, just press the corresponding icon (beside the nav bar, where the RSS sign stands, in FireFox). I've used quite a bit Readability, but have not been able to insert it in my workflow, maybe I should do as you suggest.

Ruben
August 28, 2010 1:52
Awesome Scott!!! I have been putting items to my desktop when I wanted to read them but couldn't just then.... this is a great way to solve this!

Thanks for the post!

Kevin
August 28, 2010 1:52
I tend to do a triage pass through my open tabs - closing the ones I don't want, and then use Chrome's "Bookmark All Tabs" (into a folder). -- Then later open the whole folder with "open all bookmarks" or separately. Chrome syncs bookmarks across machines - including the folder. I'm sure I'm missing something, but I don't see any less work to use Instapaper.
August 28, 2010 1:57
Nice! I've been using instapaper along with my Kindle for a while now. I'm excited to try out Readability and your upcoming WP7 app.
August 28, 2010 2:06
Hmm, so far I think I like the Instapaper Text bookmarklet more for "Read it now". Readability failed on my first trial run when it got rid of the images on http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx
August 28, 2010 2:28
I use a combination of Google Reader and ToRead/ToWatch/ToCode/ToBlog/ToBuy folders in Google Chrome. The folders get synced to all of my other computers, so they work well for saving pages for long term, but I do sometimes have issues where I start reading something from Google Reader and then get side tracked and never come back to it. I may try using instapaper to fill that hole.

Also, while 43 tabs may be a bit much, I find that I can comfortably work on a dual monitor machine with a dozen tabs open on each monitor. Then you just have to optimize your tab management tasks: Opening, closing, re-using, re-arranging, and tab switching.

The single most important thing that I have done in the last few years regarding productivity is buying a better mouse with more buttons and configure those buttons specifically for my most common application tasks. I can currently perform all of the above mentioned task as well as Zoom in and out and perform multi-select all using buttons on the mouse. You can't imagine how quickly you can open up, read, and close tabs using this kind of a setup. I'll open an entire album's worth of pictures on facebook with each image in it's own tab (saves waiting for image load time), then flip through them by swiping the scroll wheel left/right or pressing the tab-close button on the mouse.

I really need to make a Youtube video showing how much quicker this approach is, but I just haven't had time to do so yet. Some day!
August 28, 2010 2:40
Now even more iPhone content for bathroom time.
August 28, 2010 2:48
I use Xmarks for this. The great thing is, I can bookmark a link at work and read it at home later or vice versa. And whereever I am, I can access my 1000+ bookmarks.. Just love Xmarks ;)
August 28, 2010 3:38
Rock on Scott!

Quality of your post: 9 out of 10

Hope you are recovering well, who said coding wasn't physically taxing. ;)
August 28, 2010 4:51
Hey Scott, interesting services. I might check em out.

I work the same way as you and devised a way to do it on google reader with no mods. All the same capabilities as far as I can tell. Welcome to email if you'd like some details.
August 28, 2010 5:07
Nice bookmarklet. I often end with a ton of "Pending" folders, full of "Pending" stuff to read, in the Favorites sidebar of the browser (IE in this case).

"Pending" folders and stuff which, obviously, I NEVER get managed to read...
August 28, 2010 5:08
That's about how my current reading workflow is set up, except I use the Instapaper iPad app for reading later. Being able to do that has changed how I approach reading online. Between the portability, offline reading, and how natural it is to focus and read efficiently on the iPad, I can't recommend it enough.

You might want to check out the Instachrome extension. I like it better than the bookmarklet because it will (optionally) automatically close tabs after successfully saving them for later. Having it quickly remove the distraction for me is nice.

I do worry about the long-term implications this approach has for advertising supported sites though. If *everyone* were to use Instapaper or readability to read our sites, who's would pay the hosting/maintenance bills that advertising currently covers?
August 28, 2010 5:16
This workflow is modification of workflow from Getting Things Done methodology by David Allen You should add.
August 28, 2010 5:17
The official iPhone Twitter app has a "Read Later" button for those tweeted links that saves directly to instapaper. I only check twitter on my phone so this really helps me by saving off all the interesting links to read at a later time on a much larger screen or on the Instapaper app.
August 28, 2010 5:30
Oh, and Readability doesn't work on this page :)
August 28, 2010 7:31
Great article with a great explanation of the problem and the solutions :)

but i like alternatives to everything .. so wanna add my $0.02 ... hope you dont mind

1. unlike instapaper (which is for articles), memonics lets you select section of a page, if you wanna finely select stuff...including videos and images as well .. instapaper is a more modern version of read-it-later.

2. iReader is sometimes better than Readability , but its only for chrome and firefox

and well obviously old players like Zotero, Diigo and Clipmarks deserve some love as well .. :)

Cheers
August 28, 2010 8:35
Great article, my "Input" bookmarks folder has become a piling mess just laughing at me b/c i just keep shoving all my pages to read in it. And its all like "HA HA! you'll never read any of these!" Well F U Input folder! Sorry, that was a bit of a rant..

Anyway you should coin this "Getting Things Read" since you adopted the GTD 2 minute or defer rule.

Great post, thanks much, bookmarklets in place and sync'd!
August 28, 2010 11:47
Great Timing! Thanks for the tips. I just setup instapaper the other day in attempt to control chaos.

August 28, 2010 13:20
This article spent 3 hours in a tab before I read it.
;-)

Thanks!
August 28, 2010 13:21
Hi Scott,

thanks for this hint! ;-)
Do you know about this Firefox, Iphone Addon "Read It Later"? http://readitlaterlist.com/
It's a nice one!

Cheers
August 28, 2010 13:30
It's weird that I remember, a couple of years ago, a couple of project from the Live Labs (Thumbtack and Listas) that were doing the same of InstantPaper, actually in a little better and more powerfull way, more like an online OneNote. I really found them usefull, and I wasn't the only one. Is it possible to have those projects back?

August 28, 2010 15:25
+1 for Read It Later (http://readitlaterlist.com/)

Great web app and has plugins and apps for everything I need
- Chrome Plugin
- iPad app
- iPhone app
- Google Reader

Pretty much has plugins for all browsers and major mobile devices too though and the premium digest feature is pretty awesome on iPad!
August 28, 2010 21:58
[As always] your tool selection is spot on. I'm using Instapaper now for a while. For Safari you can find a marvelous plugin called "Instapaper Beyond" (http://brettterpstra.com/instapaperbeyond) that enables full keyboard control for Instapaper plus some other features.

However I'm still missing an easy, fast and / or elegant way to transfer the more readable and reduced Instapaper-view of a web-site to Evernote. For me a perfect solution would be a script that adds content of a Instapaper folder to Evernote and empties this folder afterwards....Unfortunately I haven't found anything and my programming skills are insufficient.
August 29, 2010 1:43
Great tools scott... great for managing information overload
August 29, 2010 3:13
Fantastic post. I use read it later (readitlaterlist.com) on Firefox/iPad. What I like about read it later more than instapaper is the full text searching on current and archived items on read it later.
August 29, 2010 12:47
In case anyone out there with an Android-enabled device would be interested - I'm an author of InstaFetch, the Android application which combines two services mentioned in this post.

InstaFetch integrates with Instapaper.com to sync saved articles, allows adding articles to Instapaper directly from the device. It also fetches those articles to the device through the web service which implements the Readability algorithm. For that purpose I ported Readability to C#. The port, called NReadability, is free and open-source - you can grab the code from Google Code.
August 29, 2010 18:06
We've been studying reading patterns and habits and I would like to suggest adding Sentimnt to the list of useful tools as well.

This way you get better retrieval success when you're recalling articles as well as not needing to save the reference for articles necessarily.
August 29, 2010 18:07
Shameless plug: Anyone interested in using Instapaper with their Kindle should check out Wordcycler, which syncs individual articles to your Kindle over USB on Windows:

Wordcycler lives in your tray. When you connect your reader via USB, Wordcycler fetches your unread Instapaper items, saves them on the device as single articles, and (if you want) ejects it. All automatically and in seconds.

When you finish reading an article, delete it from your reader, and it will be archived on Instapaper.com the next time you sync. And any articles that you read and archived on Instapaper.com in the meantime will be deleted from the reader as well.


Best of all, it's free.
August 29, 2010 23:11
43 tabs ? I've got like 250 running on Firefox now :D
If Mozilla knew about that, they'll block all my complains about Firefox crashes :D
I use something similar called Read it Later but I'm still not used to it, and I'm also planning to use Firefox 4's Tab Candy when it's released :)
August 29, 2010 23:15
Thanks! I've been using delicious to make a pseudo "Read Later" workflow but this is so much better. The readability feature is going to be used every day.
August 30, 2010 0:44
Thanks some good stuff
August 30, 2010 2:25
I like instapaper, but it drives me crazy that the free version doesn't remember my position between sessions.
August 30, 2010 4:43
This is good stuff! I'm keeping a tab open with this right now for later perusal!
August 30, 2010 5:32
I'm working on a WP7 read later application too.
August 30, 2010 5:56
thanks, i have been thinking about an app like instapapa for a while but never got around to doing it. This shall be used a lot
August 30, 2010 9:11
I haven't tried Instapaper, but for me simple browser bookmarks work fine. When I want to read something later, I just bookmark it in chrome and since my account is synced, I can read them later on another PC. I don't see Instapaper doing much more than that.
August 30, 2010 9:42
.... or, you could just use the built-in "Reader" in Safari 5. Unless you're all using Windows? In which case, no wonder you're having productivity issues.
August 30, 2010 12:43
I use evernote for all of the above...
August 30, 2010 13:11
I like them too but I have been using @Temp and @Unread tag with delicious and happy with those tags. Using @ is a trick that I have learned from Getting Think Done book when organize MS Outlook category, it make those tags always on top of list.

I also limit myself from opening no more 15 tabs at a time.
August 30, 2010 22:07
Thanks Scott, this post really hits me at the prefect time. I've grown weary of most of my iPhone games, have multiple times per day that I could spend a few minutes absorbing content, and don't currently have a good method of storing that content easily and in a usable format so that I can quickly access it during those times. Reading your post and checking out Instapaper, this looks like the perfect solution for me. I bought the iPhone app in hopes that spending a few $ might help force me to get it into my routine.

I also really liked the Readability bookmarklet as well. That one is definitely going on all my browsers.

The reference to www.43folders.com was well played.
August 30, 2010 22:13
Reader in Safari *is* the Readability Bookmarklet. Apple took the OSS app and put it into Safari.
August 31, 2010 10:56
I found Xmarks + Firefox with a "TO READ" folder to work quite well, it gives the option to share your stack with other people that doesn't scavenge the news sites. When I am done reading the articles drop into "READ" for other people to know that I've read it, understood it and recommend it to others.
August 31, 2010 15:36
Wouldn't it be nice if Delicious and Instapaper merged?
August 31, 2010 17:24
I needed this when I was reading this blog post! :)
August 31, 2010 22:17
I was going to read this article... but I just opened it in another tab.
September 01, 2010 0:40
Another neat use case for Instapaper is emailing information to your Instapaper account. From time to time I get email that isn't urgent, and I would like to read when I have more time. Things like newsletters for sites without RSS, but really it could be anything.

I configured a Quick Step in Outlook 2010 that will draft a forward of a message with my unique Instapaper email address as the recipient, and then it will delete the original. I've also got some Outlook rules that basically do the same thing for items I receive regularly.
September 01, 2010 2:39
Scott,

Have you ever tried out netvibes? Don't worry about the dashboard feature (which is nice) but go straight to the Reader View. It has a "read later" feature that is great for flagging those feeds you mentioned above. They have a mobile version of their app as well. I've been using it for a long time now and it makes for an excellent RSS reader on multiple platforms.
September 01, 2010 13:57
Instaright! - Firefox addon for Instapaper https://addons.mozilla.org/en-US/firefox/addon/13317/
September 01, 2010 19:51
This is a really neat concept. All too often, I end up coming across something that I know I will probably enjoy reading, but simply don't have time for it. Generally, these end up being bookmarked for later browsing, but probably 95% of the time, I never come back to them. Seems like this could help me break this pattern...
September 05, 2010 13:22
I found instaright quite useful instapaper firefox addon and move it has new features like bookmarking part of page.
September 21, 2010 11:36
No offense but sometimes my jaw just drops in amazement when I see the convoluted solutions people go to so that they can get away with using their browser in the most archaic way as possible. Example:

"Then, maybe your browser crashes or your system reboots or something locks up or you get confused as to why you wanted to read that in the first place."

Good God, you still get that? In 2010? I am an user who only starts a new session of tabs when he install the browser. Period. That usually means that I have at any given time at least 40 open tabs (that's called a "light load" in my case, and I have quite an old machine - haven't changed the CPU for 6-7 years).
There is no fear of browser crash. Whenever that happens (too rarely to remember) I simply get a dialog where I have the (default) option to resume my last session.
Whenever I restart (close and open after a month) the browser, the default behavior is to resume my previous session, no questions asked on exit or open. I have an integrated email and rss client. Basically, just about anything that is web-related is available to me in my browser.

Readability. That's easy. Right click on the tab bar and select tab bar placement - left. That should be easy enough to do in any browser. Additionally make it wrap to multiple lines so that you see every tab. Where is the problem, then? Because I don't see what's wrong with this model that you had to resort to UML diagrams.

If it's resource consumption you're worried about then you really should think about how on Earth my browser easily handles 40+ tabs (I tried the same thing with Chrome, sadly it could not cope with 10) on an old machine (Athlon 2800+ and ~1024 GB RAM). Because I'm quite sure you can do a lot better than my machine.

I'm not trying to start a flame here or be a troll; I seriously want to understand why you try scratching you left ear with your right foot's toe.
September 21, 2010 11:41
Tomita, thanks for your comment.

Have you tried these solutions? Have you tried Readability? Pages ARE more readable with less crap on the page. Moving the Tabs to the left doesn't make a page more readable.

With regards to InstaPaper, perhaps the browser stability thing doesn't resonate with you and Flash never crashes your browser. The real value is that I have two laptops, two desktops in multiple locations, an iPhone and an iPad. If I open 40-80 browser tabs on one machines where those tabs exist only so that I can "read them later," how can I read them later in any other location? Also, why are you keeping dozens of tabs open, using memory and CPU cycles with their ads, javascript and images, when you literally just want to read them later?.

As I say, perhaps the stability argument doesn't work for you, but I find it silly that you're dedicating RAM and CPU resources for hours on end so that you might look at a tab later. Instead, consider your workflow could be improved in a small way by adding a "inbox for long format reading."
September 21, 2010 16:44
My mistake - I have no objections to using Readability, it's a neat tool. You can probably achieve a similar effect by using a custom css stylesheet applied to the whole website. My first post referred to "readability" as in "clutter due to too many tabs", such as seen in your first screenshot.

My objection was to saving your pages for later reading (on the same computer, to be more specific). I didn't try InstaPaper (although I did visit the site and understood the concept) because I don't believe it's worth the hassle for a single-computer scenario.
The problem with "to-read-later" links is the 'out of sight, out of mind' principle. To avoid it, you'd have to remember that you have something to read or visit instapaper on a daily basis. I fail to see how my workflow would be improved by including an extra page in my daily browsing routine.

If synchronizing tabs would have been an issue for me I would have written an application (we're developers, after all) that would sync session files between machines (my browser uses easy-to-parse text files so it's a no-brainer), but then again - this might be over-kill as well (not a bad idea, though).

As far as ergonomic are concerned, I have a 22-inch LCD at home and at work so the screen is already wide enough for me not to care if I have three columns of tabs. Now, when I had a 17-inch CRT display (might as well been a laptop) what I did was hide the tab bar and use ctrl+mouse wheel to scroll through tabs. Worked great.
I'm mentioning this because I think left-side tab bar should be the default for people who have a lot of tabs open; it's very annoying to have a single line of tabs and not being able to distinguish one from another. Put tabs in columns, each tab with its title clearly visible - there's a productivity boost right there.

Resource consumption - I don't feel a significant speed decrease because of the tab count (truth be told, I avoid Flash intensive pages and I block most ads I can get my cursor on), and when you're not using your browser the 'minimize' function should do the trick, just like in Visual Studio. Minimize the app when you're not using it and the memory consumption drops instantly. Consuming CPU cycles and RAM is really not an issue; the user's time (having to bookmark/reopen pages) is the issue. If I don't feel my computer is slowing down then I have no trouble with my browser using up RAM (I don't think the CPU consumption is that great, at least from my experience).
Plus, in this day and age I think browsers optimize away tabs that are not currently viewed (or haven't been for a long time); at least what I'm using does, as far as I know, and so should most of the modern products on the market.

Also, being a developer I have a lot of documentation pages open and I hate having to look them up each time (ok, they're not really the kind of pages you want to read later and the close, you'll keep them open until you're sure it's not worth the trouble to keep them open).
I also have pages such as this ( http://www.badassoftheweek.com/list.html ) or this ( http://www.paulgraham.com/articles.html ) that I don't want to add to speed dial because I'll eventually finish reading what's on them but I don't put them in bookmarks because I don't want to forget about them. So I just keep them open (no huge CPU/RAM consumption there).

I concede that if you have many platforms/browsers and you want some links shared between them then your solution would be the one to choose but for a simple setup (single browser, one machine, no obvious need for sync) I think it's overkill and may run the risk of forgetting to read something you were eager to - whereas if the tab is staring you right in the eyeballs you will clearly see it. If you want to save a page for later reading then just leave the tab open and arrange your UI/tabs so that there's no clutter. Block ads and all other crap, create a custom css for sites that you always want to keep readable. I think that would work just fine.

But I agree with the multiple devices scenario, that's probably the easiest way to do it.
September 21, 2010 22:01
Hi Scott,

thanks for posting about these tools.

Is is by any chance possible that instapaper doesn't work on your own blog? I tried using it on your post abot exception handling and it didn't work for me.

Best regards,
Timo
November 18, 2010 14:17
I really like your blog..It always something different and interesting keep posting more...Thanks
December 21, 2010 5:48
I don't really get into using tools like instapaper or readitlater. I find it's quite simple that you create a folder named "later" and access right in your browser. I'm sure that it costs less time.
And I agree with you that readability is unmissable bookmarklet, it's so great :)
December 23, 2010 3:04
This is exactly how I operate. Except I use ReadItLater instead of InstaPaper and am trying to switch to Historious for bookmarking but am having a hard time letting go of Delicious style tagging.

Love Readability!

Thanks! I'll be forwarding this to others when they ask what ReadItLater is.
April 07, 2011 13:50
I've never used ReadItLater but I will certainly look at it on your recommendation.

I do, however, use Instapaper because I don't have internet connectivity when I travel on the Underground here in London. Unfortunately it seems that it doesn't work with your remarkable blog though Scott! I've no idea what Instapaper needs to pull out the content of the page, but is there any chance you could look in to it? Otherwise I'll have to wait until 2012 to read your blog on the way to and from work, when we are promised that the mobile networks will start to install on the underground network.

Love the podcast too by the way. Keep up the good work. We need it!
April 21, 2011 0:03
good advice and good article, thanks

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.