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.
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.
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.
IE9 shows the tabs alongside the address bar, so it loses a good half of the screen or so, in width.
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
The favicons are a big win if you like ‘app tabs.’ Which of the browsers mentioned support firefox-style app-tabs?
Google Chrome, Mozilla Firefox, and Opera all have the same “pinned” tab feature.
You sure that’s IE9 screenshot you have there? :)
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.
The point was “Default”, I didn’t change any defaults because (I’m pretty darn sure) the vast majority of users never change them.
I had to use browserstack.com running IE 9. Here’s an example of the context: http://cl.ly/ADYc
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.
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!
It’s really IE 9, the current shipping version of IE. See the screenshot above.
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.
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
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.
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
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)
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 …
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.
(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.
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.
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.
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…
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.
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/
I, personally, hate the favicons on my tabs. But, I’m probably one of the few Safari users left, too. /shrug
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.
really thanks for the well explained tutorial!i am a beginer and i am learning everything form this site :)!
How the heck did “you” manage to sneak in?
awesome ;)
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="">?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″>
Yes, Safari, should DEFINITELY add favicons. Makes it way easier to identify tabs. Apple should know better.
When 6 month ago i bought my first Mac and fired up Safari the lack of Favicon was the first thing i noticed.
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?
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