Mozilla Firefox is an open-source web browser that is popular for its security, third-party add-ons called extensions, and it’s speed relative to the current dominant browser Internet Explorer. Today we embark on a three-part series about making Mozilla Firefox usable.

Stock Firefox uses too much space at the top

Our biggest beef with web browsers today is the amount of space used by the browser. For every pixel the browser uses for title bar, menus and other components, one fewer pixel can be used for the browser’s primary function of displaying web pages. This need for thin browsers is especially apparent on netbooks, where vertical pixels are at a premium. As shown above, a stock installation of Firefox uses a ton of unnecessary space from the top of the title bar to the start of the web page. Fortunately, Firefox can be made to take up the least real estate of any browser, and all it takes is a few simple steps.

1. Rearrange the buttons
2. Turn off the Navigation and Bookmarks toolbars
3. Turn of unnecessary tabs
4. Install Classic Compact extension

1. Rearrange the buttons
Let’s begin. Step one is to rearrange the buttons. As you can see in our starting screenshot, there is a bunch of extra space in the menu bar – space enough to include the complete contents of the navigation bar, especially when you consider that most of us use Firefox on wide monitors. To make the change, click View > Toolbars > Customize. Once the customize dialog box is open, you can simply drag and drop the buttons and the address and search boxes from one location to another.

2. Turn off the Navigation and Bookmarks toolbars
Once everything is moved out of the Navigation toolbar, you can turn it off. We like to turn off the bookmarks bar as well, as we’d much rather have the extra space than the training wheels that are browser bookmarks. If you like the bookmarks, you might consider installing the Tiny Menu add-on which replaces the menu items with a single drop-down menu, allowing you the space to merge your bookmarks to the menu bar just like the navigational elements.

Here is a screencast showing steps 1 and 2 in action.

Click here to view the embedded video.

Turn off unnecessary tabs in Firefox

3. Turn off unnecessary tabs
Older versions of Firefox didn’t show the tabs bar unless there were more than one tab open. Recent releases of the browser now show the bar, even if you’re only using one tab. This annoyance is easy to fix. Click Tools > Options and then select the Tabs section. Uncheck “Always show the tab bar” as shown here.

4. Install Classic Compact
The last part of the screencast shows the checking of the ‘Use Small Icons’ box, but for our tastes that option doesn’t go far enough. Fortunately there is a third-party add-on called Classic Compact that does a great job of making the buttons use enough space to be useful and no more. Installation is very simple. Click Tools > Add-ons and search for “Classic Compact” in the Add-ons search box that comes up. Once you install it, you’ll be prompted to restart Firefox.

After completing these four steps, you’re leave with a very lean browser that properly devotes as much space as possible to the content you’re viewing. Here’s our finished product.

Have you figured out how to optimize other browsers? Let us know in the comments.

Last October, we shot out a heads-up regarding an out-of-band update from Microsoft. An out-of-band update is one that is released outside of the patch Tuesday update schedule, the well-known pattern Microsoft has established for releasing updates to its products on the second Tuesday of each month.

Today, Microsoft has released another out-of-band update. This update fixes a critical security hole in Internet Explorer that could allow an attacker to compromise a system and gain control over it. Microsoft doesn’t release out-of-band updates often, so when they do you can know that they’re fairly critical.

Read more about today’s critical update from Microsoft’s website.

Just because you’ve switched to Opera or Safari or Chrome or Firefox and don’t use Internet Explorer regularly doesn’t mean you should ignore this update. It’s our belief that IE is so integrated into so many parts of Windows that it’s much better to be safe than sorry. Updates are easy and you should check for them frequently and install them immediately. Here are a few tips.

• If you’re still using XP, go to update.microsoft.com and install all available updates.
• If you’re running Vista, congratulations. Windows Update is a start menu item and can be accessed from there.
• If you’re running IE7, upgrade to IE8 even if you don’t regularly use Internet Explorer.

Microsoft isn’t the only company that releases updates. Last September, we wrote about a great service called Secunia that you can run to tell you what other programs on your computer have updates that are available. It would probably be a good idea to run their free web scan to check if you’re using an outdated version of Flash, Java, iTunes or any other program that has recently patched security holes.

Newer, faster browser rendering engines are all the rage. Google released Chrome based on Webkit and V8; Firefox uses Gecko and is going to be using TraceMonkey for JavaScript. Apple made some noise a few weeks ago by releasing a beta of its Webkit-based Safari 4, now using Apple’s new Nitro engine for JavaScript. The improvements Microsoft has made to Trident and JScript are going to be a generation behind by the time Internet Explorer 8 finally officially drops in the next week or so.

All browsers have problems. Google Chrome is fast, but it completely botches the back button. Hitting the back button to return to a dynamic page – search results, for instance – and the browser asks you if you want to resubmit the page. It’s a recognized bug in Chrome that renders the browser useless for most daily browsing. The new Safari is the prettiest browser, and it’s fast, but it copied the Chrome bug and is unusable for that reason. Neither Chrome nor Safari runs on Linux. Internet Explorer is a good browser, when completely patched, but is usually the slowest. Firefox runs slowly on Linux, and its bookmark synchronization component is in beta and doesn’t work on 64 bit Linux, forcing users to rely on a plugin called Foxmarks.

One of the most exciting browsers that hasn’t been getting much press lately is Opera. Opera claims its Presto 2.2 rendering engine presents web pages 30% faster than the last version. Its Futhark is admittedly dated, but the Opera team is working on a new version called Carakan that will be much faster. Many of the most popular add-ons to Firefox are built into Opera, including web developer tools, the ability to block JavaScript and Flash, and bookmark synchronization. The new Opera is completely cross platform and supports synchronization and socialization through the My Opera community.

We’ve been using the new Opera 10 alpha for months now, and it’s performance is markedly better than Firefox 3. The only difficulties we’ve noticed is that when using Opera on Linux in conjunction with Synergy, some Flash objects viewed in Opera can cause Synergy to stop responding. If you’re a frequent user of apps that rely on heavy JavaScript rendering like Gmail, Opera may not be quite as fast as other options. If, however, you subscribe to our belief that JavaScript and Flash should be turned off unless needed, Opera will be much faster than anything else.

Try the latest development version of Opera, available at www.opera.com/next, and let us know what you think in the comments.

Image via Wikipedia

The example RFP for website construction posted last week mentioned a little about web standards and user agents, but after further reflection it seems we need to examine further the importance of an accessible and usable website and add a few more requirements to the proposal.

An accessible website is one that can be viewed on any browser and any platform by any person or script. A user agent is the combination of the browser and platform. For example, Internet Explorer 6 on Windows and Internet Explorer 7 on Windows are two different user agents. Firefox 3 on a Mac and Firefox 3 on Linux are two different user agents. on A website that can only be viewed on 90% of user agents is one that is not accessible. A website that looks differently on Linux than it does on Windows means that the designer did a poor job testing.

Flash is a great tool for delivering video on the Internet. It’s a bad tool for building websites. When used for websites, it’s most often a way to create animations or navigation. Animation should be avoided because motion that the user didn’t initiate usually annoys or confuses the user. Flash navigation is usually a drop-down or animated system, the down-sides to which we’ll cover shortly. A website built with Flash also requires the user have installed Flash. Many devices can’t install Flash. If Flash is used, the content must have an alternate delivery method in order to support devices that don’t support Flash. Building two versions of the site, one in Flash and one to support non-Flash user agents, is a waste of development time.

With the increased use of mobile devices comes an increased importance for websites to be viewable on those devices. As a Windows Mobile user, it’s very frustrating to visit a website and have to wait for a huge amount of data to load, only to realize that I have to scroll horizontally back and forth only to find that there is a JavaScript drop-down menu that I can’t use anyway because it’s not supported on Windows Mobile. While I acknowledge that great strides are being made on mobile devices to better display the real web, the sheer number of legacy devices as well as the ease that a standards compliant and accessible site can be created dictates that it simply doesn’t make sense to build a site that can’t be viewed on a mobile device.

How should this alternate display be accomplished? Mobile style sheets provide a quick and standards-compliant way to render content in an alternative manner on smaller screens. Since a standards-compliant site is built using style-neutral markup as the content source, a mobile style sheet can be written in addition to the normal style sheet. Where the normal style sheet might display a header that is 750 pixels wide, the mobile style sheet might specify that the header be only 240 pixels wide so as to fit on a mobile browser without horizontal scrolling. Mobile style sheets allow for a completely different arrangement of elements – the components of the page like images and blocks. Elements can be set to display or hide depending on which style sheet is used. With this approach, a single file can be used to completely change the layout to fit on a small browser without making changes to any of the content.

Also of importance is usability. A website with drop-down menus, or their cousin the menus that are hidden until the user clicks the little plus sign to expand a set of links, fails in the usability category. Drop-down menus are for applications to perform actions, like how the file menu in a word processor has the actions to open, save and exit. Drop-down menus don’t work well as natural navigational elements because a user should never have to perform an action to expose navigation. Instead, a site should use a well-defined, hierarchical arrangement of pages with links on each page to the parent and children pages.

Now that we’ve defined the need, here are the additional items for our example RFP.

Website must display properly without Flash or JavaScript. Any use of Flash must be solely to deliver video content if applicable.

Website must use a logical, hierarchical navigational system and must not use drop-down or fly-out menus.

All pages must use mobile style sheets to render properly on Windows Mobile and other handheld browsers so that horizontal scrolling is not required on those devices.

Want to learn more about web standards? The best book on the subject is Designing with Web Standards by Jeffrey Zeldman.

Want to learn more about CSS or get a basic understanding of how to use them? Head on over to previously-mentioned W3 Schools for their section on cascading style sheets.