Firefox is a Web Designer's Dream Browser

May 23, 2005

Sorry, Bill. It was fun while it lasted, but I've fallen in love with another browser, and I'm never coming back. You can blame Christian Watson. He introduced me to Firefox.

I have to admit, I was skeptical at first. But I've found Watson's Smiley Cat Blog to be an invaluable resource, and he'd never steered me wrong before. So I downloaded Firefox and gave it a whirl, intending only to use it to check pages. The relationship got off to a rocky beginning. I couldn't get Firefox to work with HomeSite, which was terrifically frustrating. But once I figured out what I (yes, me) was doing wrong, I couldn't resist trying out some of the extensions for designer/developers and, well, one thing led to another and... You know, you never intend for these things to happen.

I've been a die-hard Microsoft supporter for ten years, mostly out of stubbornness and a need to be perverse. But even I couldn't deny that Firefox was better. More than that, it was fun. I'd had no idea what I was missing.

Recently, Alex Walker of SitePoint posted "Firefox Dev Widgets," praising Firefox for its "constant flow of new and groovy extensions." He cites Link Checker, Measure It and View Source Formatted as some of his favorites, whereas Watson describes "the extensions that help me the most when it comes to web projects" as Web Developer Toolbar, HTML Validator, ColorZilla, Aardvark and Checky. I'd add View Source With, Fangs Screen Reader Emulator and Google Page Rank Status to the list.

Briefly, here is a description of each of these excellent web development extensions that will make life easier for anyone involved in web design:

Aardvark: view source and see how the page is created, block by block.
Checky: interface to many online validation and analysis services.
ColorZilla: lets you get a color reading from any point in your browser.
Fangs Screen Reader Emulator: renders a text version of a web page similar to screen reader output.
Google Page Rank Status: displays the Google page rank in your browser's status bar.
HTML Validator: adds an HTML validation tool to Firefox.
Link Checker: checks the validity of links on any webpage and highlights them.
Measure It: get the pixel width and height of any element on a webpage.
View Source Formatted: displays formatted and color-coded source code.
View Source With: view page source with your external editor.
Web Developer Toolbar: a multi-featured extension with tools for just about everything--displaying and editing CSS; manipulating forms; displaying image file sizes and finding broken images and missing alt attributes; displaying anchors, link paths and cookie information; deleting cookies, showing comments and marking links as visited; outlining deprecated elements, links without title attributes and custom elements; resizing windows; validating HTML and CSS and viewing a speed report; viewing source, status icons and JavaScript errors.