Should Browser Tabs be Above or Below the Address Bar?

Tweet

Mozilla has decided that tabs will appear above the address bar by default in Firefox 4.0. The tab positioning debate has raged for years, but the organization has determined that on-top is the most logical arrangement.

Until now, the browser vendors have been fairly evenly split. Opera 7 was one of the first browsers to feature tabs — they were positioned above the address bar although the back, forward, refresh and home icons were above the tabs. Opera 10 now has tabs at the top.

Google Chrome went further than most vendors and replaced the window title with a tab bar. Apple tried a similar arrangement in the Safari 4 beta, but abandoned the idea and returned to tabs below the address bar in all subsequent versions.

Microsoft position tabs below all the other controls, although I suspect the IE7/8 interface was designed by committee. Let’s hope they address it in IE9.

Firefox had tabs below the address bar since the early Phoenix days and, although there are many tab extensions, there aren’t many which rearrange the position.

Mozilla cite four main reasons for their change of opinion:

  1. The conceptual model: the address bar and controls apply to the current tab.
  2. App tabs: like Chrome, Firefox 4.0 will allow you pin small regularly-used tabs to the tab bar. The address bar and other controls will be removed for these web applications.
  3. Tab-based UI: Firefox 4.0 will show windows such as downloads and the bookmarks organizer in tabs. It makes no sense to have the address bar and other controls visible.
  4. Notifications: some error and warning messages now appear below the address bar.

I’m sure Chrome and Opera also influenced their thinking.

The downside is the increased mouse distance to the tabs. However, it’s possibly easier to select tabs at the top of a window which is positioned at the screen edge.

Mozilla has asked for feedback and is undertaking usability testing. They have provided a page with a video and screenshots and, so far, the response has been mostly positive. You should also note that it will be possible to change the Firefox configuration if you prefer tabs below the address bar or can’t adapt to the new layout.

Should browser tabs be above or below the address bar? Please cast your vote on the SitePoint home page or leave your comment below.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Derek

    Definitely above. Any tabs below the address bar should relate to content for that page.

  • http://www.nosbod.net Nosbod

    Try Strata40 theme with the StrataBuddy add-on for tabs on top in Firefox. I preferer it this way.

  • http://logicearth.wordpress.com logic_earth

    I’ve been using Tab on top in Firefox for a bit now and I must say once you get used to it, it actually does make a lot of sense. The forward/back buttons and address bar feels more at home under the tabs. A logcial connection I suppose one could call it.

  • ahallicks

    I think having them above would be my personal preference, but allowing the user to choose what they want makes the most sense.

    Of course, if you first release a browser with tabs above the address bar, then that will be what your customers will become accustomed to. But making the switch is something a little bit more tricky.

    I think it would make more sense for the new Firefox 4 to have everything in the same position, but to make light of the fact that you can change the preference. Then those that don’t care, won’t change. Those that do, will change!

  • http://www.aplossystems.co.uk AplosSystems

    Usually I don’t like tabs on the top, so I don’t like using Chrome. But for what it looks like Mozilla is trying to do, it looks like it could actually work. Grouping the icons, address bar and the extra toolbars to that particular tab looks rather nice (except the XP ones)
    Just for the record though, I would have to say that it should be configurable.

  • Ogvidius

    I reckon tabs above the address bar are the best, and most space efficient. Chrome has the best layout in my opinion. Title bars are unnecessary with a browser like that and hiding all the menu options away are nice too. The browser should show as much of the web as possible, and as little of the browser’s ‘bits’ as possible. That’s why Chrome is a favourite of mine. Most other browsers feel a little cramped now.

  • http://www.visual28.com visual28

    I personally hate top tabs. For me, it feels like the tab has no relationship to the content when you have a bunch of bars in between. Having it configurable by the user would be the best solution since so many people are polarized one way or another on the topic.

  • http://www.mortier.ca/ Ryan Mortier

    Definitely on the top. There is all of that unused and wasted space from the title bar anyway.

  • Anonymous

    I think it’s a waste of time and resources on everyone’s part to worry about something like this.

  • Tarh

    Should browser tabs be above or below the address bar?

    Neither; they should be in a pane on the side of the window (technically, some will end up above and some will end up below).

    I have plenty of horizontal screen space to spare (especially with the popularity of fixed-width layout sites that fall far below my resolution), so I might as well make use of it. This is also the reason why my taskbar is now on the side of the screen.

  • http://www.xraysierra.com XraySierra

    I just downloaded the new FireFox 4.0 beta that was released an hour ago, and the tabs are BELOW the address bar. What up with that?

    • http://logicearth.wordpress.com logic_earth

      The UI is still in mock up mode they have not gone into developing it yet.

    • Captain DDL

      If it’s like the developer preview, you’ll need to go to View – Toolbars to enable “Tabs on Top”.

  • http://www.flashminddesign.com flashmind

    I don’t see why it should be a debate to begin with. Configurable just makes sense. Personally I wouldn’t mind them on the right side, or even have them auto-hide similar to how Macs allow that functionality. It is just common sense that making it easy for the user is always #1.

  • http://fcOnTheWeb.com ferrari_chris

    Above. Like you said Craig, the controls belong to the specific tab (address bar, forward/back) so they should be in the tab.

    Makes sense to me.

  • Mahz

    I use Chrome 99% of the time time and the first thing I noticed when using other browsers, even Opera with its tabs at the top of the screen, is how much I toggle between tabs by jamming my mouse to the top edge of the monitor and clicking. Opera tabs stop a few pixels from the top of the screen which was frustrating enough for me to drop it as my secondary browser. Tabs should only require horizontal accuracy to click, not vertical accuracy as well.

    • stve

      I use Opera tabs & on Top & whether the tabs extend to the very top of the screen depend on the skin used there are several available ,
      once you get used to the freedom of just throwing your mouse to the top it’s hard to switch to browsers that do not support it.
      I especially love the smooth tab previews you get with opera by dragging the mouse along the top of the screen.

  • Wardrop

    Fitt’s law alone probably would have been enough justification to move the tabs to the very top of the browser. Mind you, Fitt’s law only applies if the tab buttons actually extend to the screen edge (like in Chrome). If Firefox move the tabs to the top of the browser but don’t respect Fitt’s law, then they’ve missed out on a very big enhancement to their interface. If they DO respect Fitt’s law, then it’s surprising it’s not included as a fifth bullet point in their main reasons for moving tabs to the top.

  • http://r.je TomB

    It should be a user definable option. It’s a personal preference.

  • http://codefisher.org/ codefisher

    I like all the concept of grouping stuff with the tab, I guess it logical connection in uses mind of how things are connected. But for me, I will continue to use Tree Style Tabs. Putting tabs horizontally does not work when you have lots of tabs open at the same time, and would like them grouped by how they were opened.

  • pyrahawk

    Above the address bar. Although it would be cool to have like a pseudo tree-style tab design, like if you hover the mouse over one of the tabs it expands out and shows any child tabs under or something. That would solve the cramping problem i suppose

  • http://www.mikehealy.com.au cranial-bore

    I use Chrome and Firefox regularly (both always open, swapping between them), and didn’t even notice the difference until I read this article.

    Tabs above the address bar is more logical, in that the tab is like a “heading” for the current view, and the address is a product of that tab. I think users will adjust quickly. Tabs are used often. After a day or two most users would forget how the previous layout used to be.

  • maryisbusy

    until this was pointed out I didn’t even realize there was a difference. I use both Firefox and Chrome often and I had to check just now to notice that the tabs are in different locations. guess that means it doesn’t matter to me!

  • BottomsUp

    Bottom of the browser merged into the status bar area, even better flip the whole browser to have all UI features at the bottom. If not that fully drag and drop each major section of the UI.

    • http://www.optimalworks.net/ Craig Buckler

      That’s an interesting thought, although the designer would need to ensure the UI didn’t look like part of the page.

      There’s no reason why tabs and toolbars shouldn’t be draggable … it was done in Word 2003 and probably earlier versions!

  • http://www.deathshadow.com deathshadow60

    Neither ;)

    As a Opera user I prefer to have mine as a single column on the right side, one atop the other vertically.

    Makes more sense from a screen real-estate perspective, with so many websites designed as crappy little fixed-width stripes, and even my laptop being a 1440 widescreen, it lets me put them out of the way and gives me more space on the vertical to show what I really care about – the site content.

  • mathieuf

    I agree with @tarh and @deathshadow60, that the tab navigation on the side is appropriate. However, I do not usually run on a display that is wide enough to support this. I already leave my bookmarks open in a side panel to have this navigation handy. Too many web sites are designed to fill a viewport horizontally on a 1024×768 display, assuming the browser is maximized with no horizontal space taken up with the bookmark panel.

    Primarily I use Opera and the tabs above the address bar make sense, per the four reasons cited in the article, especially item 1.

  • psychobeing

    Personally I believe that it should be the user’s preference. However, using my own workflow as an example, I much prefer having the tabs below the address bar, since once I am ‘logged on’ to a website (especially in the case of article and forum-based websites), I tend to have an assortment of tabs open. Having the tabs closest to the view of the site helps with switching between articles and generally dipping in and out of the information.

    Saying that, I am a big fan of Firefox and so as long as I was given a choice I would still stick with Mozilla.

  • Stevie D

    You say that “Opera 10 now has tabs at the top”, but what you don’t mention is that in Opera 10 (just like every previous version of Opera), it’s fully configurable. So I have my tabs across the bottom of the screen (nowhere near the address bar), like an internal taskbar, which to me makes the most sense. For all other applications, I have to go to the bottom of the screen to switch between them, so to have tabs in the same place is logical.

    As others have said, why does it have to be a diktat from the browser manufacturer? Why can’t Mozilla and Google be more like Opera and give users the choice as to how they want their screen laid out?

  • netrox

    The tab should be above the address bar because each tab should be viewed and/or perceived as an independent window with its own address bar.

    Chrome does it right with its UI.

    When I use IE8 or FF, I feel weird as it seems like all tabs are related to the current address bar. It’s not right. It’s not intuitive. It’s not grouping them correctly. You don’t group several websites with an address bar like you don’t group several houses with mailbox.

    So, tabs at the top is the right user interface design.