Mozilla released the problem statement for Summer Design Challenge a few days back. Instead of directly submitting by entry, I thought I will publish it in parts on my blog and iterate based on the feedback I receive.

The Problem Statement

For this Design Challenge we are focusing on finding creative solutions to the question: “Reinventing Tabs in the Browser – How can we create, navigate and manage multiple web sites within the same browser instance?”

Tabs worked well on slow machines on a thin Internet, where ten browser sessions were “many browser sessions”. Today, 20+ parallel sessions are quite common; the browser is more of an operating system than a data display application; we use it to manage the web as a shared hard drive. However, if you have more than seven or eight tabs open they become pretty much useless. And tabs don’t work well if you use them with heterogeneous information. They’re a good solution to keep the screen tidy for the moment. And that’s just what they should continue doing.

My Solution
My browsing always starts with with a few tabs – My RSS reader, Two news website and Facebook. While browsing from each of tabs I keep opening new tabs, reading them and closing some of them. Before I know it, I have more than 25 tabs.

Browing Patterns

Browing Patterns

Something very similar happens when I am doing some research. I will start with a google search tab. From the results I will open 5 new tabs. Then I will open a few fresh tabs to try searching for new keywords I learnt from my earlier results.

So using the same tree level structure, we will now have two levels of tab. Mockup will make it more clear:

Mockup for Tabs

Mockup for Tabs

We have two levels tabs. When you open a new blank tab, always a first level tab is opened. Whenever you click any link to open in a new tab from top level tab, a new second level tab(subtab) is created within it. So lets say I start searching for “Firefox reviews” on google. Thats the top level tab. As I open each of the results, they will each be opened in a a new subtab.

So the assumption we are using is all tabs opened from a new tab are related and can be clubbed under the initial tab.

Note: Lets say we currently have just one maintab with google search. So when I open my first google result in a new tab, two subtabs will be created. The first being the google results listing (content of maintab) and second being the new subtab. For all new tabs I open in any of the subtabs, they will remain under the main tab which is google results listing.

First Subtab

First Subtab

Q1: What happens for Newbies?
The subtabs are turned off by default. The first time a user opens more than 15 simultaneous tabs, we prompt him to enable subtabs and show him the preview. Otherwise he can enable from settings. Once enabled, it remains enabled in upgrades etc.

Q2: What happens when I close the first tab which started it all (google results page)?
Since now its a subtab, its closed while the name of maintab and the maintab itself are retained as it is.

Q3: Why subtabs at the top?
Width is a valuable resource so can’t put it on left (One solution on mozilla site does put it on left). Bottom doesn’t make sense as having closely related browsing elements should be nearby, instinctively for changing the tab, my mouse goes up so continuing with the convention. New users who transform later will also find the shift easier.

Q4: How do i create maintabs?
By new tab(Ctrl+T) or right click – open in main tab

Q5: When i go from main tab 1 to main tab 2 and then come back to 1, what do i see?
Same as what you were seeing earlier ie Subtab opened does not change.

Q6: New tabs created by opening links from a subtab?
These new tabs are created as subtabs within the same higher level maintab.

“This work is licensed under a Creative Commons Attribution 3.0 United States License (”

So you are free to copy, modify, reuse etc etc (I don’t really understand these licenses, from my side its as good as ours so iterate over it and make it better and submit in your name)

So let start the questioning, bashing and proposing alternate solutions :).