Bulletproofing Your Firefox For Web Design

• Sep 30, 2009
• Tweet

Let’s assume that you have a brand new computer and you want to dedicate your time creating web sites and web applications. There are a lot of applications that will be important for your daily tasks, but none as important as Firefox. You can even make your Firefox so powerful that you will need just a couple of applications and you’re done.

We will start by saying KUDOS to all web developers that are constantly creating mind blowing Firefox plugins. They are the real force behind the Firefox phenomenon along with the guys from Mozilla Foundation. And now let’s start sharing some information on Bulletproofing your Firefox for Web Design

1. Firebug

Firebug is “the” extension for Firefox. You can easily say that Firebug is one of the sources of popularity for Firefox among web designers and web developers. That’s because it is simply the best web development tool that lets you edit, change and visualize the changes in real time. It has a ton of features and it will save you time on debugging and enhancing your work.

2. Web Development Toolbar

Web Developer Toolbar is the second extension that I always install. It has some very nice features that are complementary to Firebug and some similar but more effective. Together these 2 will make web development painless.

3. YSlow

This addon is actually a plugin for Firebug. It is a tool developed by the guys from Yahoo!. It has very nice features and tips that will tell you how to make your site faster. Also, Smushit is now a part of YSlow, which helps you to compress your site images.

4. Colorzilla

There are numerous times when you want to pick a certain color from a website. Colorzilla takes the pain of editing a screen shot in order to find the code of the color. Now, while you browse you can easily get a color using the eye dropper from Colorzilla addon.

5. Fireshot

Annotation and collaboration on designs are now possible with the help of FireShot. FireShot is not only a Firefox addon but also a standalone product. It is simple to use and very effective. Just add your notes, save the image and send it.

6. Pencil

The wireframing task is now possible inside Firefox. I know that this sounds pretty amazing and it actually is. Firefox is a great platform and now because of that, now you can find multiple addons that are competitors to standalone commercial applications.

7. IE View / Opera View / Safari View Win / Chrome View

These plugins allow you to open the current web site in one of the following browsers: Internet Explorer, Opera, Safari and Chrome. There is one small requirement for these plugins. That is to have all the mentioned browsers installed.

8. CodeBurner

This plugin provides an easy access to HTML and CSS reference information and code samples. It is easy to use and you may gain time by using it instead of surfing randomly the web.

Conclusion

That’s it! You can debug sites, you can make wireframes, you can collaborate, you can test for cross browsing, you have access to quality reference. This is life, from time to time you have to open Photoshop to complete visual tasks. Hopefully this will help you in your web design career. Cheers!