Thanks for giving my pixels back, browser makers

I'd personally like to offer browser makers my gratitude for realizing that my screen isn't big enough.

I'm one of those people who wants every bit of display real estate I can get. The more I can see of the document I'm writing, the in-box I'm scanning, and the photo I'm editing, the happier and more productive I am.

The maximize button is my friend. Toolbars are my enemies.

So I'm happy to report that browser makers are paying new attention to the issue. It's important to me for reading Web sites, but it's really important to me for the new generation of Web applications. A row of pixels saved once in the browser is returned again with each Web-based application.

Mozilla's ultimate goal is to make the user interface step into the background as much as possible--indeed, the mobile-phone version of Firefox now under development has no visible user interface until it's needed. "Every time a user has to think about how to do something, instead of what we want to do, we as software creators have failed," said Aza Raskin, Mozilla's leader of user interface work.

But it's not simple to redesign the browsers. Users can be confused when interfaces change, some controls are essential, and hiding them can cause problems.

"The challenge to reducing UI (user interface) is in recognition versus recall. People generally use what they see," Raskin said. "How can we provide one-click access to everything possible on the Web without also cluttering the screen? That's a question we are still answering."

Microsoft's case is illuminating. Its Internet Explorer 7 hid the menu bar, though it could be revealed by pressing the Alt key, but IE 8 shows menus by default. (It can be hidden again by default if people choose, and I do.)

Reclaiming real estate
There's been some work in this area for years. For example, hitting the F11 key in Windows puts Firefox into a full-screen mode, hiding title, menu, address, and tab bars. And Microsoft's Internet Explorer 7 hid the menu bar, though it could be revealed by pressing the Alt key; IE 8 shows menus by default again, though it can be hidden again by default if people choose, and I do.

But now the pixel reclamation effort is taking off in earnest. The big statement came in September 2008, when Google revealed its Chrome browser--ironically named because it aims to move the user interface elements, called chrome, as much into the background as possible.

Chrome wiped out the title bar altogether and arrayed its browser tabs in the newly freed space. It also wiped out the menu strip and tucked the options into two drop-down menu buttons to the right of the address bar. Information that would show in a status bar, such as the actual URL of a Web address you're hovering your mouse over, appear in a temporary box that appears on the lower left. When you search a Web page, another small window appears in the upper right. (Chrome looks somewhat different on Mac OS X, which always uses a menu bar at the top of the screen that's detached from the browser Window itself.)

An example of Chrome's latest interface on Windows.

(Credit: Screenshot by Stephen Shankland/CNET)

Chrome on the Mac can't free up the menu bar real estate, so it looks different than on Windows.

(Credit: Screenshot by Josh Lowensohn/CNET)

Missing at launch was a full-screen mode, but Google rapidly filled in that gap. This max-screen ethos is one reason that Chrome, at present at least, is my default browser.

Another change came with Safari 4 from Apple. Like Chrome, it added the two-button menu icons toward the upper right. Unlike Chrome, it sports a traditional menu bar as well, though with the Windows version it can be hidden to free up some real estate.

Safari 4 lets you hide the menu bar--but between the beta and final versions, Apple moved the tabs to the more conservative position immediately above the browser Web page.

(Credit: Screenshot by Stephen Shankland/CNET)

Unfortunately, in my opinion, Apple backed off from another change between the Safari 4 beta and final version. Initially, the browser sported tabs in the title bar, like Chrome, but Apple later moved them into the more conservative position immediately above the Web page.

The next move comes from Mozilla, which leads development of the Firefox browser.

With the dash to release Firefox 3.5 now over, developer attention again focuses on the future. Last week, mock-ups of Firefox 3.7 arrived to trigger discussions of what the final interface should look like. On display were two Chrome-like characteristics: the two menu icons and the missing menu bar.

Shortly afterward came the Firefox 4.0 mock-ups, moving the tabs to the title bar in one option that's even more Chrome-esque.

This Firefox 4.0 mock-up shows a very Chrome-like interface.

(Credit: Mozilla)

One of the big assets Firefox has is its extensions system, which can be used to customize the browser. One I like is autoHideStatusbar, which reclaims the status bar real estate except when I need it in order to see where a link on a Web site leads. I also use Tree Style Tab to move tabs off to the left; I typically need vertical space more than horizontal.

In the same vein, those who were enamored of the Firefox 3.7 mock-up look can try it themselves in the real world with a three-step change LifeHacker put together.

The Web app era
How all these changes will shake out isn't clear yet. But what is clear is that influential developers believe thin frames are better than thickets of icons, menus, bars, and boxes.

The Web application trend is one reason this trend is important.

Consider for a moment Microsoft Word. Especially when the newer version's ribbon of icons is active, it requires a fair amount of area to house its controls.

Now consider Google Docs, which must add its word-processing user interface elements with those already present for the browser itself. Those using the application must bear a double burden. It's like going back to the era of 800x600-pixel displays.

Now factor in the Web application future--Picnik for photo editing, Zoho for office productivity, Bespin for programming, even Microsoft Office soon. These applications are increasing in number, sophistication, and importance, even if they aren't replacing desktop applications as soon as Google Chrome OS developers might hope.

A little bit of screen real estate saved in the browser is multiplied many times over across this range of applications. And of course, conventional Web browsing can benefit, too, offering the possibility of more information and less scrolling to get to it.

It takes real work to pare back a user interface without impairing software's utility. But until the day arrives when my screen is displayed on an entire office wall or directly on my retina, I'll hoard every pixel that browser developers can give me.

[zubingarda]

Obviously, you don't seem to be a user of F11 key. Universal for ALL browsers. ALL the real estate you want.

Peace.

[BK216]

yeaa i was gonna say F11 ftw. Universal in Windows period, works in any kind of "Explorer" program

[Super2online]

These minor modifications being done to the browsers only reduce one row, something that F11 thrumps with aces. And as mention, it has been available forever. Come on Stephen, you really need to get with the program.

[squished]

All of you need new glasses. He mentions F11 in paragraph 8.

And I'll also say relying on F11 is a deficient solution. It's a extra step that shouldn't be needed. Also makes it harder to switch browser window to the other monitor. For those of us who cherish our screen RE, moving windows across monitors is a big deal.

[Shankland]

I specifically mentioned F11, but it's not universal for all browsers. Safari and Opera 10 beta don't implement it, for example, and I'm not aware of any browsers that offer it on Mac OS X. (I find maximization in general behaves not to my liking on Mac OS X, but that's a separate matter.)

[Shankland]

Pardon me, Opera 10 beta 2 *does* support F11; for some reason it didn't during my initial test, but it does now, and there's a "full-screen" option in the View menu.

[4score20]

I too have trouble getting Opera 10 to go full screen sometimes using F11. However, Opera has had true full screen at least since version 8. Firefox, in my experience, does not have true full screen, it leaves a small strip at the top of the screen. IE 7 and 8 also have true full screen.

[bluemember]

This article should have talked about saving pixels where it matters the most: the iPhone screen. There are several browsers in the app store that offer hidden toolbars: Quicky, Bolt, etc.

[journeyman_steve]

I can't believe that many people enjoy a FULL full screen. Two reasons:
1) most site/page layouts aren't going to have anything other than pad at left and right, especally if you have a decent sized widescreen monitor
2) what is the point of covering up all your other applications "windows" in a "windows" envirnment. It has a plural noun name for a reason -- More than ONE window. Hiding windows under a full-screen one I find annoying, especially as the shell commands for focus from various applications are implemented differently, causing my alt-tab t not work as it has in the past.

[Gonzie]

Mac's have a great button in the top right corner of (for example) the firefox window, click it and it hides the addressbar and bookmark bar. If it had a keyboard shortcut I'd use it a lot more.

I'm looking forward to more experimental/smaller firefox themes being available, not that Mozilla will make a decent Mac theme themselves but GrApple will soon make up for that

[irha73]

You can install addons to automatically disable tabs, locationbar and statusbar on startup. On top of that you can change Info.plist to not show menubar and dock when firefox is in the foreground. The only thing you can't hide is the titlebar, so this is very close to fullscreen.
See this post and the associated thread for more details: http://mydellmini.com/forum/mac-os-x/7287-i-miss-fullscreen-firefox-osx-3.html#post84519

[FF2009]

I like my menu bar back and my bookmarks on top like they are now..I don't know. The the Firefox mock looks good but there are this few options that bother me and they are stupid....like tabs on top? meh, not feeling it

[discern]

When I first used Safari with "tabs on top," I absolutely despised it (this was during the Safari 4 Beta days). But after a while I began to appreciate them. More screen real estate was there, to be sure. The only drawback?and this was minor?was that the width of each was variable, so the close button for any given tab was not always in a predictable location. However, it did allow for easy reading of more of the page title, if you had only few tabs open. Now that Apple has put the tabs back below, I miss them being on top. I'd like to see a check box in the preference to put them back on top.

[Shankland]

@discern: I liked it too, though I didn't like the understated coloring, which made them fade too much into the background for my tastes, and I didn't like the variable width either. It was helpful because you could see more of the title bar when there was room for it, but when there were just two or three tabs sometimes there weren't enough visual cues for me to recognize "this is a collection of entities." Just making them fixed-width would have been fine by me, though.

The close-box location issue is complicated for Apple. On Mac OS X, the minimize/maximize buttons are on the upper left, so it makes sense to put the close box on the left side of the tab. But of course on Windows the close box is on the upper right, so what should Apple do on Windows? Upper left won out, so it works differently from one OS to another. I don't like the way Safari hides the close box unless you hover over the tab, though.

[Random_Walk]

" I don't like the way Safari hides the close box unless you hover over the tab, though. "

IE 8 has the same behavior.

FF3.5 has the close button always present, but not highlighted until you hover over it (but is still there).

[blueonionsoftware]

Definitely agree! I've had the same issues with browsers for years and have suggested even more aggressive changes. http://blueonionsoftware.com/blog.aspx?p=66d84184-1cc7-49ef-a918-6f6009b89726

[young_design]

I guess this whole process rules out any Microsoft Browser then... Their icons seem to be getting bigger and bigger!? How freakin' huge does a Home button need to be?

Let alone when viewing on a crappy screen resolution.

[CandyRyan]

Love F11

[epiac1216]

It all depends on the tastes and preferences of the user. Programmers must listen to what the users have to say and then act accordingly. Don't change something just because one user likes the screen this way or that way. Listen to the mainstream user and then take heed.

[knowles2]

Good advice to the open source community, shame that most tend to ignore good usability advice or any suggestion on the usability front like the plague.

[SteveMcQwark]

Good thing usability isn't based on advice, but on testing. I'm sure if any project listened to all "advice" they'd end up with the worst UI ever conceived.

[Nobri]

I think that Firefox looks better with tabs on bottom. No one can quite pull it off quite like Chrome. And it seems that you have a problem with your code. There should be no space between the beginning tag and the "a" in the hyperlink, but one after the "a". Also, you didn't end the code. This is referring to you trying to link to "Tree Style Tab".

[Shankland]

Thanks--we fixed the broken link. For reference, Tree Style Tab is here: https://addons.mozilla.org/en-US/firefox/addon/5890

[dburr13]

Looks like it'll be a lot harder to work with this stripped down interface...It's a cool look...but as a browsing tool it's not what i want.

[pcdude2143]

Of course, someone will probably make an extension to get the menu bar back. It's just a matter of time. The thing to understand with Firefox is that as a browsing tool, it's WHATEVER you want. If you don't like it, find an extension to change it, or make one yourself. It's simpler than IE Addons.

[Shankland]

I agree with pcdude2143 that somebody will offer an extension--but I suspect it's even more likely that Firefox itself would offer it as an option even if it's disabled by default. In any event, bear in mind that these are just mock-ups, not final designs.

[knowles2]

I be surprise if they do not add in a option to customise the interface to your heart content. That if they even have the guts an courage to make the radical change shown in the mock-ups, I suspect that they will not.

[pcdude2143]

The Firefox mockup seems to be more "follow the leader" than innovative. Not that Mozilla Firefox needs to be too innovative, because we have extensions for that. Start simple, and CHOOSE what you want. That's the open source way.

[Mergatroid Mania]

I agree 100%. Use those extensions and skins.

Personally I like having the menu bar at the top of the screen. The amount of realistate it takes is miniscule compared to the overall size of the screen, Complaining about 1/4" on such a large display makes no sense to me whatsoever, especially if you can modify it how you want anyway.

If you don't like it, change it to suit you. Leave us people who like the menu bar alone. If you're using a crappy browser that can't be modified or customized, who's fault is that?

[SteveMcQwark]

Its not so much about space as clutter. The two button model tends to be cleaner than the menu bar. For one thing, it makes developers reconsider what actually needs to be in a menu. It also usually makes more sense. If it has to do with the current page, put it in the "page" menu. Otherwise, the "tools" menu. In Firefox, utilities are scattered through the File, Tools, View, Edit, and Help, not always in a logical way. Many items are redundant. Many should be preferences options. Many are simply misplaced.

Things for the page are in File, Edit, and View. Things for the app are in File, Edit, View, Tools and Help. There's a button for "Search Web", which just links you to the search bar. There's an "Open Location" button linking you to the address bar. There are print options, which should be in the printer dialog, but are in the file menu. Updates are in "Help". The "Clear Recent History" button is in the "Tools" menu, not the "History" menu.

Still fond of the menu bar?

[codynews]

This is why I like chrome. Very small no-frills interface. IE and Firefox are one in the same... slow, fat, and ugly.

With Chrome available for people that don't like IE, it seems that Firefox is really just around to serve the people that like the look / feel of IE but hate Microsoft for some reason.

[cougar888]

I used to use Firefox as my main browser for a few reasons.
1. Extensions
2. It supported some standards (I'm a web developer)
3. It was faster than IE

I now use chrome because of the simplicity and the speed. Once I got a taste of fast browsing, I can't go back. I also love that chrome updates in the background without asking. It is so annoying when Firefox asks me to accept updates every time I open it.

[knowles2]

I somewhat agree with that statement, Both are slow and bloated now,
I use chrome and simply cannot stand to use IE or FF3.5.

[cidman2001]

I've used Chrome from day 1. Although I'm not an IE hater like some, I was tired of all the crap it attracted and all the bloat and drag IE accumulated. I found that Firefox was great, but I spent more time trying to find new ways to use extensions than I did browsing. How many extensions do you really need on any kind of regular basis? With Chrome, I can now absorb twice the amount of useless information in about half of the time! I know they will. but I'm really dreading the day Google opens a Chrome app store or some other BS.

[mattharms]

SRWare Iron > Chrome

[LANjackal]

RE: MS Word: You can hide the ribbon in Office 2007 or later by double-clicking on the ribbon tab, resulting in a view that pretty much shows the document only and nothing else

[Shankland]

You can also hide (and show) the ribbon by clicking Ctrl-F1, which is mostly what I do.

Microsoft told me that people started exercising a lot more of what Office can do once it was exposed through the ribbon. Personally, I don't do too much with Office and generally want it hidden. (I also got annoyed that keyboard shortcuts take longer--e.g. to paste special in Word or Excel I now have to type Alt-H-V-S instead of Alt-E-S, and it takes longer to wade through all the ribbon rendering to actually execute the command. (Happily, in Word 2007, I can also set it to paste unformatted text by default now, so that ameliorated the problem.)

[knowles2]

I think the ribbon was the best idea Microsoft have come up with for a long time.
Yeah people moaned about it like hell but then people moan about any change in there lives, even if it does makes life easier, quicker and simpler, once you put the ten minutes or so it takes to learn where the new stuff is.

But the real benefits of the ribbon become obvious when you use it on a touch screen device.

[mrosenecker]

I'm with FF2009. I like the buttons and menus where they are. Things are twice as hard to find in the current generation of browsers as they were in previous ones. And the example drawn with the Office Ribbon Menu is perfect. Is there anyone here that actually LIKES that thing?

[knowles2]

Yes I actually love the design of the ribbon, probably the best thing they have done to office in a long time. It far better the previous antiquated design.
It was also the bravest thing Microsoft done in a long time, forcing people to change instead of giving them the choice.

[raphinou]

What about using tiling window managers on a GNU/Linux system? If you're so eagerly looking to get back those lost pixels, you should definitely give it a try. See for example http://awesome.naquadah.org/ , http://xmonad.org/ .
You can find a list on wikipedia: http://en.wikipedia.org/wiki/Category:Tiling_window_managers

It takes time getting used to it, but after that it's har to go back (in my own experience).

[i-arman]

While I agree that screen real estate is important (one of the many reasons I switched to Opera years ago), it can get to the point where it's more trouble than it's worth. If the 10-20 pixels at the top of your screen really matter that much, you should probably spring for a second monitor, and keep your work visible at all times on two screens. If it's vertical space you need, get a widescreen monitor and turn it on its side; even a standard 1600x1200 on its side seems pretty tall.

[Shankland]

That's all well and good for when I'm parked in front of a desk. But I'm very often working on a laptop on the road. And even on a big screen (my home monitor is 1920x1200) I always like a little more real estate. I do use two monitors at work, but for separate applications, so the second monitor doesn't magically get me more real estate for Web applications, word processing, or whatever I'm up to. It just usually lets me use two applications full screen at once (except in the case of dual-monitor software such as Adobe Lightroom).

I too like as much screen RE as possible. I, like the author do not mind if my screen is cropped a little on the sides but up and down, I want as much open area as possible. Why? Well I rarely have to pan any web page side to side but I do have to scroll up and down a lot onmost web sites and documents. To gain some room, I have moved my Start , Task Bar, Quick Launch all to the right of my screen. The Start is now in the top right of my monitor. I can have more open programs lited there too as the link bars for them are shorter than they are wide. To do anything else just doesn'tmake sense to me.I realize that is just me but I really love it this way. I've never seen anybody else do this. Am I just wacked or what?

[TV James]

> Google revealed its Chrome browser--ironically named because it aims to move the user
> interface elements, called chrome, as much into the background as possible.

Why is that ironic? Why not appropriate or clever or cheekily? Is it ironic because its name calls attention to that which the program attempts not to?

[Shankland]

Irony: "incongruity between what might be expected and what actually occurs." Chrome actually attempts to minimize chrome.

This is actually one of the things I love about Firefox - its configurable. After using Chrome with it's minimalist browser chrome I did the same thing in FF by dragging all the pieces onto one line (right click on toolbars, drag around, then turn off all the toolbars). I have my nav buttons, menus, address bar, and quick search all together. This gives me so much more space I find using IE painful because of all the uselessly consumed room on the screen. I'm glad to see an attempt to rein in the toolbar sprawl and give me more usable space as I do more and more work in a browser. And its not just a few pixels, you have the menus, the nav controls, the tabs, the bookmarks, etc. It really starts adding up.

[PhaseDMA]

Good article