Tuesday, April 26, 2011

Resizing Firefox

In my last post, I talked a bit about my migration to Firefox 4 and some of the extensions that generally follow along with me. Today, I want to discuss some of the tweaks I do to the interface to make it more usable.

On of the changes to the technology field over the last couple of years has been the migration of computer monitors to widescreen format. While not ideally suited to use in this manner, there's a very simple reason we're forced to have them: HDTV. As the television and film industries move to widescreen, manufacturing of monitors has had to follow as a matter of course. Or, cost, really. The same companies that make TV screens also make computer monitors and it costs money to build LCD/LED/Plasma screens in a variety of formats. The fewer formats manufacturers have to deal with, the lower costs end up being.

The fact that they're not really what consumers want really doesn't come into play. If they're the only option available, then you'll buy them. And, so, we're stuck trying to scroll around the screen to read the entirety of a webpage or Word document that's formatted for a taller screen. Such is life, this is where we are, so let's make the most of it.

A lot of sites have been sizing up the latest offerings from the browser producers and judging their screen real estate usage and evaluating them primarily on their vertical usage of space. If I recall correctly, in the latest offerings, Firefox 4 is the current winner. It apparently undercuts Google Chrome, the former champ, by some 3 or 4 pixels! Whew! I can almost read the top half of one extra sentence with that!

While it's nice to see that Google, Mozilla and Microsoft are all taking into account screen ratios now, it's always been kind of a moot point for me. After all, I've been taking it into account since I got my first widescreen a few years ago and came up with my own solutions by tweaking Firefox. The solutions below are not possible with Chrome or IE because their layout is pre-determined. Firefox is the only browser that gives me the flexibility I need to size things properly.

This is what my browser looks like:



The Basics

For some reason, there are folks out there who love Firefox, but don't want to add extensions to it. I can grok wanting the absolute fastest browsing experience you can try to muster, but I just think you're missing out on so much! Oh, well, this section can be for them.

The first thing you'll notice in my screenshot above is I've reduced the number of toolbars on screen to just one. This is easy enough to do, simply right-click on one of the buttons on your toolbar (such as the big Back one) and choose Customize. You can drag bits of the interface around, as well as remove some. The first thing I do is get rid of the Search box and Back/Forward buttons.

Losing the Search box isn't a big deal if you use Smart Keywords to search from the address bar. I've got a few of these setup so, for example, if I want to do a Google search, I type "g" in the address bar and follow it with my query. Similarly, I have one setup for Google Image search, Bing, Dictionary.com, Wikipedia and a few others. I also have one for Google Maps to get directions easier. With these, I really have no reason at all to have a Search box taking up space.

Not having Back/Forward buttons might seem a chore...unless you read about FF Rocker in my last post. :) The goal is to get rid of items on screen that can be actioned using some other method..

Once I've subtracted, simply move the Address Bar up into the menu Toolbar followed by the widget named Bookmarks Toolbar Items. Things might be a bit cramped at this point, so you might need to make some additional changes. By default, the Address Bar is a bit wide for this setup. So, we need to find your Firefox profile. This is the directory that contains all of your personal settings for Firefox. This article describes nicely how to locate it. Once you've found it, you're going to want to go into the chrome directory (create it if it doesn't exist) and modify userChrome.css (again, create it if it doesn't exist. userChrome.css is a configuration file for aspects of the interface. I haven't done much twiddling, but two changes I do make:

#urlbar, #urlbar-container {min-width: 500px !important; max-width: 500px !important;}
#star-button {display:none !important;}

The first one sets the minimum and maximum widths for the Address Bar to 500 pixels. For the most part, the only bit of a URL I generally care about is the domain, and that generally fits within those 500 pixels. There is an issue with the new "encrypted page" indicator in later versions of Firefox. This takes up a wide part of the Address Bar to show you the domain the certificate is for. Sometimes, if the domain name is long enough, it'll take up most of the Address Bar, but I've never encountered a time where I thought "damn, my Address Bar just isn't wide enough" at 500 pixels.

The second entry removes the star button from the Address Bar. This button is used to bookmark a page, but I keep my bookmarks in Google Bookmarks, so hardly ever use it. Better to use Ctrl-D to bring up the bookmark tool than waste some space.

Speaking of bookmarks, you'll notice my Bookmarks Toolbar is fairly sparse with just favicons
representing most sites. To get a slim and trim Bookmarks Toolbar, simply go to the properties for each of the bookmarks and remove the Name. Very few sites these days don't use favicons, so you can always identify them without their name next to them.

You might also notice the folders on the Bookmarks Toolbar. I do have a number of sites I hit on a daily basis that don't have RSS feeds. My morning routine consists of hitting the "M" folder (for morning), going to the bottom and hitting the "Open all in tabs" link. This does as it says and all of my morning news is available for me to peruse in just a few moments. In the afternoon, there are some sites I hit that are specific to that timeslot. Hit the "A" folder (guess what that stands for) and do the same. The remainder are either work related or something I like to keep handy, but don't want to waste an icon on the toolbar.

Extending It Further

While the above can go a long way to trimming Firefox down vertically, there are still some cool things you can do with extensions to really bring it down to size. The one item that's taking up the most space at this point is the Tab Bar. Really, why do we need it along the top? Because that's the way we've always done it? This is where Vertical Tabs comes into play. There are a few options in the add-ons mart, but this is the only one that works with FF4. That's okay, though, because I've tried a few of the others and they add a lot more features than I really needed. I wanted my tabs on the side, that's it. With the tabs off to the side, it actually feels a bit more natural. After all, look at Windows Explorer (not Internet Explorer). Are the panes divided up top and bottom? No, they're next to each other. When you go to a site, navigation menus are typically on the side, and so on. It really doesn't take much getting used to once you install it.

Since you've squinched as much as possible into your menu bar, it's probably looking a bit crowded, right? Well, why not trim out some of the things you don't use as often? When's the last time you hit the Help menu? The Edit menu? Okay, some folks might still like that one, but I know how to hit Ctrl-C and Ctrl-V, so very rarely use it. :) Since the only bookmarks I store locally are on the toolbar and I'm using Ctrl-D to bookmark new ones, do I really need the Bookmarks menu item? Nope, so off they go thanks to Menu Editor. Trim your menus down how you like, but I've gotten rid of everything except File, View and Tools. It may seem a radical surgery, but the patient and I have been doing fine for ages now. :)

About the only change left at this point has already been done for you in Firefox 4: getting rid of the Status Bar at the bottom. Most folks seemed to like that change, some didn't. There's an extension called Status-4-Evar to get it back if you really like it. I haven't had much complaint working without it so far.

So, that's it, my slim, trim Firefox 4 setup. On a widescreen monitor, I get as much space devoted to browsing as I possibly can, and didn't lose any functionality. In fact, usage is generally improved some. Got any tweaks you know I might've missed?