6 Great Firefox Extensions for Designers

Of the hundreds of Firefox extensions available, I would guess there is hardly a designer who hasn’t heard about Chris Pederick’s Web Developer Toolbar (790,521 users), and Joe Hewitt’s Firebug (2,918,506 users). They are arguably the two extensions that made Firefox what it is today, and are literal must-haves for even the most hobbyist of web developers. But that’s not where the extension fun ends. There are quite a few designer-centric Firefox extensions that may well have slipped under your guard. It’s always hard to find time to try them all, so hopefully we can do some of the legwork for you! Some of them are standalone Firefox add-ons, while others are installed on top of Firebug — so in a sense they are Firebug add-ons. Whatever their background, here are 6 lesser known, yet useful Firefox extensions for designers. Enjoy.

1. ColorZilla

I’m not sure if ColorZilla is officially the third most popular Firefox extension for designers (it seems likely with over 300,000 users), but it’s certainly one of the most useful colors tools for front-end people. After installation it’s available from the context menu, or from the toolbar, as shown in the screenshot below: ColorZilla has many color-related options, such as an Advanced Eyedropper, Color Picker, Zoom, Palette Browser, Web page DOM Color Analyzer, Gradient Generator and some more. The eyedropper and color picker tools are similar to those you might find in any decent desktop graphics programs. With them you can pick colors from a page, save them to a palette, and access them later. One more advanced tool is the ‘Web Page DOM Color Analyzer’. To analyze the colors used on a page (excluding colors in images, Flash, etc.), you open the page and run the Web Page DOM Color Analyzer. This will generate a palette of color chips, as seen in the image (below). This is great for rationalizing and simplifying your site’s color palette when it starts to ‘creep’.

2. Pixel Perfect

Pixel Perfect is one Firefox extension not many designers seem to know about. It is very useful for a designer, though you may not need it on a daily basis. Pixel Perfect is used for layout overlays. It allows you to overlay a semi-transparent screenshot of your design on top of your live HTML/CSS, as you work. This is particularly great for the initial ‘roughing out’ stages of a project, where you are looking to match text sizes, fonts, leading, colors, margins, and padding to the original Photoshop mockup. The controls are simple. You can manually place and then lock the overlay image in any position on the page, and a slider gives you control over the opacity.

In order to run Pixel Perfect, you will need to have Firebug installed. You can download the latest version of the extension from the Mozilla site but if you are running a version of Firefox that is not compatible with the version of Firebug at Mozilla’s site, you can get it from the developer’s site where all the previous versions are stored.

3. YSlow

‘Optimization’. It’s a word that many designers might think doesn’t really apply to them — it’s a thing for the techie guys to handle, right? Not true. A slow site is simply a bad UX, and UX is a fundamental design issue. As a designer, you really have to own it! YSlow is a great tool for pinpointing slow points and bottlenecks. The great thing is it doesn’t document your problems — it offers practical solutions to your issues, and teaches you along the way. Similarly to Pixel Perfect, this extension runs on top of the Firebug framework, so you will need Firebug to see the benefits of it. YSlow is a Yahoo tool (this is where the Y comes from) and is generally well-maintained by its development team. Unfortunately, at the time of writing, YSlow doesn’t seem to work with the latest versions of Firefox, even though it is available for them. If you can install it, you should see something like this: Basically, the tool reports the slow areas in your pages and suggests ways how to fix them. YSlow has almost become a web service, running on platforms from Node.JS to Chrome to Commandline, but the original Firefox version still gets the job done.

4. GridFox

The GridFox extension is a one-trick pony, but happily it’s a good trick – it only draws a grid on top of a website but this is enough of functionality when you need it. The extension is pretty simple and straightforward to use. After you install it, right click anywhere on the page and from the menu choose GridFox > Toggle Grid. This will draw the grid. You can also edit and save grids for future reference. Although GridFox is useful in helping you enforce a grid on your own projects, it’s almost best used as a learning tool. Try going to BBC, NYT, Twitter, Facebook or any of the big sites, launch GridFox and try to work out how their grid is structured. Lots to be learned.

5. Open With

With the recent developments in Web standards, cross browser issues are not as severe as they used to be years ago but still you can’t take for granted that what you design for one browser will display properly in other major browsers. While there are numerous cross browser testing tools you can use, with some of them it takes ages to preview a single page in just a couple of browsers. For such cases the Open With Firefox extension comes very handy. After you install it, in the Preferences dialog you have to enter a list of the browsers you want to open your pages with. You can enter Internet Explorer, Chrome, Safari, Opera, Chromium, or any other browser you want.

After you install and configure it, depending on the options you have chosen in the Preferences dialog, you will see something like this:

The catch here, though, is that you do have to have the browsers installed on your system in order to include them in the list. This is not very useful, if you want to test your pages in a browser that doesn’t run under your operating system but still in all other cases it’s a time saver.

6. CSSsir

CSSsir is not the only Firefox extension that generates CSS code but it’s one of the best. As listed by the developer itself, at present, the extension can generate CSS3 code for:

• Text-shadow
• RGBA
• Transform
• Box-shadow
• Border-radius
• Multiple Columns
• Linear Gradient
• Radial Gradient
• Outline
• Transition
• Text and Font Style

It also comes with some handy tools for tag cleaning, conversion (RGB to HEX, PX to EM), and color picking. It also comes with some prompts, such as a list of CSS3 selectors, browser CSS-hacks, relations px, pt, em,% table, JS key codes, etc. After you install CSSsir, it will show up as a rather dapper hat in the toolbar. Click the hat to open the dropdown: Choose an operation to perform. For instance let’s rotate some text. Choose Text-rotation and select the rotation angle. This will generate the code to paste into your CSS file. These are all super handy Firefox extensions for designers and front-end devs. Of course, there are many others that are not included on the list — some of them are really good ones. For instance, Pencil is a Firefox extension for GUI prototyping. I’ve used it in the past and it was really nice. With Mozilla’s move to a much more active Firefox release schedule, it’s becomes increasingly difficult to keep add-ons current — particularly for one-person/part-time extension authors. Unfortunately, Pencil is just one of the many extensions that haven’t been updated in a while, and, as such, don’t work with the current versions of Firefox. This makes them more-or-less useless for most Web designers running the latest and greatest brwoser versions.

Workarounds?

If you’re a tinkerer, it should be noted that many old extensions can be made to work with the current version of Firefox with a relatively simple hack. It is usually just a matter of updating a number in a text file to get an old extension working again. Usually, but always. Regardless, let’s hope that some of these great Firefox add-ons won’t be left to rot on the vine. So Firefox users: Have I missed any?

Frequently Asked Questions (FAQs) about Firefox Extensions for Designers