Six Essential Firefox Extensions for Web Designers

This work is licensed under a Creative Commons License.

Six Essential Firefox Extensions for Web Designers

Extensions are what make Firefox a truly great browser. Not only do they add extra functionality to its already-great out-of-the-box features, they also help define the role Firefox plays in a computer user’s life online. Web designers, for example ought to have the following set of extensions installed:

ColorZilla

Before this extension came along, copying color values from web pages meant taking a screenshot of the browser window, opening your favorite image editor, pasting the screenshot there, and then using the eyedropper tool. With ColorZilla, you get the same functionality right inside your browser, sans the whole arduous process. Just click on it to activate the tool, and click anywhere on the web page to get the color value for that coordinate. You may then copy that color value—available in a variety of RGB and hex formats—to the clipboard for pasting into your image editor, or a stylesheet document.

ColorZilla also features DOM inspector, color picker, and page zooming capabilities.

Web Developer

Web Developer is an extremely powerful web design/development toolbar companion that packs everything but the proverbial kitchen sink. This makes it a must-have for serious web designers, as it helps you dissect all aspects of a web page. To name a few, Web Developer allows you to:

Display an element’s attributes and style properties, as well as draw colored outlines around them;

Edit linked/embedded stylesheets in the sidebar while previewing—in realtime—any changes made to the styles;

Validate your HTML, CSS, and RSS documents via the W3C Validation Services;

Resize your browser window to standard resolutions, or to custom sizes.

IE View, OperaView

A good web designer always tests in multiple browsers, and with these two extensions, cross-browser testing is just a couple of mouse-clicks away. IE View and OperaView enable you to open your currently-viewed page from Firefox in Internet Explorer and Opera, respectively. Sure, you only save a couple of clicks here and there, but in the end it’s all about streamlining your work process.

Screen Grab!

Need a quick way to get sample screens to show to your clients? Tired of having to stitch several screenshots of a long page in Photoshop? Screen Grab! takes care of that. It automatically scrolls around the whole page, taking snapshots of each portion. It then stitches them together and outputs it into high-quality PNG format.

Note: Screen Grab! requires Java 1.4 or higher to work.

Update 2006-03-14: Alex found an alternative released just a few days ago that takes advantage of Firefox’s <canvas> element, instead of Java. It’s called Pearl Crescent Page Saver, and I’m assuming that since it uses <canvas>, it will only work in FF 1.5 and up.

wmlbrowser

wmlbrowser is a simple extension that allows you to view WML pages in Firefox. This will come in handy for mobile web developers, especially now that mobile phones and other similar portable devices are joining the mainstream Web bandwagon.

Tip: Couple this extension with Web Developer’s small screen rendering function, and you have yourself a mobile device emulator!

Top