Since writing my article on Internet Explorer 7's usability, both Microsoft and Mozilla have released their long awaited browsers to the web community. In this follow up article, we'll see how Internet Explorer 7 and Firefox 2 compare on usability, customisation and aesthetics. The point of this article is to compare the pros and cons of each browser, not to determine which is the best. Personal preference will determine which browser is better for an individual by how a browser accomplishes their tasks and adheres to their needs.

Preparation and Impact of release

IE7 by far had the biggest improvements overall from it's parent IE6 due to IE6 being the least developed browser from it's generation. IE6 does not use tabs and is one of the few that did not have this functionality (although an add on for this was later available). The jump from Firefox 1.x to 2.0 had fewer improvements as FF1.x because there are only so many improvements to make on an already well rounded browser.

With Microsoft's browser being the most widely used to surf the net, their main focus was to tackle the dismal security problems that seemed to constantly overshadow IE's success, as well as catching up with common features of other browsers, such as tabs, integrated search, RSS feeds and improved CSS support. The Mozilla team focused more on speeding up the online experience, security and customisation.

The upgrade checklist for IE7

Since the majority of users used IE6 before this new release and both old and new versions render CSS differently (IE7 fixes many !important CSS bugs), many webmasters have had to do a lot of testing and adjusting to ensure compatibility.

Not everything is compatible however, witnessed first hand with the content management system (CMS), used at my educational institution. It was a bad part on Microsoft's side to wait so long to release a new browser. The changes between versions are so great that performing adjustments to pages, removing hacks, adding conditional statements, etc, takes a lot of effort and time. The latter being less abundant, we see large educational institutes, government computers, corporations being slow to perform the required modifications or some still relying on IE6 and avoiding upgrading at the present time. Microsoft did make things easier though by spacing out the release dates of the beta and the final product considerably, enabling sites to be tested and adjusted by those who could. With some people hanging back from upgrading, there will be a longer period until IE6 is phased out.

Many web designers/webmasters will be likely to keep IE6 installed for testing at least until IE7's user base surpasses that of IE6. I myself have IE7 installed on this machine and IE6 as it is on Vmware. That way at least my box is more secure with IE7 and any security issues from IE6 are confined to a virtual image.

If you hate IE7 and refuse to install it, then this is the site for you. This handy site will create a screen shot of a URL as it appears in IE7.

UI layout

As mentioned in my previous article, usability in IE7 seems to have taken steps backward and forward while trying to break away from the norm. Firefox has always opted to use the standard UI layout allowing users to eradicate the majority of learning curves. There is also a strong argument that IE is being innovative and brave with their departure from the norm In the end standards and norms come from use and acceptance. Time will tell if changes are welcome or not.

Main button locations

While FF2 kept to the standard layout, IE7 opted to keep the separation of the back/next and refresh/stop buttons, with the URL bar in between. Potentially annoying from a usability standpoint:

For example if you want to stop a page from loading, go back and then refresh the previous page, you have to make two trips each the width of the screen to accomplish this.

IE7 Menu bar (also known as classic toolbar)

IE7 has the ability to turn the menu bar (classic toolbar) on or off and use the 'Command Bar'. The Command Bar acts as a shortcut bar containing the most common options and other features from the menu bar. When the menu bar is enabled it appears underneath URL bar, which is not a common location. It would be nice to be able to unlock and drag the bar to a desired location but no dice. In order to move the menu bar to the top, the registry has to be edited:

Thanks to the "[Geeks are Sexy] technology news" blog for providing the fix. Always be careful while editing the registry.

• Close IE7
• Open the registry editor (Start > run, then type 'regedit' and click OK)
• Browse to 'HKEY_CURRENT_USER\Software\Microsoft\InternetExplorer\Toolbar\WebBrowser'
• Select 'WebBrowser' key, right click it and select 'New > DWORD Value'. Name it 'ITBar7Position'
• Double click 'ITBar7Postion' and assign it a decimal value of 1
• Restart IE7

FF2 Menu bar

What is nice about the FF2 menu bar is that extra items can be added before or after to save on vertical space. For example, I have moved the 'Navigation bar' contents to the right of the menu bar. To rearrange toolbar positions and their contents:

• Right click on a toolbar (not the tab bar) and select 'Customize...'
• Drag and drop icons, or even drag and drop the toolbars themselves
• Click done

Tab bar

FF2 vastly improves its tab bar by taking a couple pages out of IE7's book. Individual tabs now have a 'close' button on the right to avoid closing multiple tabs by mistake. The previous version of FF had a single close button for all tabs, the tab with the focus being assigned to that close button, making it easy to click more than intended and closing wrong tabs.

FF2 also adds scroll buttons to the tab bar enabling the tab title to still be read even if there are more tabs open that the browser width can currently display. IE7 also shows scroll bars once there are enough tabs open but these buttons take you to the front or back of the tab list. I, myself am a user who usually has more than 5 tabs open at a time so I find FF2's full browser width tab bar handles this preference comfortably. IE7's tab bar shares it's space with the 'Command bar' and has a shorter minimum tab width (about half the size of FF2's minimum tab width) so having many tabs open makes it harder to switch to a tab a user may be looking for.

Both browsers also have a drop down list to show all the tab titles that are currently open. This is very handy for quickly scanning tabs in a concentrated area, eliminating eye movement from back and forth horizontally. IE7 went even further and added a background colour to tabs in this list that are still visible on the tab bar - a small difference but it definitely helps with finding your bearings in a sea full of tabs.

Features from FF2 that would improve IE7

The spell checking feature also saves a lot of time and excuses for spelling errors when writing in web forms. It works very similar to Microsoft Word's spell checker by creating a red line under a misspelled word and extremely useful for bloggers or web authors.

Search suggestions also speeds up searching by providing a list of possible matches for what is currently being typed in the search field, changing as you type until the matches cannot be narrowed down any further. It's almost like a vast reservoir of auto-complete items, only the user doesn't have to type them all out!

What I like most about the new version of FF is the restore session feature. Although not a new innovation for a web browser (KDE's Konqueror has had this for some time), it's nice to pick up where you left off in the case of a system/browser crash or even on boot up.

IE7 allows you to save and re-open tabs but only if you close down the browser. If multiple tabs are open while closing, a dialog box will open asking if you'd like to close all open tabs. Clicking on 'Show Options' allows the user to check a box that enables this feature. If you want this functionality, then this option has to be selected every time the browser shuts down and is not immune to system/browser crashes.

Features from IE7 that would improve FF2

The open new tab button in IE7 appears directly after the last open tab and gives the user very easy access to open a new tab whenever desired. Unfortunately in Firefox it's a little harder for users to figure out how to open a new tab, having to use the menu bar, or keyboard shortcut Ctrl+T.

Features lacking from both

One annoyance for me is clearing the URL. I'd like to see a button to the left of the URL bar that when clicked, clears the current URL, ready to type a new one. This has also been a feature of Konqueror for some time.

Conclusion

Both browsers have their own features that distinguish themselves from one another and create their own identity. Some people prefer Firefox, some people prefer Internet Explorer. Some tools are better than getting the job done than others so being a web designer; I installed both and use either one to accomplish whatever task I have to do. For now though, Firefox just pips Internet Explorer as my personal preference for general web browsing as it's the better security history and extra features that make my web experience more productive and enjoyable.