SUBSCRIBE (RSS)
  • July 4th, 2008
  • Apps
  • 2 Comments

The only Firefox extensions a designer needs

A post by George

I’ve read a lot of posts over the years on the top 50/100 of this that & the other, when it comes to apps and extensions, it’s a BS approach. No one is going to install that much stuff and if they do the situation will swiftly become an absolute mess.

I am designer, these are the add-ons that I consider essential, the one’s that get used on a daily basis & that if you havn’t tried, you should.

Web Developers Toolbox

Web Developers Toolbar - Screenshot

Some say this is the most handy toolbar there is for firefox… i’m probably one of them. If your designing / deconstructing websites this is a must have.

Top 3 Features

  • View Style Information – When you hover over elements within a website, it highlights it’s bounding box and then displays the route of how it is contained. This feature has helped improve my CSS endlessly!
  • Resize Window – It allows you to resize your browser to any given screensize, you can even create your own presets 1024×768 or iPhone. If you use a massive monitor or a silly resolution then this can help you keep it all in perspective.
  • Disabler – You can use it to disable any element, Javascript, Cache, CSS, Images. Perfect for testing accessibility issues.
  • Firebug

    Firebug - Screenshot

    I use this in much the same way as I do the view style information with the web developers toolbox. The key difference between the two apps’ features is that Firebug has a much more in depth & easy to use ‘Styles View’, moreover you can click the layout button and it gives a you a diagram of how the padding, border & margins effect the object your working with.

    Screengrab

    Screengrab - Screenshot

    Not just an average screengrabber this mod can screenshot the whole page from top to bottom. Great if your working on a long design – e.g. blog, for a client. Also helps you get a better grasp of the overall layout consistency etc.

    Colorzilla

    Colorzilla

    If you ever find yourself thinking, “by gosh! that colour’s bloody lovely!”, but then find yourself screenshotting and taking the screen into PS/FW etc etc then this is the tool for you. It works by adding a built in eyedropper into your Firefox, allowing you to get RGB values and Hex codes straight from their… Colour without the bumph.

    Gridfox

    Gridfox - Screenshot

    Grid based design is really coming to the forefront of web based, usability at the moment with more and more people adopting systems such as the 960 Grid System. I’m a bit of a late adopter but have lately started implementing it heavily on client based CMS websites – it really helps keep things like mediaplayers, banners and other fluid-cms-elements.

    Long story short Gridfox allows you to drop a grid over your live website helping you keep your design within the constraints.

    If your still not a believer in grid based designs, this is the BBC websites style guide (grid based) and makes a very interesting read for any Grid lover/adopter… jeez i’m such a geek haha.

    Hang on just a minute son, it’s all good and well telling me what you use for your designing & that but what other add-ons are you sporting…

    If your interested in how to Become a Power User with Firefox 3 this link over at Lifehacker is a good guide.

    Socialise

    If you liked this post, why not submit it to one of these?

    2 Comments on “The only Firefox extensions a designer needs”

    1. Michael
      February 19th, 2009
      2:05 pm

      Although I haven’t tried using Colorzilla, it seems a little too simple. You might try using ColorPic (iconico.com). Although it isn’t a Firefox extension, it is a very useful app that allows you to save your picked colors into an assortment of palettes.

    2. George
      February 19th, 2009
      2:19 pm

      Hi Michael,
      Thanks for the heads up.

      That is a nice app and does have a wider functionality that Colorzilla, def worth installing but it’s always handy to have a colour picker to hand.

      Especially when your building a design and you forgot what #refs you are using – or is that just me :P

    Leave a Comment