FireFox is the Designers Bestest Bud

FireFox is an innovative and efficient browser, with features like One-Click Bookmarking, Full Zoom, Smart Location bar and MUCH more. FireFox beats Internet Explorer like a rented mule when it comes to standards compliance and performance; and pretty much everything else too. Pardon my prejudice towards Internet Explorer, but if you’ve ever spent anytime building websites with CSS/XHTML you probably feel the same way – at least about IE 6.

Anyway, I digress – moving on from the commercial, another incredibly useful feature that FireFox provides its users is the ability to “add-on” to it’s functionality. These aptly named “Add-Ons” come in many forms and functions from changing the entire look and feel of the browser with Themes, all the way to to handy little widgets for searching, social networking, aggregating feeds, tool bars, and web development. The later is the focus of this article. Get Add-Ons here ».

The Web Developer Toolbar is an indispensable ally for the…umm…web developer. As before mentioned, working with CSS/XHTML based layouts for most of the projects we do, this toolbar allows us to validate, modify and see the changes quickly – which as you can imagine makes it SOOOO much easier to code your CSS without having to go back and forth between your editor of choice (DreamWeaver) and your browser of choice (FireFox).

Here I’m viewing all my CSS files associated with our site. Just by striking the key combo CTRL+SHIFT+E I get this view, and I can open each one individually and edit anything in each file non-destructively. By that i mean that i can edit any CSS rule defined in the file, watch it change on the screen without it actually altering the file on the server itself. I know that may be obvious to most of us, but i felt led to provide that disclaimer.



Here is cool little feature, you can disable all styles in the browser. This allows you to see your content flow without the aid of the CSS styles. I really like to do this on other peoples sites just to quickly see whether or not the built their site with CSS or not. Just a quick stroke of the key combo CTRL+SHIFT+S and i’m in the know.



This is just a small taste of what this powerful add-on has to offer. Download the extension and you’ll wonder how you ever designed without it.

Get Web Developer Toolbar for FireFox Here »

You Might Also Like:

• We Want WestJet Website
• The First Impression: Your Website is Where It Happens
• Obcidio > The Ultimate Business Resource Tool