6 Essential Firefox Add-ons for Designers

As a webdesigner (and technologically savvy user of the Internet), there is no excuse for you not to be using Firefox as your primary web browser. If you aren’t using Firefox yet, you need to go and download it right now. Not only does Firefox provide a top of the line Internet browsing experience, but it also provides an endless amount of functionality that you simply won’t find in any other Internet browser.

Because third parties can develop add-ons for Firefox, by downloading the best add-ons that are available, you can transform Firefox into a tool that dramatically increases your productivity and saves you a countless amount of time.

 Since there are so many different add-ons available to download, it can be a little overwhelming to pick out which ones you should be using.

Therefore, I decided to do all of the legwork for you and compile a list of the six best Firefox add-ons for web designers.

Web Developer

Although it is called Web Developer, this Firefox add-on is absolutely invaluable for web designers. If you were only going to download and install one Firefox add-on, this is the one that I would recommend to you. The reason is that this add-on provides a variety of different useful features, and could be classified as the Swiss Army Knife of Firefox add-ons.

The first feature of this add-on that designers will find useful is the CSS menu. Features of this menu include the ability to disable styles, display CSS by media type, view CSS, view style information, add a custom user style sheet or directly edit CSS.

The next feature of interest for designers is the Image menu. In addition to allowing you to display ALT attributes, image dimensions, image file sizes and image paths, you can disable images, find broken images, outline images, replace images with ALT attributes and several additional functions.

Although I could devote several pages to all of the features that this add-on offers, I just want to touch on a few other functions that web designers will find especially useful. These include the ability to outline different elements (ranging from frames to block level elements), edit HTML and show hidden elements.

Firebug

While Web Developer is the first add-on I would recommend to any designer, Firebug runs a close second in terms of usefulness for designers.

With Firebug, you are instantly given the ability to edit, debug or monitor any web page. Firebug gives you full control over the CSS, HTML and JavaScript of any page that you choose. Best of all, every change that you make is done live and instantly, so you can quickly test out different changes and see the results of those changes instantly.

Like most of the best add-ons for Firefox, Firebug goes beyond its basic functionality and provides a wealth of options that make it easy for any user to completely customize their use of this add-on. Some of the additional features and options offered by Firebug include keystroke shortcuts, the ability to control how and where the Firebug editing area appears, visual guides for editing CSS, analysis of network activity and customizable logging for JavaScript.

Colorzilla

As a web designer, you never know when inspiration is going to strike you as you are surfing around the Internet. For example, you may be looking at a website and come across a color that you really like.

If you want a quick and efficient way to be able to find out the exact HSV and RGB value for that tool, you should install the ColorZilla add-on.

The ColorZilla add-on features an online eyedropper, which makes it quite simple to get the exact value of a specific color.

 In addition to the online eyedropper, ColorZilla offers several additional features that most web designers will find useful such as a DOM color analyzer and online palette viewer. The DOM color analyzer allows you to locate elements on the page that correspond to a given color and find out the CSS rules that specify a certain color, while the online palette viewer allows you to bookmark and share color palettes that you like.

FireShot

Although your OS undoubtedly has a built-in screen capture function, this doesn’t mean that the default screen capture has all of the capabilities that you may need.

For example, can the default screen capture of your OS grab portions of a web page that are outside of the browser window?

In most cases, the answer to that question is going to be no. Fortunately, there is a Firefox add-on that offers this feature, along with a variety of other useful functions.

FireShot is an advanced screen capture add-on for Firefox. In addition to giving you the ability to capture an entire web page (even when there are portions of the web page that aren’t visible as a result of the constraints of your browser window), FireShot also allows you to add annotations directly to your screen captures.

FireShot gives you several options for handling your screen captures. Not only can they be saved in a variety of file formats, but they can also be saved to your computer, emailed to others or saved on the free FireShot hosting server. As a result of its wide range of features, this add-on has attracted over one hundred and fifty thousand active users, and has proven itself to be invaluable for web designers and other Internet professionals.

CSS Validator/HTML Validator

As a designer, you want to make sure that all of your hard work can easily be accessed by visitors and displayed to them properly. One of the easiest ways to ensure that both of these tasks are accomplished is by validating all of your code.

Although they are two separate add-ons, both the CSS Validator and HTML Validator should be installed in the browser of any web designer. Once the add-ons are installed, the CSS Validator can be accessed from the Tools menu, while the HTML Validator can be accessed from the Firefox status bar.

Each of the add-ons validates the code against the appropriate W3C standards.

 While the CSS Validator simply does a standard validation of the code, the HTML Validator provides some additional functionality.

When using the HTML Validator, you can choose to validate directly in the browser (where any errors are shown as a status bar icon), show the source with explanations of errors after the validation or a validation with proposed solutions to any errors.

Browser Window Resizer

As someone who creates designs for the Internet, one of the most frustrating issues that you undoubtedly encounter is trying to create designs that work across a variety of screen sizes.

Because you don’t know whether a visitor is going to be viewing your work at 640×480, 800×600, 1024×768, 1280×1024 or 1600×1200, it’s your responsibility to create designs that work at all of these resolutions.

While there are a variety of ways to view your work at different resolutions, I have found that the Browser Window Resizer add-on is the most efficient way to accomplish this task. Once you download and install this add-on, you will be able to instantly re-size your browser window to any of the standard resolution sizes listed above.

This will allow you to see if your design is going to look good to visitors who aren’t using the same resolution as you.

 The best thing about this add-on is that if you are using it in conjunction with the other add-ons in this list (specifically Firebug), when you see that something isn’t displaying properly, you can instantly make adjustments to your code and see if that fixes the problem, all without ever leaving your current browser window.

Know of any other good extensions for designers? Feel free to comment and leave us feedback.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.