Squeezing the most out of browser tabs

Introduction
Tab space utilisation
Maximised is best, right?
Mile high tabs
Selected tab visibility
Use of ellipses
Gaps between tabs
Longest labels in the tabs
Increasing tab density
What other facilities are available
Memory
Conclusion

Introduction

I love my browser. Google is my best friend. My Google-Fu is important to maintain, so for me, being able to browse the web efficiently is a real productivity issue.

But, one thing I’m not very good at is keeping a check on the number of tabs open in my browser. I keep my browser open constantly as I use it very frequently every day. I’ll start with one or two tabs and then I’ll open another, and then a bit later I’ll come back and refer to them and probably open some more. And this will keep going on all day – maybe for several days. Predictably, the rate that I close tabs is slower than the rate that I open tabs. Consequently, the number of open tabs increases and increases and the tab headers themselves get smaller and smaller until I can no longer see what I’ve got open and in an exasperated moment, I’ll close the whole browser down and start again.

My browsing behaviour is probably best described by the word trawl. I don’t use the same set of sites consistently enough that I feel that Firefox’s Tab Groups are advantageous to use.

Right now, I use Chrome. It’s lovely, but is it best for me. Things have got worse for me since checking the option to automatically open links from Google Search Results in a new tab – I end up with way too many tabs because I’ll branch off down a trail of pages, and inevitably, the original search result tab remains open unnecessarily.

I think that particular option is going to be switched off again, but I got to thinking – how do the various browsers help me or hinder me with regards to tab management? I decided to find out and was surprised by some of the things I found out on the way.

I loaded up 17 identical tabs in each of the five major browsers all running on Windows 7:

  • Microsoft Internet Explorer 9.0
  • Mozilla Firefox 6.0
  • Google Chrome 14.0
  • Apple Safari 5.1
  • Opera 11.51

Firstly I took a look at how the tabs are presented initially at my maximum screen width of 1920 pixels. Then I looked at their ease of use as the tab density starts rising, by reducing the width of the browser down from 1920 (HD) to a tiny 360 pixels to simulate having many more tabs. Finally I looked at other ways to use or access the tab pages in each browser that might make my life easier.

Tab space utilisation

The first thing to note is that IE9 out of the box is immediately at a huge disadvantage because the tabs are in-line with the address bar and back/forward buttons.

However, right mouse click on a tab and the menu option at the bottom lets you show the tabs on a separate row, and the address bar extends almost the full width – up to the tool buttons.

Once tabs for all the browsers are in a row of their own, we then notice that for some reason Opera and Chrome leave a significant gap to the right of the tabs, while all the others take advantage of the complete width. All the browsers make use of a New tab button at the far right of the tabs.

Opera has an extra button for accessing recently closed tabs, which we’ll come to later, while conversely Firefox has an additional button to show a dropdown list of the open tabs.

Only IE9 and Safari allow the tabs to extend the full width of the browser, as we see in the images below,

Maximised is best, right?

First we looked at the appearance of the tabs with the browsers un-maximised but at full screen width and then maximised. The width border of the desktop window should theoretically be the gain in width. However a common trend is for the tabs to be positioned into the frame of the window, and this doesn’t always make the best use of space for the tabs as we see below.

For IE9, the border was the only gain.

For Firefox however, the tabs move right up to the top of the frame, in-line with the window controls and the Firefox menu button, as well as taking on an extra couple of buttons to be able to scroll the tabs left and right, due to the reduced width. Firefox’s scrolling i at least smooth and quick and not restricted to one tab at a time, unlike Safari’s which we see later.

Chrome also moves the tabs right to the top of the frame, in-line with the window controls and reduces the space available on the right slightly as a result, but gains by the border width on the left

Safari gains the width of the border, similar to IE9

Opera moves the tabs and other buttons up to the top in-line with the window controls and the main menu button

Result:

IE and Safari gain slightly by being maximised – and remember these two were already using the maximum width available anyway. Chrome has virtually no change.

When maximised, Opera loses over 60 pixels, and Firefox effectively loses a huge 140 pixels of width in which to display the visible tabs. Firefox does end up having the least amount of space available, with Opera just 10 pixels more.

Mile high tabs

One of the benefits of being able to position the tabs right at the top of the maximised frame, as Mac users are well aware, is the ability to shove the mouse right up to the top of the window and slide the mouse along the top meaning that you don’t have to be accurate positioning the mouse vertically over the tab.

FireFox, Chrome and Opera position their tabs in the top frame, but sadly Opera completely fails to get the major benefit of this and does not position the tabs exactly at the top, meaning you have to bring the mouse back down a bit in order to click on the tab. That is a major oversight by Opera, which has ramifications to an otherwise excellent feature mentioned further below.

Selected tab visibility

We thought that Chrome, Opera and Firefox made their tabs a little clearer as to which one was selected, with Chromes angled shapes working well. IE9’s tabs look more like a row of buttons with their square edges and close proximity, and Safari’s upside down shapes underneath all the other controls just looks a bit odd, despite the closer proximity to the actual content.

Gaps between tabs

We looked at the gap between the end of the label in the selected tab and the start of the label in the next.

IE9 has a 1 pixel dividing line between the tab button foreground, and a small gap between the end of the label and the close button, which gives the labels the most space on the tab buttons, despite IE9 having one of the larger left margins inside the tabs.

Firefox goes to a 2 pixels, consisting of the tab borders themselves, but the left margin is tight and consequently is equally as good as IE9

Safari’s design appears more spacious, as they only display the close button on hover (although the space is left to show it).

Chromes angled tabs looks pretty spacious and it is – having more space between labels than IE9, Firefox and Safari.

Opera adds an additional 2 pixels between the tab borders, but makes up for this by a very small left margin and a tiny gap between the favicon and the label. Nevertheless, Opera has the biggest gap between the tab labels due to the large gap between the end of the label and the close button.

However, that’s not the whole story because two of the browsers only show the close button on the selected tab. That’s IE9 and Firefox.

Chrome, Safari and Opera permanently leave space for the close button on all the tabs, all of the time.

Opera does allow you to remove the close buttons from all tabs via the option:  Settings > Preferences > Advanced > Tabs > Additional tab options > Show close button on each tab, however, this means it doesn’t even appear on hover or selection, so you have to close via Ctrl+W or the popup menu over the tab.

Here’s the picture when we look at the gap between the end of one label and the next when we look at two unselected tabs.

Since there can only be one selected tab, then in this case, it’s clear IE9 is most space efficient between tabs, followed by Firefox, Opera, Chrome and Safari, the difference between IE9 and Safari being a huge 21 pixels per tab. On our test with 17 tabs, that’s a difference of more than 330 pixels!

Use of Ellipses

The ellipsis is the  dots … used to denote missing content at the end of the label in the tab. Unfortunately the very act of using an ellipsis means that on average it replaces a couple of real characters.

All the browsers, except Chrome use the ellipsis, Chrome instead choosing to fade out the lst few characters, whilst still making them readable. This gives Chrome back a couple of extra characters on each label, while still indicating that there is missing content in the label

Longest labels in the tabs

In non-maximised mode IE9 wins by the slightest margin over Firefox due to Firefox having the extra button at the end of the tab row to access closed tabs, but it’s down to IE9 being able to display just one more character on one of the tabs.

Safari comes third mainly through utilizing the whole width of the window. Opera comes fourth for similar reasons

It’s a tie for last place. Google’s fading text instead of ellipses shows more actual characters, but not with enough readability to escape last place.

In maximised mode however, the trailing field changes.

IE9 still in the lead, followed by Firefox still apparently second, Chrome moves up to third, Safari fourth, and Opera down in last place due to being in-lined with the menu button and window controls.

But wait – Firefox is cheating! Firefox is not showing all the tabs. Utilizing the scrolling left and right arrows, Firefox is showing only 16 of the 17 tabs, and that’s a sign of a major setback as we start to reduce the width of the screen.

Increasing tab density

The narrower the screen, the less space available to display the tabs.

Both Firefox and Safari get round this by showing less tabs and adding a dropdown menu. Firefox’s menu is permanent, Safari’s kicks in once the screen reaches less than about 1700 pixels.

IE9, Opera and Chrome start to squeeze the tabs, and that’s where the ellipsis, the margins and the permanent close buttons take their toll.

Around 1280 pixels we get the following:

With Firefox showing only 11 complete tabs and Safari 12 out of the 17 open.

Opera is coming to the fore by now removing the permanent close buttons on each tab.

Clearly Chrome is starting to fall well behind as the tab density increases, and the favicon comes into play much more.

Dropping down to about 1080:

All the browsers have now lost the close button from permanent display. Even so, Chrome has also lost virtually all the label characters and we’re relying on favicon alone to identify the tab. Similarly with Opera and IE9, the favicon has most relevance as only the first 2 or 3 characters are visible. Few websites will be identifiable by this few characters. Firefox and Safari are showing only 9 or 10 tabs.

By the time we get down to 660 pixels:

IE9 has given in and is showing 13 tabs and buttons at left and right to scroll through the tabs one at a time, annoyingly also selecting and displaying each new tab as it appears in view.

Chrome has become useless, meanwhile Opera is steadfastly keeping the favicons clearly visible, thanks to the tight margins and the removal of the close button

Beyond this level of tab density little changes apart from IE9, Firefox and Safari showing fewer and fewer tabs. But look what happens to Opera – the favicons are scaling down!

By 360 pixels, things are getting tough and unsurprisingly, as it’s pretty ridiculous to be working at this kind of tab density.

What other facilities are available?

Tooltips

Tooltips are an opportunity to give more information to the user about the hidden tabs.

Chrome, Firefox and Safari give little away, just giving the tab label as the tooltip. Of these Chrome positions the tooltip above the tabs and the other two below. This means Firefox’s positioning is over similar looking content and is harder to read, while Safari is little better positioning it over the page content itself.

IE9 Gives a bit more by conveying the tab label and the URL address

But Opera! Oh my, look what Opera gives us – fantastic – a full snapshot of the hidden page, and annotated with the tab label. What a super feature! It’s such a shame that Opera doesn’t have mile high tabs in maximised mode to make it easy to run the mouse along the row of tabs and see these snapshots. Instead you have to manually keep the mouse within the tab header row. A great feature slightly ruined in my opinion, otherwise that facility combined with the retention of favicons right to the highest tab density would be wonderful.

Drop down access to tabs

Firefox has a button at far right to drop down a list of all the open tabs

Windows taskbar access to tabs

The browsers have two different taskbar behaviours, single window or multiple window.

IE9 and Safari both show multiple windows being indicated on the taskbar, so that you can select one of the tabs from a popup list when you click or hover over the taskbar icon for the browser.

Although none of the other browsers enable this by default, Firefox and Opera can be configured this way.

Firefox can be configured via the Tabs section in the Options dialog: – just check the option ‘Show tab previews in the Windows taskbar’[Thanks to Peter for pointing this out in the comments]

Opera can be configured via the well hidden option:  Settings > Preferences > Advanced > Tabs > Additional tab options > Use Windows 7 taskbar thumbnails – and then restarting the browser

Note that you only see the above list when you have a large number of tabs. With fewer tabs, you see the normal horizontal panel of preview windows when you hover over the taskbar icon.

Quick access to closed tabs

Firefox, Chrome and Opera allow you to reopen a closed tab with Ctrl+Shift+T, in order of most recently closed first. This could be good for closing down a few tabs with easy access to them if required back again, however it does put some onus on the user to remember what was closed and whether it was recent enough to access it via this route or to find it again another way.

Opera has a waste bin icon, which is a button that when clicked pops up a menu to access a page from a list of previously closed tabs. There are separate entries for tabs which were opened in their own window and if selected, these are reopened in a separate window again. The lists can be cleared.

Changing location of tab

Opera has a few tricks up its sleeve. Right click on a tab and you’ll find options to move the tabs to left, right, top or bottom of the window, which means that you can show 35 tabs within the height of a 1080 pixel display – and since the divider between the tabs and the content is draggable, you can show plenty more of the tab label. If you have a big 1920×1080 screen, the ability to use a side-panel to display the tabs instead of the usual tab bar, this is great news.

But wait – it gets better – you can also show thumbnails within the tabs! It seems Opera is really trying to be clever and flexible about letting users manage the tabs.

Memory

One other factor involved with the opening of a large number of tabs is the memory involved. Here’s a rough guide to how much memory the opening of  the same 17 tabs appeared to consume for each browser

200Mb

300Mb

630Mb

700Mb

770Mb

Conclusion

I’m impressed by Opera’s flexibility and handling of tabs, so I’m switching to Opera for a while and I’ll see how I get on.

Is the grass greener on the other side of the tab bar?

Can I live without mile high tabs?

Is my user experience centered around tabs as much as I think?

I’ll be reporting back!

rolex replica rolex replica