siteFlow: turn websites into slides July 28, 2009 A browser application packed with awesome

Summary

A browser within your browser.
siteFlow is a cross-browser tool that enables you to browse multiple pages (i.e those featuring next/previous buttons, like Google’s search results) and archived web content, faster and with less effort than the usual one-page-at-once browsing. It adds an extra layer of interactivity (literally and figuratively) on top of web pages. Turbocharge your web reading.

Scroll down to the bookmarklet link to get going, but don’t miss all the goodness preceding that.

Click here for a quick demo.or drag link to your bookmarks toolbar

..so, what is it?

Whether you are reading your favorite blog, sifting through topic pages in a forum, a news site, a photo gallery or google result pages, you have — with reasonable certainty — run into it somewhere on the internets: pagination of web pages: process of arranging content into sequence of pages, where you click a link to access page #2, which then contains a link to page #3, and so on.. they come in all shapes and colors:

Get more of the web into your veins, faster

Most of the time, pagination is a necessary evil, the alternative being an endless scroll of content on a single page.

This is a different – more graceful – approach to the way archives and multipage web content is browsed, and is more of a browser-plugin than a simple bookmarklet. It is built with freshly squeezed javascript, sizeable pinches of CSS and big bowl of elbow grease, served to help you kick your browsing into higher gear.

According to the usability guru, Jacob Nielsen, 79% of users scan pages rather than read them (if you are reading this sentence, you are a rare breed, congratulation, man). To scan pages even faster, this application offers headlines at the top of pages, for enhanced readability, large headlines are at hand, too.

Install bookmarklet

To use this tool (bookmarklet), drag the link below onto
your bookmarks toolbar, or right-click on link and bookmark;
siteFlow

Tested and works in the following browsers:

Firefox 3 Chrome Safari 3.2 Opera 9

(Do you see IE up there?, me neither… help me work out why it doesn’t work in IE)

 

To see it action, go to one of the following pages I frequent and
click on your shinning new bookmarklet on the bookmarks toolbar!

Features

  • Works on websites where higher page number means newer content (mainly photo pages and comic strips) and pages where higher page number means digging thru the archive dumpster for old goodies (news sites, blogs, et al)
  • Recognizes continuous pagenumbering (1,2,4 … n) as well as offsets (i.e. multiples of a page number : 20, 40, 60 … n*m)
  • It is fairly generalized, so it recognizes pretty much all standard paging variables and formatting variations, both static and dynamic URLs.
  • Jump back and forth between headlines (see next section for shortcuts) to quickly gain an overview of the site. You can conveniently customize targets using tags (H1,H2..) or any other css-selecter you see fit.
  • Lazy one-hand browsing with keyboard shortcuts

Look ma, no hands mouse!

Let go of the mouse. Use these keyboard shortcuts to quickly move around.

Go to next page

Go to previous page

Return to first page

Skip to last page

Jump to next headline

Jump to previous headline

Few catches

  • Doesn’t (yet) work on date-based paginations (there goes blogger.com) .
  • As more content is fetched, everything but the html body content is discarded, since it’s already present. This is a non-issue for you (the reader), but for the ‘other guy’, the site owner, this implies, among other things, that:

  • Code wrapped in <script> tags or embedded in the headers are not executed (beyond the first page). The same goes for embedded stylesheets on subsequent pages (this is rarely an issue, if ever at all. )
  • That aforementioned feature means
    • Flash videos embedded onto to pages with javascript (eg. with SWFObject) won’t work as of version 1.2, but I’m working on a fix
    • Google Analytics and other javascript based tools won’t record page-views.
    • The majority of the ads on the page will magically disappear. Will you even notice? I surely did not.

…It’s not a magic wand!

It won’t work on BROKEN pages.. the page doesn’t have to be strictly valid, but you gotta at least have a BODY and HEAD tag in there. There are few other cases where it fails or won’t work as intended. Javascript and CSS ninjas are cordially invited to look at the issues page and help squash a bug or two.


Next entries (this is just for the demo, no further pages.)
 


32 Comments »

  1. [...] This is quite a handy one for sites like Google which have a pagination (next/previous) navigation. It preloads the next 5 or so pages so you can browse them faster than if you were to click the next/previous button as it preloads them all. Small labs Inc. siteFlow: turn websites into slides [...]

    comment-bottom
  2. [...] to flip pages come in handy in many occasions as it only takes one key to perform the action. SiteFlow is compatible with many modern web browsers including Mozilla Firefox, Google Chrome, Opera and [...]

    comment-bottom
  3. [...] to flip pages come in handy in many occasions as it only takes one key to perform the action. SiteFlow is compatible with many modern web browsers including Mozilla Firefox, Google Chrome, Opera and [...]

    comment-bottom
  4. [...] to flip pages come in handy in many occasions as it only takes one key to perform the action. SiteFlow is compatible with many modern web browsers including Mozilla Firefox, Google Chrome, Opera and [...]

    comment-bottom
  5. [...] posto per SiteFlow però lo trovo di sicuro, visto che questo bookmarklet può rendere molto più semplice la [...]

    comment-bottom
  6. [...] Small labs Inc. siteFlow: turn websites into slides Small labs Inc. siteFlow: turn websites into slides [...]

    comment-bottom
  7. [...] installare il bookmarklet, basta collegarsi sull’home page di SiteFlow, scorrere la pagina quasi fino in fondo e trascinare il collegamento “SiteFlow”contenuto nel [...]

    comment-bottom
  8. [...] Small labs Inc. siteFlow: turn websites into slides ページ遷移用のjs。操作性よし。 [...]

    comment-bottom
  9. Brian Says:

    Nice. One suggestion I would make, turn off the elastic animation in the headlines. If this is supposed to make things faster to read, a simple smooth in-out animation would be *much* better than a scroll-past-the-content animation.

    comment-bottom
  10. [...] Collegarsi alla Home Page di SiteFlow [...]

    comment-bottom
  11. [...] Siteflow è un servizio che offre l’opportunità di prelevare un bookmarklet, e tramite l’utilizzo di esso trasformare un sito [...]

    comment-bottom
  12. Hey, Brian.
    When you advance a slide, its headlines are extracted/shown and the older ones hidden. Its this hide/unhide that is delayed in some cases (if there are many headlines). The “curtain”, as I call it, is used to disguise this (potential) lag.

    comment-bottom
  13. [...] 今回紹介するオープンソース・ソフトウェアはSiteFlow、Webサイトの可読性、操作性を向上するJavaScriptライブラリだ。 [...]

    comment-bottom
  14. Hi, This is absolutely fantastic. I have a couple of suggestions though. I use this on a netbook, and the fonts are really really big. Can you give an option to make this compact/tiny? http://i36.tinypic.com/2n8y828.png

    comment-bottom
  15. admin Says:

    Whoah, that’s huge, indeed.. haven’t seen that happen anywhere (vista/xp/mac/linux, though with higher resolutions than a netbook).. which distro are you using? got firebug?

    comment-bottom
  16. Genoskill Says:

    Man, don’t complain with the IE compatibility. IE is just crap. Any other browser is better than that.

    Thanks for siteFlow

    comment-bottom
  17. Itlan Says:

    Google search results START on page 2 (using Google Chrome beta 4.0.223.16, XPsp3).

    comment-bottom
  18. elsaed Says:

    لى موقع مجانى وأريد أن نعمل معا على نجاح هذا الموقع ولكم جزيل الشكر

    comment-bottom
  19. @ Itlan.
    Thanks for the headsup. It’s fixed.

    comment-bottom
  20. Itlan Says:

    @ admin: Sorry, but for me it still starts on page 2. I replaced the bookmarklet with the one linked above. I also noticed some other sites starting on page 2 as well, but forgot to note them. I will write down the ones I find as I go along.

    BTW, I love this script (regardless)!

    comment-bottom
  21. Itlan Says:

    Suddenly, works on Google Search! Nice!

    comment-bottom
  22. tueAkio Says:

    I have some suggestions :
    - let say when we are on page 3 of the sites, when clicking the bookmarklet, it automatically loads the bunk of pages from page 1 to page 5 and show page 1, but I am currently browsing on page 3, so please let it displays the page that user is browsing just before loading the script.
    - then when we finish browsing page 5/5 of the siteFlow, only when we press right arrow key, it loads the next 5 pages. My suggestion is that it should make sure to load 2,3 pages ahead of the page that the user is browsing, or we can let user configure that option as his/her desire. It makes user feel very smoothly when browsing the site, without noticing the loading time is eliminated as it loads simultaneously when we are browsing the previous pages !
    Thanks for the great bookmarklet !

    comment-bottom
  23. pharm Says:

    mmmmm sushi

    comment-bottom
  24. hey, just wanted to comment :)

    comment-bottom
  25. werin Says:

    i dont know if that is really true

    comment-bottom
  26. joe3 Says:

    I am unimpressed with this. First of all, i don’t think you have done a very good job of explaining what it does. Second of all, how is replacing pagination any different with clicking next to go to the next slide. I am very confused how this could be beneficial to anyone. I hope you didn’t waste too much of your time coding this crap.

    comment-bottom
  27. @joe3
    It’s highly unlikely that you tried the thing before voting “unimpressed”. Drag it to your bookmarks toolbar, find an appropriate site and click it. Let me know how that goes.

    kthxbye

    comment-bottom
  28. [...] are really useful shortcuts to web services which you can use via your web browser (e.g. SiteFlow), but things can become a little untidy on your bookmark toolbar if you’ve got several [...]

    comment-bottom
  29. Rebecca Shapley Says:

    I’ve been looking for a way to smoothly move from one website to another when giving presentations – like a browser with the Forward arrow already planned out. This tool seems really close…how hard would it be to throw a list of URLs – perhaps a folder of bookmarks? at siteflow and be able to press the next/previous arrows to move between sites?

    comment-bottom
  30. [...] to flip pages come in handy in many occasions as it only takes one key to perform the action. SiteFlow is compatible with many modern web browsers including Mozilla Firefox, Google Chrome, Opera and [...]

    comment-bottom
  31. Nemu Says:

    suggestion =D
    custom assign ‘headers’.

    something like those within the same frame depth, colour..? in the same format(size, color, font..)after a click select(?something like an mini css reader?)–header settings optionally consistent between sites =))

    would work great with regular expressions =DD

    thank you for reading and sorry to bother you.

    comment-bottom

RSS feed for comments on this post. TrackBack URL

What's on your mind?

Memento mori ˴.-˴.♥---   © Small labs Inc. 2009-2014. All rights reserved.