Web Designing Tutorial - Learn HTML, CSS, Java Script, Flash Website Designing Tips: 9 Essential Firefox Add-ons for Easy Web Development

Monday, November 9, 2009

9 Essential Firefox Add-ons for Easy Web Development

add-ons

If 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

colorzilla screenshot

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

actual of 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

actual of 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

actual IE_Tab screenshot

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

actual of 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

actual of 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

actual of 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

actual of 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

actual of 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: