Cambridge University Design / UX group

Some great Firefox add-ons

Firefox logoFor general web stuff, I exclusively use the Firefox web browser. It’s reliable, much more secure than the most popular browser, and thanks to its add-ons, is a pleasure to use. Just because I was chatting to a couple of friends about it recently, I thought I’d share some recent finds.

There are already lots of sites and blogs out there, with lists of “10 best Firefox add-ons”, but it kind of depends what you’re doing. Since I am a web designer, I have lots of geeky add-ons: essential things like the Web Developer’s Toolbar and Firebug.

Some more that I have really been enjoying recently are Style Sheet Chooser Plus and GridFox, and the not-strictly-web-design-related Show Parent Folder.

Style Sheet Chooser Plus

I used this one recently Dept of Earth Sciences website redesign project. They wanted to be able to allow a group of test users to flick between slightly different versions of a homepage. They were using a single machine, and the Firefox web browser.

So we installed this add-on, provided the alternate stylesheet files in the <head> of the HTML file, and then it was easy to switch between them.

Yes, I could have written and embedded my own JavaScript stylesheet switcher on the page, but in this case, it was quick and simple to do it all from the browser itself. Sweet.


GridFox allows you to overlay a semi-transparent layer of vertical and/or horizontal columns on your web page, so that you can see if things are lining up withyour chosen grid. I find this particularly useful when I go from my basic design sketch in Photoshop (all lined up on a grid using guides), to reproducing that with CSS and HTML. Indispensable.

Now, I am not going to go into the whys and wherefores of designing ona grid system, because it is not a quick thing to explain, and I am not expert. Mark Boulton is an expert, though, so have a look at his excellent 5 simple steps to designing grid systems. Still as fab as it was 3.5 years ago, when he wrote it!

Show Parent Folder

I was bookmarking a web page that I’d come across, and I wanted to put it in a folder with other, similar bookmarks. I knew I had a relevant folder, but I couldn’t quite remember where it was. So I searched my Bookmarks for similar links. I found them, but it didn’t tell me in which folders they were. Great. Not particularly helpful.

This may be a little bug in Firefox, so might be dealt with in a later release, but for now, this add-on rectifies the situation. Once it is installed, and you have restarted Firefox, click on Bookmarks -> Organise Bookmarks (or Ctrl / Cmd + Shift + B), click on the List button (the one with four horizontal lines on it on Mac / FF 3.x), click on Show Columns, and select “Parent Folder”. This column will now appear in your bookmark description. Easy.


Filed under: Resources, Tips, , , , , , , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: