Navigation

6 Essential Firefox Add-ons for Designers

Resources | Nov 19, 2008

As a webdesigner (and technologically savvy user of the Internet), there is no excuse for you not to be using Firefox as your primary web browser.  If you aren’t using Firefox yet, you need to go and download it right now.  Not only does Firefox provide a top of the line Internet browsing experience, but it also provides an endless amount of functionality that you simply won’t find in any other Internet browser.

Because third parties can develop add-ons for Firefox, by downloading the best add-ons that are available, you can transform Firefox into a tool that dramatically increases your productivity and saves you a countless amount of time.

 Since there are so many different add-ons available to download, it can be a little overwhelming to pick out which ones you should be using.

Therefore, I decided to do all of the legwork for you and compile a list of the six best Firefox add-ons for web designers.

 

Web Developer

Web Developer Screen Shot Although it is called Web Developer, this Firefox add-on is absolutely invaluable for web designers. If you were only going to download and install one Firefox add-on, this is the one that I would recommend to you. The reason is that this add-on provides a variety of different useful features, and could be classified as the Swiss Army Knife of Firefox add-ons.

The first feature of this add-on that designers will find useful is the CSS menu.  Features of this menu include the ability to disable styles, display CSS by media type, view CSS, view style information, add a custom user style sheet or directly edit CSS.

The next feature of interest for designers is the Image menu. In addition to allowing you to display ALT attributes, image dimensions, image file sizes and image paths, you can disable images, find broken images, outline images, replace images with ALT attributes and several additional functions.

Although I could devote several pages to all of the features that this add-on offers, I just want to touch on a few other functions that web designers will find especially useful.  These include the ability to outline different elements (ranging from frames to block level elements), edit HTML and show hidden elements.

 

Firebug

While Web Developer is the first add-on I would recommend to any designer, Firebug runs a close second in terms of usefulness for designers.

With Firebug, you are instantly given the ability to edit, debug or monitor any web page.  Firebug gives you full control over the CSS, HTML and JavaScript of any page that you choose.  Best of all, every change that you make is done live and instantly, so you can quickly test out different changes and see the results of those changes instantly.

Like most of the best add-ons for Firefox, Firebug goes beyond its basic functionality and provides a wealth of options that make it easy for any user to completely customize their use of this add-on. Some of the additional features and options offered by Firebug include keystroke shortcuts, the ability to control how and where the Firebug editing area appears, visual guides for editing CSS, analysis of network activity and customizable logging for JavaScript.

 

Colorzilla

As a web designer, you never know when inspiration is going to strike you as you are surfing around the Internet.  For example, you may be looking at a website and come across a color that you really like.

If you want a quick and efficient way to be able to find out the exact HSV and RGB value for that tool, you should install the ColorZilla add-on.

The ColorZilla add-on features an online eyedropper, which makes it quite simple to get the exact value of a specific color.

 In addition to the online eyedropper, ColorZilla offers several additional features that most web designers will find useful such as a DOM color analyzer and online palette viewer.  The DOM color analyzer allows you to locate elements on the page that correspond to a given color and find out the CSS rules that specify a certain color, while the online palette viewer allows you to bookmark and share color palettes that you like.

 

FireShot

FireShot Screenshot

Although your OS undoubtedly has a built-in screen capture function, this doesn’t mean that the default screen capture has all of the capabilities that you may need.

For example, can the default screen capture of your OS grab portions of a web page that are outside of the browser window?

In most cases, the answer to that question is going to be no.  Fortunately, there is a Firefox add-on that offers this feature, along with a variety of other useful functions.

FireShot is an advanced screen capture add-on for Firefox.  In addition to giving you the ability to capture an entire web page (even when there are portions of the web page that aren’t visible as a result of the constraints of your browser window), FireShot also allows you to add annotations directly to your screen captures.

FireShot gives you several options for handling your screen captures.  Not only can they be saved in a variety of file formats, but they can also be saved to your computer, emailed to others or saved on the free FireShot hosting server.  As a result of its wide range of features, this add-on has attracted over one hundred and fifty thousand active users, and has proven itself to be invaluable for web designers and other Internet professionals.

 

CSS Validator/HTML Validator

As a designer, you want to make sure that all of your hard work can easily be accessed by visitors and displayed to them properly. One of the easiest ways to ensure that both of these tasks are accomplished is by validating all of your code.

Although they are two separate add-ons, both the CSS Validator and HTML Validator should be installed in the browser of any web designer. Once the add-ons are installed, the CSS Validator can be accessed from the Tools menu, while the HTML Validator can be accessed from the Firefox status bar.

Each of the add-ons validates the code against the appropriate W3C standards.

 While the CSS Validator simply does a standard validation of the code, the HTML Validator provides some additional functionality.

When using the HTML Validator, you can choose to validate directly in the browser (where any errors are shown as a status bar icon), show the source with explanations of errors after the validation or a validation with proposed solutions to any errors.

 

Browser Window Resizer

As someone who creates designs for the Internet, one of the most frustrating issues that you undoubtedly encounter is trying to create designs that work across a variety of screen sizes.

Because you don’t know whether a visitor is going to be viewing your work at 640×480, 800×600, 1024×768, 1280×1024 or 1600×1200, it’s your responsibility to create designs that work at all of these resolutions.

While there are a variety of ways to view your work at different resolutions, I have found that the Browser Window Resizer add-on is the most efficient way to accomplish this task.  Once you download and install this add-on, you will be able to instantly re-size your browser window to any of the standard resolution sizes listed above.

This will allow you to see if your design is going to look good to visitors who aren’t using the same resolution as you.

 The best thing about this add-on is that if you are using it in conjunction with the other add-ons in this list (specifically Firebug), when you see that something isn’t displaying properly, you can instantly make adjustments to your code and see if that fixes the problem, all without ever leaving your current browser window.

Know of any other good extensions for designers? Feel free to comment and leave us feedback.

Share this post
Comments (no login required)
  • http://twitter.com/metacrawl Metacrawl

    I have been using Firebug just recently and I will never work on any other site without Firebug! I recently at work got the task to look into our main website, which is the worst site coding I have EVER seen! There is PHP being called left and right and iFrames! who the hell uses iFrames anymore. Not just iFrames, but iFrames calling SQL data which I have to find and edit which is simple HTML just… Im ranting now…

    Point is, Firebug saved my life in finding the iFrames within the SQL Database and letting me edit it, which was THE most impressionable feature I found.

  • http://raulpinto.110mb.com/ Raul

    all the plugins r nice. firebug is simply great

  • Jay

    Great Post. I live by Web Developer. Absolutely essential. Gave up Dreamweaver in exchange for Notepad, Web Developer and CuteFTP. However, Web Developer has a “Resize” tool that allows you to input any screen size you desire – so I found Browser Window Resizer a bit redundant.

  • http://www.blogspot.fluidnewmedia.com Ahad

    I like firebug alot and have worked with it for about 3 months now. Its easy to use. I know that this topic is about Firefox, but i have recently used Google Chromes HTML/CSS inspector and its much more usable than Firefox’s Firebug is. The fact that it pops up over the page you want to edit is one reason i use it alot more now.

    I havent tried web developer, and thanks for sharing that with us. I will check it out.

  • http://jackasssoapbox.net Pea

    Thanks for the list. I’ll pick up Firebug and Fireshot!

    You can validate and edit HTML/CSS on the fly and resize browser sizes with the web developer toolbar. So the Browser Window Resizer and CSS/HTML validation extensions might not even really be necessary.

  • http://www.internetovehry.cz Online Hry Zdarma

    I use FireShot and i must tell that is very good and useful.

  • http://vector.ardyansah.com sang mantan

    i luv firebug:D

  • http://www.sliceandstitch.com Prasanth

    I use web developer add on and it rocks! Validate CSS, Browser resizing and all the things a web developer/designer needs is there! Happy to know that I use all these plugins! :)

  • http://infofoundry.net Ezra

    Great post – it’s also worth pointing out that there is a window resizer and CSS/html validator that comes with the Web Developer toolset. 3 of the tools in one!

  • Daniel

    I use YSlow http://developer.yahoo.com/yslow/ which checks and grades your sites performance against optimisation criteria.
    FireFTP http://fireftp.mozdev.org/ is a *great* ftp app right in your browser.
    In an alternative to FireShot, I use Screen Grab http://www.screengrab.org/ but I do see that the annotations may be a reason to switch.

  • Pingback: BjOrN_M’s weblog » Blog Archive » 6 Essential Firefox Add-ons for Designers

  • http://www.indextwo.com dehlz

    Excellent, I had everything listed here except for Fireshot. Should be useful.

  • http://www.bogdanpop.info Bogdan Pop

    Did you test Minefield? It is even better than the standard Firefox. When I first switched I thought my ISP has just doubled my internet uplink.

  • Pingback: 31 Incredible Resources And Inspirations For Designers Like You To Discover The Best Of The Web In November | SulVision

  • http://theclevergeek.com Gnome

    I find MeasureIt very useful when trying to determine the size of an element or image and how many pixels I may need to adjust to get the right feel.

    http://www.kevinfreitas.net/extensions/measureit/

    I’ve also found SEO Tools useful from time to time as well. Great tool for web design and just generic web traveling.

    http://tools.seobook.com/firefox/seo-for-firefox.html

  • http://blog.aditu.de Tobi

    Yes, that are the absolute basic tools! A good entry as reference which addons are a must!

    Take care
    Tobi

  • http://joax.nl Joax.nl

    thanks a lot, i did not know fireshot.. awesome plugin

    the screen resize function is also part of the Web Developer toolbar.. you only gots to set the screensizes that you want to test once

  • Matt

    Actually, the Web Developer toolbar has window resizing built in, so there’s no need for that last one.

  • whiskeyfrances

    Measureit is missing!

  • whiskeyfrances

    Measure it and adblock plus… The first one will let you … errr… measure things? And the other will let you inspect object subrequests (like peeking xml files in use and so)

  • http://www.markomdizajn.com/ Markom Web Dizajn

    CSSViewer is very handy if you want to take a quick look at CSS styles for a specific html element.
    https://addons.mozilla.org/en-US/firefox/addon/2104

  • Pingback: [arte e vício] » Blog Archive » A solução para blogueiros e designers sem inspiração e mais tutoriais e geradores

  • John Hamm

    I use Chrome for my main browser, and Firefox for my development browser. Chrome is, hands down, the best browser for browsing websites. Firefox is the best for developing websites and for using addons.

  • http://www.infosistems.ro Cosmin

    nice round-up, BUT :

    CSS/HTML Validator and Browser Resizer are already part of the Web Developer plug-in, so they just fill up space in your list…you should remove them and call it 4 [...]

    You didn’t mention Foxmarks which is an awesome bookmark synchronizer, FireFTP or IE Tabs…or MeasureIT…google them if you’re not already using these plugins, they make my life a heck of a lot easier :)

  • http://www.hypertransitory.com JG

    I use Firefox for my web development, but it’s just too pokey to use as my primary browser. It’s a real shame, but I’ve grown accustomed to the speed of Safari, and Firefox doesn’t deliver.

    That said, Firebug is one of the most awesome tools available. It just got me out of an annoying CSS jam today. I also use Measureit all the time. Those along with the WebDeveloper and it’s all gravy.

  • sachin khobragade

    Firebug is useful addon.

  • http://www.web-dizajn.eu Web dizajn EU

    Any experience, will this plugins slow the browser speed? Thx.

  • BJung

    (Ok, old article, but it’s a good reference.)
    No one seems so know Web Developer has a ruler built in as well (Miscellaneous>Display Ruler), so Measureit isn’t needed either when you use WD. :)

  • http://www.sajtoteka.com Web dizajn sajtotekar

    Excellent post. I haven’t tried these 6 add-ons, but I,m going to. As a web designer I think that they will help me a lot and save me time. Eventually main purpose these add-ons is that designing process make it easier, faster, enjoyable and reliable. Thanks for good choice.

  • http://azysworld.com Abdul Aziz

    Since I have started using firebug, I have halved by debugging and testing time on all of my projects. Just LOVE IT !!!!

  • http://www.twitter.com/thomasmburu thomasmburu

    I’ve not read the above comments but truthfully have liked BROWSER WINDOW RESIZER.
    cool

  • http://jai-ho.org/ jaihosundar

    thanks for sharing

  • http://www.alejandroperazzo.com/ Alvaro Hernandorena

    very usefull tank you

  • http://www.chotrul.com Chotrul

    How on earth did I ever survive before Firebug was born???????

    It’s utterly changed the universe!

  • http://www.areapal.com/rapo areapal

    Firebug is excellent tool out of 6.

  • http://www.kaplang.com/blog Michelle

    these are great :) I also use Tinyurl generator add-on for firefox and screen grabber, these are both also really useful.

  • http://www.elitesolution.co.rs ELITE Solution – Web dizajn

    Firebug is the best tool ever! Strongly recommended to all serious web designers or web design companies.
    If you wish to save time you spend on making good web design projects (web dizajn), please consider Firebug as the serious solution.

  • http://www.silvaheeren.com/ Daniel

    Simply amazing, great tools. I used firebug before but not the other ones. Thanks a lot.

    Daniel

  • http://piczoom.net piczoom

    firebug is must-have tool for every web designer or developer, i use it every day when i browse websites, and if you haven’t try it out, just give it a shot and you will see how blind you were while you browsing websites.
    thank you for the Firefox add-ons list

  • http://www.tecmania.it/ marina

    i love firefox

  • http://id-di.com/ iddi

    Hi,

    I wanted to add that the window resizer you mentioned above doesn’t support the latest version of firefox, but this one does:

    https://addons.mozilla.org/en-US/firefox/addon/5792/

    Hope that helps.

    Regards,
    iddi

  • http://www.bestpriceforsales.com/ Iba01

    I use web developer add on and it rocks! Validate CSS, Browser resizing and all the things a web developer/designer needs is there! Happy to know that I use all these plugins!

  • http://www.seokul.com seo

    voovvvvvv

  • http://www.setupizle.com setup

    Grate

  • http://www.setupizle.com setup

    Grate

  • http://www.seokul.com setup

    thanks admin

  • http://www.sepidweb.ir/englishblog/ Paiman Roointan
  • http://www.clickis.eu Clickis

    Great post, excelent add ons, I would add SeoQuake as well.

  • http://webkomsija.com/ web dizajn

    This is nice stuff..all in one :) Thx!

  • http://vranje.webkomsija.com/ Vranje

    Nice information to improve my seo things in firefox . Thx!

  • http://www.mdesigning.com <a href=”http://www.mdesigning.com”> M Design</a>

    A great thing to know for web design.