Grow your CSS skills. Land your dream job.

Default Tab UI of the Current Desktop Browser Landscape

Published by Chris Coyier

I opened up the same 6 tabs in current versions of all the desktop browsers, then took screenshots of the UI of just the tabs themselves. These are from a Mac running OS X Lion.


Firefox 6


Chrome 15


Opera 11


Safari 5


Internet Explorer 9

Some facts

  • You get an average of 26 visible characters per tab if the user has 1-3 tabs open at around 1200px (average for this site).
  • All browsers maintain this 26 visible character average until about 5 tabs, then that number shrinks. At 6 tabs you get ~18 characters.
  • IE 9 starts shrinking at 4 tabs and at 6 tabs only an average of 3 characters are shown per tab.
  • Every browser shows favicons except Safari.
  • Every browser puts tabs on the top (above URL bar) except Safari.

Some opinions

  • You don't have much room, make it count.
  • You can largely count on the favicon to identify your site so don't start with site title, start with the next most significant thing. Unless you have a ton of Safari traffic (remember, your site's stats are the only ones that matter.)
  • Safari should get over it and put favicons in the tabs.

Comments

  1. TeMC
    Permalink to comment#

    Nice stats. Was the IE also taken at 1200px by the way ? Looks a lot smaller and doesn’t look like anything recent either (is that IE8 or IE9 on Windows XP or Windows 7 ? Looks more like IE6 or IE7 on Windows 98 with an 800×600 monitor :P)

    I find interesting how browsers have dropped the full-width title bar though. In one of the earlier betas for Firefox and Safari there used to be a title bar above the tab bar (the tab bar was still above the address bar, the title was simply shown twice. Once in the full-width bar on top (in which the close/minimize/maximize controls are) and once in side the tab.

    The main advantage of that was being able to see the full title without having to hover and wait for the tooltip (I know from your recent Pseodo Elements talks that you totally love those native tooltips ;-), not! ) in order to see the full title. This full bar also made it easier to move the entire window (since dragging in the tab means pulling the tab off into a new window), you have to get really creative with your mouse on the tiny 4-5 px edge left to actually grab the window and move it.

    • Permalink to comment#

      IE9 shows the tabs alongside the address bar, so it loses a good half of the screen or so, in width.

  2. Permalink to comment#

    I don’t understand that there are still tons of sites that don’t bother to replace the cms’ default favicon or don’t have one at all.

    It’s been annoying the heck out of me since Opera 6.10 .

    Google acknowledged the importance of the favicon by replacing theis with a more fugly but easy scannable one back in 2009. http://googlesystem.blogspot.com/2009/01/new-google-favicon.html

  3. Jon
    Permalink to comment#

    The favicons are a big win if you like ‘app tabs.’ Which of the browsers mentioned support firefox-style app-tabs?

    • Nate
      Permalink to comment#

      Google Chrome, Mozilla Firefox, and Opera all have the same “pinned” tab feature.

  4. Permalink to comment#

    You sure that’s IE9 screenshot you have there? :)

    • Permalink to comment#

      Sorry for commenting again.

      In IE9 the URL input is inline with the tabs, but you can easily put the tabs in a separate row and get quite a lot more space for the tabs.

      Just want to mention i’m not an IE fan. As a web developer i actually hate IE, but you should get the facts right here.

    • Scott
      Permalink to comment#

      Don’t worry, IE9 looks like crap even on regular (non-classic-theme) Windows. Don’t know why they decided to change from IE8’s theme, that was really nice and clean.

      And tabs on top is a fairly recent thing – Opera’s had them for years but it wasn’t until Chrome came along that Firefox/IE decided that they were right all along.

  5. Permalink to comment#

    Haha – any chance to take a side swipe at IE! But seriously – which museum did you raid that dusty version of IE from. Plus – you reduced it down to a cheeky 420px :-) We’d have understood if you just said you were looking at decent browsers, and left IE out!

  6. Ryan
    Permalink to comment#

    I just looked at screenshots of IE 9 on Google. Here’s a full screenshot:
    IE 9 Screenshot
    This basically is IE’s way of getting more page space out of the user window. Instead of stacking the tabs and the URL bar, they put them side by side to lessen the amount of space taken up by the browser. It’s a way to compete with the other browsers. They still score low on our standards though…I think IE will be obsolete in another couple years unless they come out with something huge that will blow every other browser away, like supporting everything possible and more.

    Anyway, sorry for rambling on about IE and how it sucks, this is a good post. The favicon is a great way to establish the tab differences. It makes it easier to find the tab you’re looking for in a sea of other tabs, like my dad who usually has about 50 of them open without grouping them with Firefox Panorama (which is an awesome feature). Safari is now low on my list of browsers as well because of their lack of favicon and that Opera is becoming a better browser to use.

  7. Dario Novoa
    Permalink to comment#

    First of all as a Web Dev I am an IE hater :p but this is hard to believe “These are from a Mac running OS X Lion” it should say These are from a Mac running OS X Lion and IE on VM Fusion or These are from a Mac running OS X Lion and IE on my old coffee maker that run windoze (just saying) :p

  8. Justin
    Permalink to comment#

    Wow, who would have thought all these people would come out to defend IE? Anyway, one thing to remember is that just because people may have a monitor resolution at 1200 does not mean that they have their browsers full width.

    I completely agree about site titles, but what bugs me is how almost all CMS’s default title attributes start with the site name. There is so much information out there about the importance of unique titles, and yet they still default to site name.

    Thanks for doing the above research. Interesting finds.

  9. craig
    Permalink to comment#

    You really should have put more effort into that IE screenshot just to be sure it was consistent. I mean, it’s not a big deal, but it certainly does look like you essentially said, “Meh. I don’t give a shit about IE.”

    Here’s a comparison image. You can verify that my screenshot is 1200px wide. This is also with default settings.

    http://i.imgur.com/5PeNR.png

    • Permalink to comment#

      I opened up IE 9. I opened the six identical tabs I had open in all the other browsers. I took a screenshot of the tabs. What I feel about IE is irrelevant, that’s what it looked like. (Context: http://cl.ly/ADYc)

    • Permalink to comment#

      well IE9 takes graphics form windows themes so its looks very much depend on that

      also from that reason screening it in Apple Os is kinda unfair – so here’s a ‘win7 default’ screen: http://www.shrani.si/f/t/d8/2qXEkoi4/ie9.png

      sugestion: since most browsers and even different versions of browsers use different text rendering it would be nice to post an example of that as well …

  10. Permalink to comment#

    Yeah, I don’t think anyone coming to your site Chris is going to be in favour of IE but that screenshot you have of IE9 is not how it appears on a default install of Windows. I unfortunately have a windows 7 PC and I would have to turn the display settings to windows classic and bump my screen resolution down to get it to look like that.

    • Permalink to comment#

      (Again, context: http://cl.ly/ADYc)

      Let’s also remember that what it looks like isn’t very important to the information I was gathering. It was the placement and size that is the most interesting. IE 9’s tabs are actually a bit bigger at low numbers but shrink more quickly and more drastically.

    • Permalink to comment#

      Sure I totally understand the point of the post and that the appearance isn’t an important aspect. It was just my initial reaction, and that of others it seems, to think you had intentionally tried to make IE look like crap.

  11. Martin
    Permalink to comment#

    I am not sure why, but something tells me the only way Safari is ever going to show favicons, is if they get to manually approve every single one of them.

    • Permalink to comment#

      I just installed Safari 5.1 on Windows 7 – It shows favicons on each tab, straight out of the box – so I wonder why the raw deal for Mac users…

  12. Permalink to comment#

    A bonus for putting the site name, at last place in the title: it’s supposedly better for your SEO, since the site title is always the same, putting it last makes easier to differentiate between multiple pages on the same site.

  13. I have really enjoyed Glims for Safari which adds favicons to tabs.

    In addition to that it auto-restores your last session, has more window management options (shortcut keys for full screen maximize), live search suggestions and more. It works by adding additional preferences to Safari.

    If you haven’t heard of it already you should check it out. http://www.machangout.com/

  14. Permalink to comment#

    I, personally, hate the favicons on my tabs. But, I’m probably one of the few Safari users left, too. /shrug

    • Sam
      Permalink to comment#

      I also use Safari as my main browser. The others are all just too colorful and clunky.

      I’ve actually turned off favicons in my Firefox bookmarks (and put the tabs under them, which somehow takes up less space)—but I haven’t been able to find a Chrome setting or extension that’ll do the same; nor have I been able to find a setting in either browser to remove them from the tabs.

      Besides, Safari takes up the least amount of screen real estate (with tabs, bookmarks, address and title bar, it’s one pixel shorter than Chrome). Chrome is slightly smaller if you count the status bar in Safari, but the “flash on/flash off again ten times a second” status bars in both Chrome and Firefox are so annoying that I can’t use either browser.

      I do need to download Opera though. I’ll see what I can customize there.

  15. Permalink to comment#

    really thanks for the well explained tutorial!i am a beginer and i am learning everything form this site :)!

  16. Masood
    Permalink to comment#

    awesome ;)

  17. cnwtx
    Permalink to comment#

    Is their any way we can change attributes of the title bar itself? Such as the color, background, etc? Also, every other html element that has a title uses the title="" Why does the document use <title> instead of <html title="">?

    • Miles Carmany
      Permalink to comment#

      I think it might be for multiple reasons.

      Historically, I don’t think really old versions of HTML had many attributes. Just a few like <a href=””> and later <img src=””>

      I think semantically it would be something different, since the title attribute is the title of the element in question, while the title element is the title of the document as a whole.

      Also, adding more text at the beginning of the document could potentially interfere with the charset detection by the browser if the browser needs to look for <meta charset=”utf-8″>

  18. Permalink to comment#

    Yes, Safari, should DEFINITELY add favicons. Makes it way easier to identify tabs. Apple should know better.

  19. Permalink to comment#

    When 6 month ago i bought my first Mac and fired up Safari the lack of Favicon was the first thing i noticed.

  20. Permalink to comment#

    Have to say I find Firefox the best ones for tabs. Chrome seem a bit dodgy as the slope in a the top!

    I guess the fact that all browsers are using them now means it’s the best way – are there any alternative solutions for this?

  21. Does anyone else find that FF tabs change their appearance from when first launched compared to after a window is closed and reopened?

    Heres what I mean:

    http://twitpic.com/4dx2gc/full
    http://twitpic.com/4dx333/full

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".