Archives

Top Firefox Extensions For Web Designers

By Dustin Brewer
Expert Author
Article Date: 2007-05-08

There are a lot of extensions out there, most of them are unnecessary because of their limited worth to more advanced users.

The big downfall for some of the extensions is that they are a full toolbar and take up entirely too much screen real estate for their total worth as a tool. Just like a Swiss Army Knife you have to be able to conceal the smaller tools until you are ready to use them-- hence Swiss Army making it pocket worthy and not made for a lanyard.

There of course is a difference between developers and designers but for the sake of these extensions I'm going to assume that everyone is both, these Firefox extensions should be of use to you whether you consider yourself in either category but may serve less use for some then others. Without further ado, may I present the Top 10 Firefox Extensions for Web Designers and Web Developers.

#1 Web Developer

Type: Toolbar

This comes loaded with tools for validating your CSS, XHTML, Javascript and various other standards compliance tests. It gives you various different rendering options and utilities for seeing how a web site is made and layout. This extension is also useful for disabling various components of your web site or other web sites to see how well they work with or without the component you need to disable. This utility is a must for anyone from the hobbyist web designer/web developer to the experienced web designer.

#2 MeasureIt

Type: Status bar

This extensions is the one that I use the most and comes in handy for all kinds of things when I am making a web site, mostly because after I get the basic layout created I realize that I want to add another component into the web site or I want to see if something fits here or there and this Firefox extension stays down in the bottom of the status bar in Firefox and allows me to easily measure any element or section of a web site.

#3 IE Tab

Type: Context menu

As much as we all hate to admit it this comes in very handy at times because Internet Explorer is unfortunately used by so many people around the world we don't have any choice but to make sure our web sites look correctly in the browser. I don't know about the rest of you but I would rather leave the browser closed as often as possible, this extension is a necessary evil so because of this it is useful to that end.

#4 HTML Validator

Type: Status bar

I only wish this one was more useful then the IE Tab extension so I could just make sure I was standards compliant, I often find myself making sure I'm IE compliant more so then standards compliant- with W3C XHTML standards at least you have a guideline to follow on what compliant code should be structured like. This also opens up the source of the web site and shows you the specific area with its location and a short description on what the markup is incorrect.

#5 Search Status

Type: Status bar

- This is extremely useful because I can only have one maybe two toolbars before I start gouging my eyes out. This is a handy little status bar item that displays the current page's Google PageRank and Alexa Ranking. It is straight forward and even comes with more options such as being able to check back links coming into the web site as well as all of the indexed pages within the major search engines of the current web site you are on. This is extremely handy for SEO purposes, especially because it stays out of the way unless you need it and displays two important factors of SEO clearly.

#6 SEO for Firefox

Type: Status bar/Page integration

This tool made by Seobook adds useful information about the current web page you are on as well as adding information within Google about the web pages that are listed. This is the most used feature for me because when I am doing some keyword research i can get an idea of what variables are helping the web sites ahead of me to be ahead of me in the listings. This is another extremely useful tool for any designer/developer especially if you have any interest in getting your web sites found by people through search engines.

#7 ColorZilla

Type: Status bar

This serves its purpose for determining what color an element in Firefox is, in case you like the specific color or want to add another object into your web site that is a similar color to another object within your web site. I have to say I don't use this one quite as much as I use my external Color picker utility but this extensions ease-of-use is definitely useful for discover a color's hex code quickly.

#8 Firebug

Type: Status bar

This extension allows you to inspect your HTML, CSS, Script, DOM and Net to make sure they are all working properly and it will allow you to go over each element and analyze how it is working and possibly why it might not be working if it is not. This tool is very useful for certain things- mostly scripting. For most of my XHTML and CSS analyzing I will use HTML Validator.

#9 Image Counter

Type: Status bar

This is a simple little status bar spot that shows you how many images are on a web page, it is only useful as a reference point if you are curious about how many images a page has that loads really fast or really slow, I have yet to find an extension that lists the total file size of the web site which is what I really want. So for now this little bit of information is helpful in times of curiosity.

#10 Linked-In

Type: Context Menu/sidebar

This is useful because every web professional should be Linked-in to ensure that they are networking themselves properly across the country and within their city and state. This extension can help you to have your network available for jobs, career advice or just staying in touch with the design/developer community. Feel free to add me to your Linked-in as a business associate with the email address dustin [at] dustinbrewer.com. The more networked we all are the better we will do in the future with our careers.

That concludes the list of the Top 10 Firefox Extensions for web designers and web developers. Just in case anyone is curious the article started off as the Top 5 Firefox Extensions but I got carried away with which should be included in the top 5 and I didn't want to make it an odd number like the Top 7 Extensions.

Completely as a side note there are a few extensions that should never be used and when used only show your smallness in the world.

Those are Adblock which defeats the purpose of many things, especially the whole Web 2.0 culture. Most web sites like mine are (mostly) supported by advertising and because of this blocking out the advertisements is just against the reasoning for you being apart of a web site's community.

The other extension is Fasterfox, the reason for this is it slows down servers by a lot because it pre-caches web pages that you may not even visit from a web site causing extra page views and unnecessary bandwidth usage. Even the lower setting can be somewhat detrimental to the web site you are visiting especially if there are others like you on the web site at the same time using the extension. So please, don't install them or uninstall them and do the Internet a favor.

Anyway, if you have any tools that you have found you feel should be included in this list by all means list them in the comments and help out your fellow web designers.

Comments
About the Author:
Dustin Brewer is a web designer located in Oklahoma City, OK specializing in aesthetics in design, web standards, accessibility and usability. He also enjoys helping others to discover CSS and web design best practices through his web site, dustin brewer, a web design news site.