Top 10 Firefox Addons for Web Designers

Yesterday I was browsing the Firefox addons directory looking for an addon that would notify me when I had mail with the old “You’ve got mail” sound like in the film “You’ve got mail” (ahhh, that film takes me back). Anyway, I came across a category for web developers so had a peek through and tried a few out. This list is a countdown of the top 10 addons that I think can really help you in your web designing.

-

Web Developer Toolbar | Link

This handy little toolbar is something that I have been using ever since I started developing websites because it can help emensely in understanding how pages are set out and styles. For example if you press Ctrl + Shift + Y, you can hover over each element (divs and classes) and by clicking it can show you the CSS code they have used on this element.

-

FireFTP | Link

I am always using FTP to update my websites and to upload my clients websites, however sometimes I don’t want to have to bother opening up an FTP program to do that. With FireFTP you can do all of your basic FTP uploading from inside Firefox which takes a lot of the hassle away.

-

Firebug | Link

Firebug is a fantastic addon which allows you to edit pages in real time to see how they would look on any website. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page quickly and easily.

-

Screengrab | Link

Whenever I create a web template or want to add an item to my portfolio I need to take a screenshot of the page and in most cases this is just a case of pressing Print Screen, however when you want to take a screenshot of the whole page (below the fold) this can get very tricky. There are tools like SnagIt that do this for you however these cost money. Introducing Screengrab, an addon for Firefox that does this for free. Screengrab can save or copy to the clipboard; the whole page, the visible portion or a selection of the page.

-

CSS Viewer | Link

CSS Viewer is a great little tool that provides you with all of the CSS for an element by simply hovering over it. It shows details about the fonts, colours, backgrounds, sizings and positionings of each element and is a great tool to learn CSS with, I wish I came across this earlier, it would have helped me a lot.

-

IE NetRenderer | Link

If you are like me and design your sites for Firefox then this is a great tool for you. IE NetRenderer will create you an image of how the website looks in IE 5.5, 6, 7 and Beta 8 so you can get an idea of whether or not it looks right in IE.

-

Window Resizer | Link

I use the 1280 x 800 resolution so when I create websites I need to check them in the more popular resolutions such as 1024×768. This tool comes in very handy for this task, it will resize your Firefox window to 640×480, 800×600, 1024×768, 1280×1024 and 1600×1200.

-

Dummy Ipsum | Link

If you are a web template designer then a lot of the time you may be using the almighty Ipsum Dolor text. Dummy Ipsum is a great little tool that will generate dummy ipsum text for you. You specify the number of paragraphs or words you would like and choose whether you want punctuation or not. Clicking Generate will create random text for you to add to your pages.

-

Font Finder | Link

Font Finder is a handy little tool that shows you all the font properties of the selected text. It can show details concerning the selected text colour, font-family, spacing and decoration values.

-

Offline Page Validator | Link

The web developers nightmare - Validating. Offline Page Validator is a simple tool that will send your page to the W3C validator by simply clicking an option on the right click menu, works both online and offline.