Set Up An Agile Design Environment

Let me start by saying this is not a tutorial on tweaking your Dreamweaver preferences, or setting up an optimal workspace in Photoshop. Nope, in this case I’m talking about your browser. I’ve put together a list of things I find most useful in developing websites once I’ve moved out of the Photoshop stage, and apart from my HTML editor. What works for me may not work equally well for you, but maybe it’ll give you some ideas on how to customize your own design environment.

First and foremost, get Firefox or Flock. Nothing else will do. It’s important to test in other browsers (particularly IE) to ensure your site is being rendered properly, but I wouldn’t recommend using any other browser for development.

Next, you’re going to need some add-ons. To my knowledge, these all work in both Firefox and Flock (though you’ll have to download them separately for each browser):

1. Web Developer Extension by Chris Pederick. This is critical. It’s by far the most comprehensive and USEFUL tool available to anyone who buids or even maintains a website. Some utilities include a ruler, line guides, magnifyer, view/edit css, outline elements, outline current element, display class and id names, validate css/html/links, display alt attributes, small screen rendering, and resize window. There are many more. I can’t believe this extension is free. It rocks.
2. View Source Chart - quickly find any segment of code you need to work on by viewing it in a color coded, nested chart. Lovely, lovely.
3. IE Tab - a superb testing tool which basically lets you view any changes made as IE would display them, while remaining in Firefox.
4. MeasureIt - effectively measure anything on a page (images, blocks of text, whatever) with this oh so handy little tool stationed inconspicuously in the bottom left corner of your status bar.
5. Colorzila - another tool which sits in your status bar, letting you sample colors right from within a page, pick colors from a wheel, save colors to favorites, and create complex color schemes. Yeah, cool.

Once you have everything installed, consider adding some bookmarklets. Similar to bookmarks, but rather than sweep you off to a website, they’re tiny bits of javacript written to perform a function of some kind. Below are some I’ve collected and use often. Just to be clear, I did not create any of these, and I’m not sure where they all came from. I just know I’ve seen many of them passed around the net a lot. To snag any for yourself, drag the link to your bookmarks toolbar.

Quick Utilities

• Hex to RGB
• RGB to Hex

Designing/Tweaking

• Show div outlines - render the page with a dashed outline of every div in use on a page
• Show/hide grid - display a grid overlay on your page for exact alignment of elements (I first heard about this from Andy Budd)
  
• Topographic view - see your page in a shaded “topographic” style layout

Diagnostics

• Speed analyzer - run your site through a speed check and get recommendations on how to improve it
• Accessibility analyzer - check web pages for accessibility and privacy issues
• Color deficit analyzer - check your site for conflicts from a color-vision deficit standpoint

There are scads more you can look through, ranging in purpose from debugging to search tracking. These are just a few I use specifically for design/dev.

A last suggestion, take some time to organize all your favorite resources in a manner which makes sense to you and allows for convenient access. For example, I have tutorial sites, inspiration sites, online utilities, etc., separated into folders of the same names, all residing in a “root” folder called… you guessed it… DESIGN. It’s a great way to keep your most visited resources right at your fingertips.

Tags: add-ons | firefox | tools