Posted in Featured, Web Design

Like this post? Share It :
  • Print
  • email
  • PDF
  • Google Bookmarks
  • Facebook
  • Twitter
  • MySpace
  • Yahoo! Buzz
  • del.icio.us
  • Digg
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Reddit
  • Technorati
  • Design Float
  • RSS

10 Firefox Web Design addons

firefox

Firefox is for sure one of the best web browsers around not only because it’s free but because of the amount of firefox addons the web community makes for it. With these additions to Firefox you can turn your favorite web browser into a valuable tool that will boost your performance during your web design process.

Below you will find 10 of these great plugins each one links to their respective page where Firefox users can install them. If you trust my judgment and would like to get them all, I have created a collection of them all on my FireFox addons page to save you some time clicking.

Get these top 10 Firefox addons

1. Firebug

________________________________________________________________

fire bugThis is for sure a must have. One of the features I love in Firebug is the fact that you can edit the css styles directly in the web browser and get a real time preview of what that change will look like in real time. You can also use the same feature to debug html and javascript. All this presented neatly as a pop up bar at the bottom of your browser.

Get Firebug

2. Web Developer

________________________________________________________________

webdeveloperThis addon should be named something else since it’s not just for developers. As a designer this tool will definitively come in handy because of it’s cool features such as the Disable dropdown which can make individual items in a site design such as css, images and colors to name a few not to be displayed which can help you identify nasty issues in your design. Resize which can scale the web browser window any size you want so you can see the site in different resolutions and Outline which will spot chosen elements on the site without having to see a single line of code. Also not to mention direct validation links of css, html ecc… all these great features and more in just one addon priceless…

Get Web Developer

3. Screengrab

________________________________________________________________

screen grabUse Screengrab to save or copy what you see in your browser window sort of like the print screen key in a standard windows keyboard (unless you are a mac user). The only difference here is that you can actually choose what to save in the captured image. The options available are complete page/frame, visible portion, selection and also selected window.

I my self use a lot the complete page/frame feature since it captures the whole page without you having to scroll down and capture the bottom part as well which usually you would need to join together in an image editing program such as Photoshop to show all the site. Really a great time saver.

Get Screengrab

4. FireFtp

________________________________________________________________

fireftpEven if you use the best out of the box FTP client money can buy you simply can’t ignore installing this one since its free and comes with tons of features. To mention a few; directory comparison feature to match your offline data with the online one, a very robust search filtering system, ftp remote editing, drag and drop and also supports SSL encryption…Did I mention its free?

Get Fire Ftp

5. ColorZilla

________________________________________________________________

color zillaWith ColorZilla you can pick any color within Firefox thanks to it’s great eyedropper tool. Once a color is picked up you can use it in another program and paste it there. You can also save the same color in a specific palette of your choice simply clever!

Get ColorZilla

6. ColorSuckr

________________________________________________________________

color suckerIt does what it says… Sucks out colors from any Image and extracts the 12 most used colors from it. You can then build schemes from these results together with additional features that make this tool a truly great addon.

Get ColorSuckr

7. Palette Grabber

________________________________________________________________

palettegrabberThis addon is the same as above only this time the colors are taken from the whole page and can be exported for various programs such as Photoshop, Paint Shop Pro and Flash to name a few.

Get Palette Grabber

8. MeasureIt

________________________________________________________________

Measure itMeasureIt can make you draw a ruler any where you want to check the dimensions (units in pixels) or alignment of any element in the browser.

Get MeasureIt

9. GridFox

________________________________________________________________

grid foxIf most of your designs support a grid layout as explained in these tips this tool is a must have. It simply draws the right grid on top of your page which can help you design a more accurate site and also identify issues that our naked eye can easily miss. Nice extension nonetheless.

Get GridFox

10. Open With

________________________________________________________________

openwithEvery web designer knows that a site design must be tested over different web browsers due to compatibility issues as explained in these tips. Even if you have multiple displays its still time consuming to switch between one browser to the next. Open With is a great time saver, basically when you right click on a link/page in Firefox you can choose to open that link/page in various web browsers within a tab in Firefox itself!

Get Open With

Like this post? Share It :
  • Print
  • email
  • PDF
  • Google Bookmarks
  • Facebook
  • Twitter
  • MySpace
  • Yahoo! Buzz
  • del.icio.us
  • Digg
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Reddit
  • Technorati
  • Design Float
  • RSS

No related posts.

Comments are closed.