9 Essential Firefox Add-ons for Easy Web Development
86If there is one reason web designers love using Firefox, it must be the huge variety of add-ons. Firefox is very flexible. There are thousands of add-ons available on Mozilla’s site and we can add them to our Firefox freely.
I design my own blog, and Firefox with its add-ons really helps me on doing it.
In this post, I’d like to share which add-ons I used to help me design my blog, their function, where to download them, how those add-ons helped me, and how they could help you too.
ColorZilla
An advanced eyedropper, ColorPicker, Page Zoomer, and colorful goodies – download ColorZilla here.
I use ColorZilla to find the hexcode of a color. Let’s say you are in the middle of CSS script writing and stuck because you don’t know the hexcode of a color you’d like to use? Find a similar color on the web, then use ColorZilla to get the code. No need to boot up Photoshop.
MeasureIt
Draw out a ruler to get the pixel width and height of any elements on a webpage – download MeasureIt here.
We can simply say that MeasureIt is a web ruler. You can measure (in pixels) any web element open on the browser window using MeasureIt. I use it to check my design element’s width and height so that everything lines up perfectly.
FontFinder
Get all CSS styles of selected text in Firefox / Thunderbird – download FontFinder here.
We all know that typography is an essential element in design. In terms of web design, a beautiful font is not enough.
It should be a web standard font (common font which is available on most computers) too. So, rather than get confused by finding some kick ass font combination for your design, you can simply browse the web, find a site whose typography fascinates you, highlight it, right click it, open FontFinder to find the combination used.
You can then base the typography in your own design on the site you’ve found.
IE Tab
Embedding Internet Explorer in tabs of Mozilla/Firefox – download IE Tab here.
IE can be a nightmare to work with (especially IE6). It has a different method of rendering CSS soour beautiful design on Firefox could be your worst nightmare in IE.
Using IE Tab, you could check your design’s appearance on IE in Firefox window so you don’t need to open IE. This saves you time from loading up the browser.
Window Resizer
Resize your browser to various standard resolution sizes – download Window Resizer here.
One more problem for web designers: Variety of screen resolution.
There are loads of variations out there. Some of the most common are 800×600, 1024×768, 1280×800, 1280×1024, and 1600×1200, but even higher screen resolutions exist. Your design could looks perfect in 1280×800 but at the same time annoy people with 1024×768 screen resolution because they have to scroll to left or right your site.
Stop making silly mistakes. Check your design appearance in all screen resolutions using Widow Resizer.
JSView
View not only HTML source, but also CSS and JavaScript source – download JSView here.
Using JSView, you can view not only HTML source of page you are opened, but also external files attached to the webpage like CSS and JavaScript. So whenever you open some cool blog design, you can see how that page was built by analyzing its source code.
Scrapbook
Helps you to save Web pages and organize the collection – download Scrapbook here.
Bookmarking some beautiful sites for reference is cool. The problem is, what if the webmaster closes the site or changes the website’s design?
Scrapbook helps you by storing any cool webpage you find and saving it in your browser for you to look at any time.
GridFox
Draws a grid on top of a website – download GridFox here.
960 Grid is web development template created by dividing 960 pixels web page into 12 or 16 columns. It is a very useful system to make your web layout neat.
The original 960 grid system CSS framework was created by Nathan Smith. GridFox lets you overlay a grid onto the current webpage to see how everything fits into the layout.
Screengrab
Screengrab! saves webpage as images – download Screengrab here.
Screengrab helps you to store webpages as a PNG image. Use Screengrab whenever you need a screenshot of a site. You can capture a full site’s appearance, visible portion, or even just a selection of it.
Bonus – 2 More Add-Ons
The nine add-ons I mentioned above are the add-ons I have used a lot to help me build my blog’s appearance.
Those nine add-ons are enough for me. But I know some people use other extensions that they love as well. So in case you need more than what I’ve mentioned above, I’ve browsed across the web and can suggest some additional useful add-ons for you to use:
Firebug
Put a wealth of development tools at your fingertips while you browse – download Firebug here.
Using Firebug, you can edit, debug, and monitor CSS, HTML, and JavaScript live in Firefox.
HTML Validator
Validate your page design – download HTML Validator here.
Use HTML Validator to make sure that your design is valid and has no coding mistake according to W3C web standards.
Conclusion
That’s it. I hope all of the add-ons I’ve mentioned above will help you with designing your blog like they have helped me.
I believe that nothing’s perfect though, including this list. If you there are add-ons that have helped you with designing your blog but aren’t listed above, please suggest it via comment.
Enjoy this post? You should follow me on Twitter!
[…] http://www.problogdesign.com/resources/9-essential-firefox-add-ons-for-easy-web-development/ […]
Well, all add-ons are great but Firebug and HTML Validator are mandatory for me. They are the first extensions I install after (re)installing FF.
I’ll try a deeper test of IE Tab, it sounds cool. And I loved this FontFinder!
Tks Mr. Rasyid!
My Pleasure. Glad to know that my post helps you. :D
Firebug and HTML Validator is a cool stuffs to ensure your markup is valid. Pretty cool, but i don’t know why i’m not too interest in it. I personally prefer using web based validator and looking over other existing theme to know which markup to use. Too many add-ons will slow down FireFox, so i keep it as less as i can :P
You should try IE Tab and FontFinder. Special for FontFinder, it really really helps me on searching nice font combination to use :D
.-= Fikri Rasyid´s last blog ..50 WordPress Theme Gratis Untuk Personal Blog =-.
These are wonderful add-ons for any web designer.
Thanks for sharing these!
I’d have to say that FIrebug is a must-have for me. I’ve been using it for a while now and I can’t live without it. It’s great to be able to see markup, test-edit CSS properties, and check out how others have solved a particular design problem.
Yap. It’s pretty addicting, isn’t it? There are several stand alone software for live code-editing, but using integrated addons really helps.
At least, we’re not confused by “too many windows opened” :D
Nice list defientely going to try some out.
i’d recommmend using Firebug over JSView. It has many built in features and others have already started to create plugins for it (YSlow, hammerhead, PageSpeed, FirePHP(?might not be the exact name) etc)
again nice list
Wow, thank you :)
Yep, firebug has all JSView features to view CSS & Javascripts source. But Firebug feels like slowdown computer. Since i’m not a die-hard coder, i prefer the lighter add-ons one (although its feature is not as complete as Firebug): JSview :P
Wohoo.. what a suggestion. I’ve heard several of it like YSlow (to check your page load based on rules for high performance web pages by Yahoo. But i haven’t heard the others yet. You can share your experience about the others here :)
I use YSlow as well, it’s a really great tool for optimizing your site’s load time. :)
This list is VERY helpful! Thank you!
My Pleasure :)
Thank you! I will definitely use ColorZilla!
.-= Carla´s last blog ..Giveaway: Win SIX Clean+Green Eco-Friendly Pet Cleaning Products =-.
Hoho, you should use it. Once you know how helpful it is, you can optimize it to make your blog design’s color become much more colorful and experimental than before :)
Wow indonesian blogger… love it…
Yap, i’m indonesian. “we’re not afraid”, isn’t it? Also in sharing tips in international blog with others :)
This is why I can’t leave Firefox. Great post! Thank you!
.-= adhi´s last blog ..8 Blog Terbaik Seputar Blogging =-.
Yep. Firefox is one of the coolest browser ever. It’s free, open source, and highly customizable. I put it as my first choice browser in general :)
The excellent Web Developer extension has the functionality of at least three of these, plus a LOT more. Highly recommended.
https://addons.mozilla.org/firefox/addon/60
Thank you for your information :D
I’ve heard about web developer add-ons before, It’s a very complete tool, but quite too fancy to me. to me, It’s turns out firefox into code editor.
Well, it’s a matter of choice anyway :)
These are awesome Firefox add-ons! These tools will really help in developing a really good blog design. My favorite is probably the FontFinder! Thanks for sharing all of these :)
Thanks! Glad to know that it helps :D
Yep, FontFinder is really really helpful. Now your blog’s typography become much more cool, isn’t it? :)
[…] mismo he dado con otro interesante artículo 9 Essential Firefox Add-ons for Easy Web Development, de ProBlogDesign, donde su autor comparte los complementos que ha usado para que nos ayude en el […]
Thanks Fikri, these add-ons look great. IE Tab in particular is a revelation.
.-= Tracey Grady´s last blog ..Busting the myths: what Graphic Design ISN’T =-.
My pleasure. Yep, IE tab is a revelation :D
Well, i don’t know whether IE Tab available in Mac OS or not. I’m still using PC :)
Thank you man.
check em http://blog.qmerdesign.net/web-gelistiriciler-icin-9-temel-firefox-eklentisi/
.-= Ömer UZUN´s last blog ..Web Geliştiriciler için 9 Temel Firefox Eklentisi =-.
My Pleasure. Glad to know if it helps :)
I already use most of this, but this kind of add ons are really useful for designers, it makes me save a lot of time, tolls like measure it and firebug.
Thanks for the list
.-= Luis Lopez´s last blog ..30 Excellent Logo Design Galleries For Your Inspiration =-.
Yeah, it saves lot of time. Especially for MeasureIT, now we’ll never guess web elements’s height and width again :D
There is an other great addon named Web Developer Toolbar!
This one knows a lot of things listed above.
https://addons.mozilla.org/hu/firefox/addon/60
Web Developer Toolbar is a pretty complete tool, but it’s just too fancy to me. But sure i’ll try it someday :)
The Web Developer toolbar for Firefox will save you so much time that you will be in disbelief. It has so many options you will wonder how you lived without it for so long.
Wow alot of pluggins I’ve never heard of, only one I use at the moment is firebug, will definately be downloading some of the others Thank You!
.-= Watch Big Bang Theory´s last blog ..Season 2, Episode 23: The Monopolar Expedition =-.
Well, you should try them. It helps :D
Firebug? Hmm.. i prefer using FileZilla, a stand alone FTP clien software. My way to limit add-ons amount on my FireFox :P
Does IEtab really work? I’ll give it a try, thanks for sharing.
Claudio.
edit: of course IE Tab is not available for MacOSX. :)
It works nicely on my installed firefox :)
great list. FontFinder and ColorZilla looks cool. I also should definitely try IETab!
.-= saramon´s last blog ..Microsoft + Yahoo =-.
Go and give em a try. You’re gonna love it :)
great list, gonna try asap some of them. Thanks.
Turns out IETab isn’t available for MacOSX
.-= Tracey Grady’s Latest Post : Busting the myths: what Graphic Design ISN’T =-.
A tenth essential Firefox add-on would be FireFTP – http://fireftp.mozdev.org
It is the best tool I’ve found for uploading files and images to my blog. Absolutely essential in my book. Thanks for the ones you’ve listed. I use some of them and will definitely be checking the others out.
My pleasure. Go and test em out. You’ll love em :)
FireFTP? Hmm.. i prefer using FileZilla, a stand alone FTP clien software. My way to limit add-ons amount on my FireFox
Who knew so many helpful things came from firefox maybe I should consider making it my “default browser”
—
Thanks & Regards
Noel from nopun.com
a professional graphic design studio
Sure. I also use it as my default browser :D
This is the reason pro developers work with FireFox. The amount of great plugins & add-ons make productivity easier and faster.
My personal pick is Firebug to inspect CSS elements.
Nice post!
Thanks! Add ons is the reason why people use Firefox :D
[…] http://www.problogdesign.com/resources/9-essential-firefox-add-ons-for-easy-web-development/ […]
Wow this is a great list! You definitely have a point there with Colorzilla. I always make a screenshot and boot up photoshop to get a color (shame shame). But these are some really usefull plugins that I will definitely use! Thanks for sharing this!
I personally use Firebug, YSlow and Web Developer. They help me a lot. Thanks for this nice post! The other plugins that you have mentioned here are worth installing!
[…] 9 Essential Firefox Add-ons to Help You Build a Beautiful Blog Design […]
excellent post. can’t wait to try “window resizer”.
great list friends :) congrats for the this post
[…] Pro Blog Design’s 9 Essential Firefox Add-ons for easy web development […]
Excelent Article! Thank you very much…
[…] ProBlogDesign sitesi web geliştiricler için 9 temel firefox eklentisini derlemiş. […]
nice info, i write same collection too on my blog :)
salam kenal
::azul::
Hey Man
Great collection.
I Use Scrapbook and Screengrab extensively.
Scrapbook helps me when I’m out of Internet or Offline reading.. Other tool which I use is wget which is also very productive……
[…] eklentiler, temalar ile kişiselleştirilebilir olması. daha önce bir çok yerde ( *, *, * ) web geliştiricileri için firefox eklenti listeleri yapılmıştı. şimdi de sitepoint […]
Incredible List bro..
Cool list. I only used a couple from these. The measure it looks good, I am giving that one a try.
Another great one, is the web developers toolbar.
Thanks for the great list. May I also recommend YSlow, it’s another great addition to the Firebug add-on that goes into some great details and ties into smush.it etc.
oola. great job fik. kee it up.
Nice collection of some essential Firefox add ons, I am using many of them, but got to know some new ones!! Keep it UP!!
I’d add Web Developer (http://chrispederick.com/work/web-developer/) to the list. Loads of different tools and functions (even to ditch a few listed there already)!
But everyone to their own. I found some new gems on this list too, thanks for posting! :)
Still smoking, yet I am thankful the cancer sticks have not taken away my youth. ,
The physicist and the chemist, investigating inanimate matter, have never witnessed phenomena which they had to interpret in this way. ,
Look for ways to develop your interpersonal skills Will internships offer you an opportunity to work with others? ,
Really helpful for new bees
Its wonderful collections.. Thanks for sharing it
The Web Developer Tool Bar and Firebug is all I need. My favorite feature of the Web Developer Tool bar is the live CSS editor. I am not that great with CSS so it’s really nice to see the changes immediately.
very usefull info
Great list of useful Firefox add-ons. I haven’t heard of most of these and not used them yet but I will have to download them and try them out. Thanks for sharing.
Thanks for sharing these useful tools
bBiKnH rdinyuyzstfm, [url=http://pyuawacjujkt.com/]pyuawacjujkt[/url], [link=http://gkvvybifehvn.com/]gkvvybifehvn[/link], http://voigtlsogrlo.com/
Nice collection of firefox addons, thank you for sharing.
These are awesome and very useful add ons. Thanks for the resources!
I normally don’t content in homepage rather Your website forced me To, amazing work.. Lovely …
GridFox is very useful. I’ve been using it for a while now. Do you habe some Add.on compatible with FF for mac as well?
Thanks.
Thanks, But i didn’t understand what is it really good for?
I use a lot the Web developer toolbar; it is very useful as it allows you for example to validate your page or to disable immediately javascript or css.
Try it!
As a developer i feel every developer must have all these add on in their firefox, they helps a lot in web development!!
Ya, it’s really helpful to increase Blog design. I have download all the add ons.
Firebug is great but on my mac it slows down anyhting :(
Nice list – as a web designer I love using Firebug as I see this is in your list.
great list, i have used firebug a couple of times, though i hate using tool bars on my laptop it uses to much room up.
I used to use firebug but to be honest I hardly use it all these days, it’s good to make sure you haven’t missed any h1 tags or image alts but aside from that
Men are like bagpipes no sound comes from them until theyre full.