Top 5 Firefox Add-Ons for Web Designers

Top 5 Firefox Add-Ons for Web Designers

Whether you use Firefox as your main browser or not, you won't want to miss using some of the great tools it has available for web designers. There are so many free add-ons for Firefox that it is easy to get carried away and install more than you need. A large part of my work revolves around web design and there are few Firefox add-ons I have not tried out at some point or other. Some have proven to be invaluable and are used so frequently that I thought I would share them with you. Here are my top 5 Firefox add-ons for web design work.

Web Developer Toolbar

If you want just one tool to help you with designing or modifying a Mambo template (or any web site template) the Web Developer Toolbar is a "must have". This toolbar has been around for many years and is one of the most popular Firefoxtools for web designers.

Download the Firefox Web Developer Toolbar.

Firebug

Firebug is an excellent tool for testing and debugging a web site. While it can be used to inspect and edit HTML and CSS, I find the Web Developer Toolbar superior for those functions. Firebug really comes into its own with its analysis of network activity, showing file by file how long each one takes to load. It is also useful for debugging javascript and for quickly finding errors such as missing images.

Download Firebug for Firefox.

YSlow

YSlow is an extension to Firebug, provided by Yahoo! It adds extra features and requires that Firebug is installed onFirefox before it can run. YSlow calculates file sizes and page loading, analyses peformance and provides tips on how to improve the performance of a web page. I don't agree with all the recommendations Yahoo! makes with this tool but it definitely does provide some useful information. If you want to speed up your site, this is a worthwhile tool to add to Firebug.

Download Yahoo's YSlow add-on.

Dust-Me Selectors

If you work with templates that were made by someone else its common to find lots of unused selectors in CSS. This is also a common problem if you use any of the so-called CSS frameworks that seem to be becoming popular these days. Why include selectors that are not used? They simply cause code bloat, larger file sizes than are necessary, and often make the CSS less readable. Using the Dust-Me Selectors tool from sitepoint you can easily find unused selectors.

Download Dust-Me Selectors extension for Firefox.

Window Resizer

This Firefox extension provides a quick and easy way to test how your template looks in each of the standard resolutions. Window resizer will show you the page at 640×480, 800×600, 1024×768, 1280×1024, and 1600×1200 resolutions without the need for adjusting your own screen settings.

Download the Window Resizer add-on.

Each of these add-ons is available for Firefox 3. They have all been around awhile so earlier versions are available for people who have not yet upgraded to Firefox 3.0. The Window Resizer is also available for Internet Explorer.

This is the first in a series of articles that I am writing about tools I use with web site design. In future posts I will be dealing with colour tools, font tools and more - make sure you check back for new articles.