Firefox 4 and Internet Explorer 9: Part I

Introduction to the Browser Wars

15 years ago, when the web was young, webpages were static and boring.

Those are the two last words we use to describe webpages today. Sites like online email clients (GMail, Yahoo!, Windows Live), Facebook and Twitter are incredibly dynamic, changing their contents with the click of a mouse without redirecting users to new pages, all the while being aesthetically pleasing, providing real time updates to requests, like the "Loading..." and "Sending mail is taking longer than usual" messages.

These dynamic sites, generally known as Web 2.0 sites, are made possible by the intense competition between browsers. The browser wars started in the 1990s, between Netscape and Windows Internet Explorer (back then Microsoft Internet Explorer). When Netscape virtually lost all of their market share to IE, the Netscape project was donated to Mozilla (kind of), and Mozilla Firefox was born, sparkling the second browser war, soon joined by Opera and Apple Safari.

Chart showing history of web browser market share. Microsoft Internet Explorer has been dominating since before 2000.

Few years later, Google demonstrated their idea of a web browser by releasing Google Chrome with revolutionary features like extremely fast JavaScript engine, good standards compliance, multi-process tabs and clean user interface. These features were widely seen as reasons for the rapid adoption of Google's browser (besides good marketing by one of the world's leading advertising company) and Apple, Opera and Mozilla tried to keep up.

While the programmers struggle, the developers and us, the end users, reap the benefits. The five main browsers today are all very capable. They're, ranked from the most popular, Windows Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari and Opera. Today, I'll be focusing on Internet Explorer 9 and Mozilla Firefox 4. They're still both in beta but are to be officially released within the next two months, intensifying the war.

The five major browsers, sitting on Windows 7 taskbar -- Windows Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari and Opera. Notice that they're all rather round in shape. Coincidence?

If you are a Firefox 3.6 user, you can try Firefox 4 beta by clicking here. Installing Firefox 4 beta does NOT uninstall Firefox 3.6, so you have nothing to lose but about 30MB of your hard disk space. Remember that Mozilla is still actively developing Firefox 4, so expect new features to be introduced, bugs fixed and performance streamlined from time to time.

If you are still using Internet Explorer 6, 7 or 8, please, please, please switch! You can get Internet Explorer 9 Beta here, Mozilla Firefox here, Google Chrome here, Apple Safari here and Opera here.

Part 1: User Interface

Both IE9 and Fx4 feature heavily revamped user interfaces.

The IE team have removed many components previously present in Microsoft's browser. The status bar, search bar and menu bars are totally removed. In fact, there is only one toolbar now, housing the navigation buttons, URL box, tabs and settings buttons. Of course, this means we have a much shorter URL box, but it doesn't really matter because most users don't pay much attention to the entire URLs anyway -- it's the domain and end portions that are important. As a result, more vertical space was freed up, allowing webpages to fill up more of your screen (remember IE6 and the dozen toolbars?).

Internet Explorer 9, displaying my blog.

The only downside is the limited number of tabs practically visible in one window. Of course, you can open as many tabs as you want, but I personally like to see a small portion of the tab's title (not just the Favicon). The IE team, however, has made tab-tearing and arranging possible (though they are already available on most other browsers for literally years). Just drag the tabs to the left or right to rearrange them, or pull them out of the tab bar to force them into a new window.

Looks like IE users with smaller screens will have to make themselves comfortable with multiple windows.

Wait, what about the search bar? Isn't it missing? Well, not exactly. It has been combined with the URL bar, just like Chrome's Omnibar and (to a certain extent) Firefox's AwesomeBar. Just type any search keywords into the URL bar and IE provides the option to search the web by using a choice search engine.

Searching for the phrase "internet explorer 9" by typing in the URL bar. Suggestions are provided in real time. For privacy purposes, this is not enabled by default and can still be turned off after being enabled.

IE8 bothers users whenever a new username-password combination is entered by popping a new window up, asking if it has to remember the combination. In IE9, things got friendlier. Instead of an annoying popup, a small message appears at the bottom of the screen. It doesn't steal focus from the browser window, and hence users can simply choose to ignore it without any extra clicks (from both the mouse and the tongue). This very much reminded me of the way Firefox 3.x handles notifications, except that in Firefox, messages are housed just below the tab bar. Fx4, however, has an less obstructive way of displaying messages, which will be seen later.

Internet Explorer 9, displaying my blog overlaid with a notification at the bottom.

Common to all other browsers, (except the notable Mozilla Firefox), the default new-tab page of Internet Explorer has been improved. Instead of saying the lame "you've just opened a new tab" (I know that, you idiot!), it now shows 10 most frequently visited sites and describes their activity. Just like Opera's speed dial and Safari's Top Sites, one can open any of the sites by clicking on their boxes, but preview is unavailable -- one has to recognise the Favicon and/or name.

Internet Explorer 9's Popular Sites page opens by default when you open a new tab.

Oh by the way, status bar messages now show up as tooltip-like boxes, which heavily reminds me of Google Chrome (again). The Windows IE team has also borrowed the big back button from Firefox, the forward button being significantly smaller.

Switching our focus to Mozilla Firefox 4, the menu bar has been removed as well. Instead, an orange Firefox button has been added at the top left corner as a more space-efficient substitute (anybody else thinking Opera?). Users will also notice that, this time, the tab bar is positioned on top of the navigation bar, just like Google Chrome.

Mozilla Firefox 4 displaying my blog. Note that pre-beta releases of Firefox are branded Minefield, and by default, Fx4 displays status bar and positions the tab bar on top of the navigation bar.

The latest Firefox reincarnation has also got more adapt at handling tabs. Besides the usual tab-rearranging and tearing, users can now switch tabs by using the URL bar, dubbed the AwesomeBar. Just type the title (or URL) of the tab to switch to in the URL bar, and a "Switch to tab" option will appear. Clicking on it will bring the user to the chosen tab at the corresponding window. Handy for users who open, like, 50 tabs at any time.

Mozilla Firefox 4's Switch-to-Tab feature works even for tabs opened in other Firefox windows.

Mozilla has also introduced a prototype feature for tab management, called the Tab Candy. By pressing Ctrl + Space (in Windows, at least), users get to preview, rearrange, close and switch to any tabs open in any Firefox 4 window. One can make previews of less important sites smaller, or even reduce it to a pile, while giving more space to more frequently visited pages. This answer to Opera's tab preview looks promising, but is still rather unpolished and may not make it to the first public release of Mozilla Firefox 4.

Tab Candy on Mozilla Firefox 4

One extra tab-related feature is the addition of App Tabs. In Mozilla Firefox 4, users get to convert regular tabs to App Tabs. This feature, available by right clicking on tabs, is meant to be used with web apps, such as email clients and social networking sites which use heavy AJAX. Sites like these rarely need to be closed or refreshed, so the App Tabs are made smaller, pinned to the far left of the tab bar and have their close buttons hidden. If the navigation bar can be altogether hidden when the App Tab is opened so as to free up more space for the web app, that would be great, but alas, that feature is nowhere to be seen.

The small tab on the left with the Yahoo! logo is an App Tab. Right click on any tab to convert it into or from an App Tab.

With IE9, Opera, and Chrome slashing the status bar and replacing it with temporary tooltips, the Mozilla team have been thinking of ways to hide it and move its functionality elsewhere instead. Perhaps the most useful feature of the status bar is to display the target URL of hyperlinks. In Firefox 4, target URLs will appear on the right side of the AwesomeBar when users hover their cursors over a hyperlink. A great idea, since users rarely have to glance at the AwesomeBar for more than twice at each page, leaving the bar relatively idle.

The AwesomeBar split to two, the left displaying (part of) the URL of the current page, while the right showing the target URL of a hyperlink.

But wait, the status bar also shows the loading progress of webpages. Google Chrome shifted this information to the same tooltip the hyperlink URL was displayed. Opera made do by calculating the amount of elements to be loaded and displaying the number of elements loaded over the number to be loaded at the right side of the URL bar. In Safari, the URL bar doubles as the progress bar, its background changing when the page is loaded, just like iPhone's. This information seems to be missing in IE9 (am I the only one?). The Mozilla team has come up with yet another innovative feature. In Firefox 4 mockups, a thin progress "strip" is displayed on top of each and every loading tab, allowing users to, at one glance, tell which tabs are still loading. The strips disappear once the content of the tab has been fully loaded. This feature hasn't been implemented in the current beta release, however (see https://wiki.mozilla.org/Firefox/4.0_Linux_Theme_Mockups if you're interested), and is instead substituted by a pie-chart-like Favicon. While not nearly as aesthetically pleasing, it is definitely just as practical.

The pie-chart-like icons at the left side of the tabs actually show the loading progress of the tabs. Nice.

Edit 17 Sept: The progress strip for individual tabs has landed on today's pre-beta release of Mozilla Firefox 4 Beta 7, and the pie-chart icons removed. Loading tabs now show a generic favicon, a bug (?) which will probably be fixed before Beta 7 goes live.

Progress strips showing loading progress for tabs. Loading progress for the current active tab is displayed underneath the AwesomeBar instead of on top of its tab. The strips disappear once the contents of the tabs finish loading. They blend in nicely with Windows Aero theme and are neither too distracting nor invisible.

The way Firefox 3.6 handles notifications was fine, but apparently not good enough for the Firefox team. In Firefox 4, these messages are now reduced to mere speech bubbles. As usual, they don't stop webpages from loading or steal focus from the browser window, so users can choose just to ignore it. What I like, however, is how users can choose the "Not Now" option by clicking on anywhere outside the speech bubble, thus shutting it up without even have to move the mouse a single inch.

A notification bubble in Mozilla Firefox 4. Note that the "No" button is missing -- just click anywhere but the notification bubble to shut it up.

All these, coupled with the use of Windows Aero in the browser window, make Firefox 4 a fun browser to use. Best of all, everything from tab bar position (on top or bottom of navigation toolbar) to presence of status and menu bars remain fully customiseable, typical of Firefox tradition.

There are other (minor) interface changes here and there for both Firefox and Internet Explorer, such as redesigned add-ons page (Fx), downloads window (IE), tab animation (both), reload/stop button combo (Fx), but I'll leave these to those who are interested.

Besides interface, the new IE9 and Fx4 are also better integrated with the features of Windows 7. You can pin not just Internet Explorer and Firefox applications to the taskbar, but also sites you frequently visit. Pausing your cursor over either the IE or Fx icons on the taskbar will also show a preview of the tabs (tabs, not windows) opened -- one can switch to or close any of the tabs directly at Windows taskbar. This option can be disabled (at least in Firefox) if you don't fancy it.