Bulletproofing Your Firefox For Web Design
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!
We also make use of Google’s PageSpeed addon Firefinder and MeasureIt. Firefinder and PageSpeed are for Firebug. They all can be found at Mozilla’s web site. PageSpeed and YSlow are kind of in competition but they have some unique features.
MeasureIt is definitely a great tool. Regarding Firefinder I can’t say anithing because I’m not familiar with the plugin.
Anyway, great additions, thanks for sharing. Cheers!
I agree with MeasureIt as well. Another great tool that I use when laying out a website in CSS is Pixel Perfect.
I’ll have to check out Fireshot and Pencil. Thanks for the list!
Interesting, thanks Andy for sharing cool stuff.
I was thinking that a good idea for a post would be a list with tools / addons / plugins for our FF in order to make blogging easier, how that sounds?
That’s a good idea Mauro, I’ll try that. Thanks for the suggestion.
Cheers!
I have installed every single addon listed in here, and now Mozilla looks stronger than ever.
Thank you very much for the suggestions.
I love Firebug. Thanks for the list!
I like firebug in this list of firefox add ons. It will be more useful if you explained about the pencil add on.
I think I will make a small tutorial in the future posts.
Thanks for the idea.
Thanks for sharing, Andy. I just hear about Pencil. Wireframing is simple yet crucial step. Agree with Mony, waiting for your tutorial.
Ok guys, the next article will be a Pencil tutorial on Wireframing.
Yes!! Firefox it’s the best! fuck IE..
Hi Andy,
Have you removed the link to the plugins that embed other browsers into FF?
Oh, also, there’s no real need for MeasureIt, because WebDevToolbar has an even better one. It’s in Misc>Display Ruler.
And by the way, have you tried Ubiquity? It’s awesome!
Hi Cosmin,
I didn’t place the links in the article because there were 4 links and I created only a section. Try and search inside Mozilla Addons site and you will find those 4 plugins. Sorry for the inconvenience.
Cheers!
I think firefox is really the best. Thanks for this article
Surely, Firefox is very good. Till now I have never had any complains using it and seems like these add-ons will also be good. I’ll soon add them all to my Firefox. Thanks.
Its taken me a while but I’m finally coming around to #Firefox and the wonderful world of cool plug-ins that it provides http://bit.ly/VoRf5
This comment was originally posted on Twitter