Designers and Developers have lots of things they use on a regular basis in order to get work done.  Software, Hardware, Apps; there are multitudes that I end up opening on a daily basis in order to efficiently plan out, execute, and update the sites that I create.  So, every Tuesday, I’ll be diving into some of the tools I use in the process of creating a site design.

Most people immediately start out with Photoshop, Dreamweaver, etc. But I wanted to go into something a little less known (but not by any means less important).  When I work on WordPress themes, it’s hard to get the CSS styling just right because all of the content is dynamically generated.  Sure, using dummy text helps, but you still want to get the styling JUST right, and it’s a hassle to upload and reupload CSS stylesheets for a simple change.

Enter Firefox and the Web Development Toolbar.

This toolbar is absolutely invaluable to me in the course of development.  It puts an entire arsenal of web development tools at my fingertips to give me absolute control over what i’m doing.

Some highlights:

• Disabling Cache so you don’t have to clear it everytime you want to refresh a page
• Disabling stylesheets to see what your site looks like to people who have older browsers
• Allowing you to switch on the fly between the main stylesheet and Print/Mobile styles to see what they look like
• LIVE (!) Stylesheet Editing – the feature I use the most.
• Outline mode that shows div containers, table cells, and what tags are called on what elements
• Built in validators for CSS, (X)HTML, and other standards
• too many other tools to list in bullet form

The main tools I use are the outline and the live CSS editing.  I can copy/paste the stylesheet edits I make right into WordPress and save the changes – takes about 20% of the time that it takes to fire up my FTP program and load in the new files.

If you use Flock instead of Firefox, don’t worry (so do I) – the toolbar works great.  If you use Internet Explorer… why? (no, I’m joking – there’s a development toolbar for it too – but it’s not nearly as user friendly).

Do you use the toolbar?  Any features that I may have overlooked that make it even more useful than I mentioned?  Let me know!