« Back to blog

Mozilla's Winter Design Challenge "The Home Tab"

Mozilla's Winter Design Challenge

My entry for Mozilla's Winter Design Challenge revolves around the idea that a user's daily browsing represents only a few key tasks or objectives.  Even for these few tasks, you might open hundreds of webpages in your browsing session. For example, if you are looking to purchase an iPhone, you may start with Apple.com to check out the marketing material they have prepared. To get a more balanced view, you look to CNET or Engadget  to find a third party product review. Perhaps Engadget tips you off to some of the network issues that AT&T has in the US, and you do a quick Google search to confirm it.  Note that even in this quick session you've already spawned at least 4 tabs or windows.

Now imagine that you are interruped during your search before you've made your decision about the iPhone. Shouldn't the browser provide you with a way to easily group all of the tabs and windows related to your search so you can continue it later? My concept automatically groups these tabs together and offers several options to restore all or parts of your session.

You can view the interactive demo (draft 1) (use Firefox for best results) or a screenshot. I welcome any feedback here or at the challenge discussion forums.

Design Goals:

1. Recognize sites in your session by title, url, or screenshot

Mozilla Winter Design Challenge

2. Identify which sites you spent the most time on

Mozilla Winter Design Challenge

3. Restore an individual tab or all of the opened tabs

Mozilla Winter Design Challenge

View other browser information such as SSL certs and the identity you logged in with

Mozilla Winter Design Challenge

Production Details

This prototype was designed in Adobe Fireworks and reproduced pixel for pixel in HTML and CSS3. CSS Spriting has been used in the format switching buttons, but could be applied more aggressively in a second version of the concept. Most of the interaction is achieved by adding and removing classes to elements in the DOM with a few jQuery fade effects thrown in. It is designed for Firefox only and no cross-browser testing was completed.

Comments (1)

Jan 05, 2010
Coleman Foley liked this post.

Leave a comment...