Egyptian blogger from Cairo.
Revolutionary Socialist.
Partner & Creative Director at ThePlanet.

7 Firefox Plugins For Web Designers

There is absolutely no doubt which browser we all should be using, regardless of the OS of choice. The beauty of Mozilla Firefox lies in the ability to customize it and extend it to fit your needs. While there are thousands of free plugins out there, I’ve complied a list of the seven add-ons that I believe any web designer or developer cannot live without.

  1. Web Developer
    As one of the most popular add-ons in general, Web Developer is an essential tool, or rather, series of tools. It gives you the ability to break down the CSS of any website, dig into the code, or disabling it altogether. It also gives you control over forms and images across the websites. For example, you can disable all images, view image paths, hide background images, and much more. One of the neatest features, in my opinion, is the resize option, which allows you to automatically resize your browser to predefined dimensions. That way you can check to see how people of different resolutions view the web page. And if you’re anal about your valid XHTML and CSS code, Web Developer comes packed with validators that can check the code for you, even if it’s on your local machine.
  2. Firebug
    Ever had to switch between the browser and your HTML editor dozens of times for small changes in your code? Well, whether you want to test out small amendments or drastic changes, Firebug makes it extremely easy and saves you a lot of effort and time. The icon stays at the bottom right of the browser, and all you need to do is click to view the entire code of the page your on, ready to be edited. Any changes you make are immediately reflected on the page, so you can try out all you want and not worry about making permanent changes, or having to switch back and forth. For any HTML element you select, Firebug will list all of the CSS classes affecting it, and you can easily add, remove, or edit the attributes.
  3. ColorZilla
    If you’re a designer, and recognize color codes easier than people’s names, then you definitely need ColorZilla. When you’re on a web page and see a color that you need, you either dig into the code and search for it, or take a screen capture and open it in Photoshop or GIMP to use the color picker to identify it. Thanks to ColorZilla, you have the color picker right in your browser and it will recognize all the colors and give you the codes associated. It also allows you to zoom in and out.
  4. IE Tab
    We all hate Internet Explorer. It doesn’t take a genius to see what a horrible invention it is. Unfortunately, though, IE6 still represents more than 12% of the market share, and there’s no use in denying it. If you’re running Windows, IE Tab allows you to open the Internet Explorer on your PC as a tab in Firefox. This way, you won’t even need to open the program (and can happily remove all shortcuts), and it has become easier to switch between tabs to see how the page renders on both browsers.
  5. Measureit
    Sometimes you need to know sizes of different components on a given page. Or you might want to see what the actual width of a div is, as oppose to what it’s coded to be. Measureit is a neat tool that allows you to take measurements of anything on the page you’re on – could you save you a lot of time and effort.
  6. StumbleUpon
    This is an extremely popular plugin amongst Internet users in general. But as a web designer, StumbleUpon could be a very convenient way to surprise yourself with inspirational websites, free design tools, and tons of useful information out there. If you’re taking a break from a task, but want to explore the design globe, then set up your account to show you those kind of websites, and stumble away for a while.
  7. Flagfox
    It’s always important and interesting to know where the website you’re visiting is hosted at. Flagfox places a flag of the country hosting the website in the address bar, and by clicking on the flag, you can see all the details, including the Whois information.

That completes my list. Feel free to share your thoughts, and leave a comment to let me know if there is any plugin that I’ve missed.

Related posts

One comment

Avoid Waiting When Downloading with SkipScreen | Tarek Shalaby

October 14, 2009

[…] had previously discussed the 7 must-have Firefox add-ons for web developers and designers. I had also spoken about AdBlock Plus, which is, at times, the most downloaded Firefox extension […]

Leave a reply