Tab Pages

I spend most of my day in a web browser. During this time, I accumulate tabs for various reasons; email, issue tracking system, language documentation, a feed reader, a music player, and so on.

Usually, when I need to switch tabs to do something, it’s a simple interaction. Such as skipping a song in Grooveshark, seeing new tweets, checking a calendar, or scanning documentation, to name a few things. I really don’t need the full site to do any of those things.

What if the owners of these sites could surface an interface for common tasks? What if the browser could presents this “mini-site” to us when we hover over a tab?

How would the browser know to do this? What if the head of the document contained something like:

<link href=’http://grooveshark.com/mini.html&#8217; rel=’tab_page’ type=’text/html’ width=’300′ height=’225′>

That mini.html page would look something like this (with the full page shown behind for reference):

Grooveshark_tab_page

Now, if a browser sees this code on a site, but my current active tab is some other page, all I do is mouseover the Grooveshark tab and a panel will open to that url.

Screenshot_grooveshark_tab_page

Wait, I know what you are going to ask… how does the real page know I skipped a song in the tab page? Why, they talk to each other, of course!

The browser would need to provide a bridge between the two pages so that data could be posted and sent… sounds like something we could do with postMessage right? When I click on “next song” a message is sent from the tab page to the real page. The real page would be on the lookout for incoming messages and route them to functions as needed.

The real page should be able to send messages to the tab page as well. If a song was playing, I’d want the scrubber in the tab page to keep up.

Here are a few more examples…

The tab page could be as complicated as the developer wishes to get, like in this example where the user could switch between day/week/month calendar views. If an event was about to trigger, maybe the whole calendar goes away altogether and just shows the event.

Tab_page_calendar

If the two pages don’t need to talk to each other, we could just show a responsive page to the size of the panel containing it, as seen here while I’m using Firebug to debug a page and have Javascript documentation readily available.

Tab_page_with_mdn

Do you see a use for this?

Advertisements