Way back when Firefox was first released, I remember riding on a train and listening to my friends rave about it. I asked them “Why should I switch to Firefox? It’s not widely supported and if I design for Firefox I’ll still have to test in IE and Netscape.” (Yes, this was that long ago.)
My friend responded with a two-word sentence that would change my life: “It’s extensible.”
I downloaded Firefox that very night, and I was giddy within minutes. It was like the good old days, when we were running BBS’es out of our houses using our phone lines and 2400 baud modems, and RipTERM came along. It was like the clouds opened up and god rays shot down with celestial voices. “Aaaaaaahhhhhh, web design will be so much easier nowwwwww”, they sang.
Several years later, I’m still using Firefox. I’ve become very attached to some of the plugins, and they’re invaluable in doing my job. I’m sharing with you a list of my favorites, so you can hear celestial choirs too.
#1: HTML Validator + accessibility option
HTML Validator does exactly what it sounds like: it checks your HTML and Javascript to make sure it’s all correct. You can choose the standard and control how strictly it checks. It’ll give you warnings as well as errors, and best of all, it comes with an accessibility option.
The accessibility option lets you set levels and it’ll validate your site against the ISO standards. This is fantastic if you care about accessibility, and you should.
The interface for HTML Validator isn’t the best, but the functionality is so awesome that I forgive it for not being the most usable plugin.
#2: Window Resizer
Many designers work on large monitors set at high resolution. It’s great for productivity, efficiency and artistic freedom, but it sometimes leads us to forget how the rest of the world sees things.
Window Resizer lets you view your designs in whatever size you like with the click of a button. You should never release a new design without looking at every possible permutation as your lowest-resolution customer sees it.
#3: Screengrab
We often have to take something that exists and rather than redesigning it, make incremental improvements on it. Or, we just have to add something to it and the engineers flinch when we start talking about redesigning the rest of the page.
If you don’t have the original design files, Screengrab is the place to start. You can copy the visible screen or the entire page to your clipboard, or you can save to a file. I strongly recommend PNG, as the JPG image quality is really crappy.
#4: Palette Grabber
Likewise, it’s sometimes inconvenient to reverse-engineer a color palette with the color picker tool in Photoshop. Maybe you were browsing around and saw a site with such a brilliant color palette you absolutely must use that for your next design.
Palette Grabber gives you an icon in your status bar – one click and it creates an Adobe color palette for you based on the current page.
#5: DownThemAll
Oh DTA, how I love you. You’ve saved me so much time when I need to grab all the images off of a client’s site, or pull everything out of a folder! DTA allows you to download the result of every link on a page, or download every image on the page. You can filter by file type, and you can pick and choose or just grab the whole lot. It’s brilliant.
#6: Firebug
I don’t know how I lived before Firebug. I use it for everything – QA’ing developers’ work, finding code errors in my own work, tweaking code, identifying classes for use elsewhere. I could write a whole post just on Firebug.
The most useful feature of Firebug, for me, is the Inspect option. You open up Firebug on every page and it uses HTML Tidy (the same engine that HTML Validator uses) to show you the document object model in a very easy, navigable way. Then, you click inspect and as you move your mouse around elements on the page, it’ll put a little outline around each one, and in the lower panel it’ll show you the specific code that affects that element. It’s magnificent. You can figure out what class a div uses, why it’s not as wide or narrow as it should be, why the inheritance isn’t working like you expect it to, more and more.
I think that Firebug can answer existential questions, too, like why the sky is blue and what is outside the Universe.
#7: FireFTP
If you’re uploading using FTP, FireFTP is a great option. It’s an in-browser FTP client. It’s easy to use and full-featured. I don’t use FTP much anymore, but when I do this is my tool.
#8: MeasureIt
Sometimes you just need to know how wide a column is, how many pixels separate that image from that other one, or what the viewable area of a div is. And that’s where measure it comes in. You get a little measuring tape on your status bar, and you can click it to measure anything visible.
#No-more: ColorChecker
Color Checker isn’t compatible with the most recent Firefox versions, and Check My Colors doesn’t seem to be available anymore for any version. My toolbox is sadly bereft of anything that will show me what my design looks like for people with color vision impairments.
Thank goodness I keep a color-blind tester on hand!
######
Now that I’ve shown you my toolbox, tell me – what are your favorite Firefox plugins for web development and web design?
Today’s Glossary Term:
Data-driven design – there are a lot of connotations for this phrase, but at its most literal level, it means designing based on metrics and research, rather than on instinct or preference. A data-driven method involves research before the design is created, and strenuous research afterwards to measure every aspect and let science speak for efficiency and speed. You can’t always have a perfectly data-driven approach, but you should always try to let metrics inform your design where possible.
Today’s Interesting Link:
http://aviary.com/ – This site is hard to pin down. At its most simple, I’d call it a free, web-based image editor. It’s so much more than that, though. It’s collaborative, powerful and full of unlimited potential. However, it’s a bit like Google Wave in that new users feel overwhelmed by the sheer quantity of functionality. It’s in its infancy, as far as I’m concerned, but it’s also well worth the investment of time and energy to learn. It’s a powerful tool.
Today’s Usability Quote:
“Innovation is creation that comes from experimentation and study” – David Blakely, Director of Technology Strategy at IDEO
Today’s Music To Design To:
I think of VNV Nation as “baby goth” even though they’ve been around for 14 years now. Their sound is heavily influenced by the industrial stuff I listened to during my “rebel years” but with a positive tilt to it. Some of it is very atmospheric, lending very well to dramatic designs, artistic designs and enormous, daunting projects. My favorite of their albums is Empires – it’s easy to feel energetic and inspired while listening to it.
Buy the CD
or Download the MP3s
P6WDVN98WWED