Firefox New Tab: Visual Update

Chris Beard

24 responses

All has been quiet on the new tab front for the last couple of weeks. We’ve been up to two things in the process of getting the new tab ready for potential uplift into Firefox. The first is we’ve been working on an overview of how the add-on was designed including performance and security. If you’ve ever wanted to get a guided tour of how something like the new tab is implemented, check it out. The second thing we’ve been working on is finding a visual style that blends in with Firefox.

Inspired by the horizontal styling of the thumbnails in Chris Stone’s answer to the call for participation, we’ve got some new designs that incorporate the learnings from the last 36 revisions while finally making it feel much more Firefox-y. Unfortunately, we haven’t implemented the new style yet so for the time being, it’s see only.

By using a horizontal thumbnail clipped from the top of a page, we are capturing the site’s logo and masthead — the most visually distinctive aspect of a web page. By default only the top two visited sites get a visual treatment (to remove visual clutter), but more can be turned on by clicking the little edit icon. We’ve gone to a two-column format to better use the available space. If you have an extra wide monitor, you may get more columns.

All of the features from before are there, like in-line search and automatic RSS. It’s just all cleaned up.

— Edi Lee, Sean Martell, and Aza Raskin from the New Tabs Team.

24 responses

  1. pete wrote on :

    I think the use of white space is a bit… uneven. I think I’d like it more if the spacing where more generous between the pages. I also agree that the thumbnails are off a bit. Maybe if you could see just a little more of the site? I think if you could see at least to the horizontal center line it would be perfect.

    I really hope this makes it to the 3.5 version.

  2. Jacky wrote on :

    Hello, I blogged about feedbacks for this tag page, includes an image. I left a comment on your blog but I wasn’t sure if you’d see it. http://www.iamjacky.com/?p=1138

  3. TheTechFan wrote on :

    Will this be included in the final of Firefox 3.5? I sure hope so.

  4. Justin wrote on :

    I really like what you’re doing, but it seems to be incompatible with Tab Mix Plus. I couldn’t figure out what I was doing wrong, but once I disable Tab Mix it worked fine.

  5. Dominic wrote on :

    Looks great!

    Agreed that it should be extremely customizable!

    about:tab should be a new way to extend Firefox and allow the page to be personalized with custom-made “thumbnails” (eg calculator, weather – could work side-by-side with RSS).

    One could make ‘thumbnails’ with JS, etc. and adds/changes would be instant (like GreaseMonkey)

    One last suggestion: ctrl+T should also be able to open a custom page different than the homepage (and I’m also wondering how the functionality will be if one has multiple homepages).

    Best of luck!

  6. maxauthority wrote on :

    Additionally, I think maybe a new or something spec similar to the favicon support would make sense. Of course that will take some time for most sites to support, but it might be useful for such things.

  7. maxauthority wrote on :

    I don’t like it. And i fear it will look even worse on the millions of random pages out there. Not every page has the header at the top left.

  8. Balaganesh Damodaran wrote on :

    Looks pretty good. It would be even better if it was more keyboard friendly (tabbing through the entries like in any normal HTML page would be neat).

  9. vatar wrote on :

    Cool! I want it!

  10. Bussiere wrote on :

    it will be nice to have the possibility to customize this new page like adding a background image.

    Regards
    Bussiere

  11. Mitch wrote on :

    I really like what you are doing to the new tab… but i am really enjoying fast dial… Also i think you should create a secondary awesome bar for the tab bar that will open a new tab when you enter a url… just a thought, but i think it would save time if you could just type in what you want and have it automatically open the website that you want…

  12. Pertor wrote on :

    Nice, hope we’ll see it soon integrated in the nighlies (or an update for the addon)

  13. OwenCM wrote on :

    I have to say, I was looking at Chris Stone’s design, and if Facebook, Google Reader and Gmail could all be integrated in this way I think it would just be amazing. Links to a few sites is useful, but just kind of a spinoff on what Chrome did first. Be the first in properly integrating RSS, Email, Social networking and pages people often go to all at once, /that’d/ start turning some heads 😉

    Note: I switched to chrome recently cause of the extra few pixels at the top of the page I gain and the new tab page. If you can make a smarter page but one that still lets me easily see at least 6 of my favourite pages, I’d happily switch back!

  14. Pieter de Jong wrote on :

    I love it!

  15. José wrote on :

    “About: tab”, doesn’t this sound very geeky? Would my mother know that about are a set of sub pages? Why not “This page” instead?

  16. Flavio wrote on :

    Very interesting. But I’m not sure I’d like to see some site header when I open a new tab. Maybe it is too invasive and steals too much attention. What about using the RSS channel image if present? Or the apple-touch-icon?
    It seems like there’s a need for better and standardized website icons…

  17. kourge wrote on :

    I recall that visual distraction was one of the issues; would the colors of the horizontal thumbnails be washed out a little bit? Surely a combination of SVG filters can achieve this?

  18. Mike Beltzner wrote on :

    The horizontal banners on the tabs are brilliant; I’d love to see how it looks carried across all the tiles, actually. I’d also love to see the thumbnails either up-sampled or leveraging the fact that many sites now offer higher-resolution versions of their favicons for use as offline web-app icons or just because they can put them in the favicon file.

    One critique: the action banner feels really big for an action which only may be what the user is trying to do. Perhaps instead of a tile, have that be a bit more like an infobar across the top, narrower? Or just bolted to the top left or right and given more of a button shape?

    Coming along nicely, though.

  19. Matt wrote on :

    I’d suggest making the columns narrower and displaying 3 of them by default. Over than that, my only complaint is that it’s rather distracting.

  20. MMccubbing wrote on :

    Would it be possible to logo and masthead show up on mouseover for the other results, collapsing the ones above?

  21. quanta wrote on :

    These look incredible! I especially like the use of whitespace – new tabs should always feel clean and, well, new.

    These are the best mockups so far, imho.

  22. Rob wrote on :

    This is very relevant to my interests, when can I have this?!?!?

  23. Tyler wrote on :

    And I forgot to mention, I still think there should be some way to quickly navigate the contents of the page with the keyboard, such as tabbing between the items. I just don’t think many people will move the mouse the the button to search their copied text when it is so easy to hit ctrl+v and enter on the keyboard upon opening a new tab to search it. And it appears from the screenshots that it will be possible to rearrange the items, which is great :).

  24. Tyler wrote on :

    I think it looks great, and is pretty much perfect. My only suggestions for the final version is to make the items really easy to customize so you can really fit it to your needs. For example, make it so you can pin the items to the list like in Safari, make it so you can drag them to different places like the items on an iGoogle page, the option disable in-line searches or rss feeds, and the option to show the thumbnails on all or none of the tabs.
    I wouldn’t necessarily use all of these options, but I think they would really let people do what they want with the page.