sIFR version 3 is currently in beta, and it looks to be far more user-friendly than previous iterations. If you're unfamiliar with sIFR (Scalable Inman Flash Replacement), the quick description is that it's a way to use any font you like on your website through the use of Javascript, Flash and CSS. sIFR is not the future of text on the web given it has several large drawbacks. However, used carefully, it is a relatively painless way to bypass the limitations of typical web typography until a better solution is found a few years down the road.

Below is a portion of a page I've been working on using traditional plain text fonts.

Here is the same page with sIFR enabled, replacing the headers and image caption.

From my brief exposure to sIFR so far, I'm fairly impressed. Below I've listed some of the pros and cons that I've run into; this is hardly an exhaustive list and will likely be modified as I gain more experience with sIFR.

Pros:

Use any font you like. The biggest plus to sIFR is that it allows you to use any font you wish, beautifully anti-aliased, without needing it to be installed on the user machine. Want to render all your H2s in Wingdings? Well, now you can, whether you should or not.

Selectable Text. Text can be selected/copied, although the Flash text behaves a little less responsively than normal text (at least on my WinXP machine).

Code is unmodified. Except for adding a few new JS and CSS file calls to the header, sIFR requires no changes to your HTML or CSS.

Accessible. Since your HTML is unchanged, sIFR sacrifices neither accessibility nor search engine friendliness (unlike using images).

Degrades gracefully. Since neither the HTML nor CSS is changed, the site degrades gracefully into plain text alternatives when Flash or Javascript is unavailable.

Cons:

Complexity. While far easier to use than sIFR 2, it is still a somewhat tedious process to create the Flash files and get the proper spacing through trial and error for the flash alternatives. sIFR 3 requires the use of multiple JS, CSS and Flash files and (for the creation of Flash files), requires access to a Flash editor.

Increased page load. While rather streamlined, adding additional Javascript, CSS and Flash movies does somewhat increase the file size and processing demands needed to render pages.

Requires Flash and Javascript. Both Flash and Javascript must be enabled for sIFR to replace fonts, although, in their absence, pages will degrade gracefully to their normal HTML equivalents.

Not useful for large blocks of text. Due to processing demands (and possible issues of line-spacing and placement), sIFR is discouraged for use with large blocks of text.

sIFR is most useful for replacing headers and short, important bits of text. A better web typography solution will certainly present itself in the coming years, but for now sIFR serves its purpose well when carefully applied.

Resources

Main sIFR site
Examples of sIFR typography
Tutorial: This is how you get sIFR to work

Almost seven years after its release, it's rather amazing that developers still need to support IE6. According to w3schools, IE6 currently accounts for roughly 30% of web traffic, so support it we must -- at least for now.

The limitations of IE6 are well known, but one of the more irritating of its failures is the lack of support for PNG transparency. Of course, it does support GIF transparency... but GIFs don't support alpha transparency, only giving you completely transparent or completely opaque states for any given pixel. Hence those ugly halo effects around poorly created GIFs or when a transparent GIF is moved onto a different background color than it was originally matted for. PNGs give you alpha transparency, allowing smooth edges and variations in transparency, opening up far greater design options.

Fortunately there is a way to overcome most aspects of this limitation of IE6, allowing the use of PNGs. Better yet, it requires no changes to your HTML and involves adding only a single line to your CSS. The version I currently use was created by twinhelix.com and can be downloaded here. Alternately, there is also a jquery version that appears to work in much the same manner.

Below is an example from a site we recently worked on. The design called for a 3D bar graph to float on top of an auto-rotating slideshow. On the left, you can see what the bar graph image looks like in IE6 without the PNG fix. On the right is how it looks in modern browers... as well as how it looks in IE6 once the fix is in place. To see how the PNG interacts with the slideshow, please see the live site at www.usip.org/building/.

The fix does not create full PNG support, so it's not perfect. Most notably, transparent PNGs can be used as background images, but they cannot be tiled (i.e., repeat-x or repeat-y). In other cases you may need to specify a height or width other than 'auto' to get a particular image to display correctly. However, for the most part it works beautifully and allows the use of far more elegant design solutions in IE6 at very little cost.

Using basic CSS there are various ways to replace text with images, but most of these methods have drawbacks. These drawbacks become even more apparent when you are using image replacement in links (such as in navigation items). A primary reason for using image replacement is to aid in accessibility, but many of the common ways to replace text have accessibility issues. In an effort to choose one of these methods as our company's standard, I evaluated the most common image replacement techniques while creating a site's primary navigation. I thought it might be informative to show the process involved in choosing the option I believe to have the least serious drawbacks.

This may get a little complicated, so I'll first start with some simple examples of image replacement.

Replacement Method #1

Let's start with this code:

 <h1><span>About Us</span></h1>

When this header is rendered, what we'd like to see happen is the text 'About Us' disappear and be replaced with a nice image we've made. The easiest way to do this would be to apply a background image to the h1 tag and set the span tag to not display.

h1 {
    background-image: url(images/about_us.gif);
    width: 200px;
    height: 100px;
}

h1 span {
     display: none;
}

Unfortunately, setting display to 'none' causes most screen-readers to ignore the text, so nothing gets read at all. In addition, if the user turns off images in their browser but leaves CSS on (a common thing to do on slow connections or handheld devices), the header effectively ceases to exist.

Replacement Method #2

Using the same HTML, this rather serious drawback can be overcome by modifying the CSS a bit.

h1 {
    background-image: url(images/about_us.gif);
    width: 200px;
    height: 100px;
}

h1 span {
     display: block;
     overflow: hidden;     
     height: 0;     
}

Now the span is set to display block, but is effectively hidden from visual browsers by setting the height to '0' and making sure the overflow is hidden. The background image still shows clearly though and in screen-readers, the text will still be read. Unfortunately, the header still ceases to exist for all intents and purposes if images are disabled but CSS left enabled.

Replacement Method #3

Yet another method removes the need for the span scaffolding altogether, leaving our HTML happily simple and semantic.

 <h1>About Us</h1>

h1 {
     background-image: url(images/about_us.gif);
     width: 200px;
     height: 100px;
     text-indent: -9999px;
}

Here the background image is still applied to the h1 tag as before, but the text is cleverly removed from view in visual browsers by indenting the text negatively a ridiculous amount. In visual browsers the image display normally but the text is moved far off the screen (probably about 10 feet or so to your left), effectively hiding it. However, screen-readers will still read the text normally. Unfortunately this method, while simple and elegant, still suffers the same drawback as the previous method -- it renders the header tag useless if images are disabled while CSS is still being used. The negative text-indentation trick also has another drawback when links are being used, but I'll get to that later.

Replacement Method #4

The final method of image replacement suffers none of the drawbacks seen in these previous methods. Images display normally in visual browsers with the text hidden, screen-readers read the text normally and the header still renders if images are disabled (whether CSS is used or not). We start with this rather counter-intuitive HTML.

 <h1><span></span>About Us</h1>

We're back to using a span tag, but in this HTML, the text is actually outside of it. Our CSS gets a little trickier.

h1 {
     width: 200px;
     height: 100px;
     position: relative;
}

h1 span {
     background-image: url(images/about_us.gif);
     width: 200px;
     height: 100px;     
     position: absolute; 
     top: 0;
     left: 0;
}

What's going on here is the h1 and the span contained within are both being set to the same height and width. The relative and absolute positioning of the tags allows us to place (in layer terms) the span on top of the h1. Effectively, the text within the h1 is hidden behind the background image of the span. The text will be read normally by screen-readers and turning off images will simply reveal the text underneath. The only drawback to this option is that the width of the text underneath has to be equal to or less than the width of the image replacing it. Otherwise, parts of the text will hang out from underneath the image like feet sticking out from a blanket that's too short. However, in most cases this will not be a problem and in those cases where it is, the size of the text could be manipulated through CSS. If a user bumps their text size from within their browser too high, this will obviously start to become more worrisome -- but this seems to be the least offensive of the drawbacks from all of these methods.

Now lets see what happens when we start to use these techniques within a site's primary navigation where our images need to be anchors. Below is what we're trying to create should look like. Four navigation buttons with dark blue roll-over states.

To achieve this goal, we'll need to create four images. We could make eight (an on and off state for each of the four menu items), but rather than be forced to preload images let's just put the on and off state right into the same image. So here's what the image for the first nav item would look like.

But which replacement method to use? When originally building and testing this navigation, I rejected Method #1 straight-away since it offers no real accessibility benefits. So I started with Method #2. It worked fairly well, but I was unhappy with having to use span tags and the fact that the site becomes unusable if images are disabled (with CSS enabled). Further research led to me to Method #3, which seemed like a big winner. Clean HTML with no span tags and a nifty negative indentation trick -- what's not to love? Sure, it still has that problem with the navigation becoming unusable when images are disabled, but so did the first two methods.

I was content to leave the navigation like this until I started testing it in Firefox. Many browsers (like Firefox) outline links when you click on them or use other methods of link selection (like using Tab in keyboard navigation). What I expected was something that looked like this:

When tabbing over to or clicking on the 'Mission' button, it gets a subtle dashed outline. What I found though using Method #3 was something like this:

In most browsers, the highlighted outline stretched all the way from the nav button to the edge of the browser window (and, in theory, 9000 or so pixels more to the left). This really wasn't acceptable. The problem didn't show up in IE, but who really uses that anyway?

Further research led me to Method #4, which I started playing around with in an attempt to get it to work with anchors. Following the example from above, the HTML for the complete navigation would look something like what I have below. The text and span tags go within our primary tag (here, a list item). The anchors go around both the text and span.

 <div id="navigation">
      <ul>
           <li id="navMission"><a href="#"><span></span>Mission</a></li>
           <li id="navNews"><a href="#"><span></span>News</a></li>
           <li id="navDonors"><a href="#"><span></span>Donors</a></li>
           <li id="navStaff"><a href="#"><span></span>Staff</a></li>
      </ul>       
 </div>

The CSS gets a bit complicated, but I've included the important parts below (for the sake of brevity, I've only included the CSS for the first nav item).

#navigation ul li {
	float: left;
	display: block;
	height: 21px;
	position: relative;
}

#navigation a:link,
#navigation a:active,
#navigation a:visited,
#navigation a:hover {
	display: block;
	height: 21px;
	line-height: 21px;
	font-size: 9px;
}

#navigation span {
	position: absolute;
	top: 0;
	left: 0;
	height: 21px;
}

#navMission {
	width: 67px;
}

#navMission span {
	background: url(images/nav_mission.gif) no-repeat 0px 0px;
	width: 67px;
}

#navMission a:link,
#navMission a:active,
#navMission a:visited,
#navMission a:hover {
	width: 67px;
}

#navMission a:hover span,
#navMission a.selected:link span,
#navMission a.selected:visited span,
#navMission a.selected:active span,
#navMission a.selected:hover span {
	background: url(images/nav_mission.gif) no-repeat 0px -21px;
}

Like in our previous example, what's happening is the text and the span are being set to the same height and width, and the background-image of the span is being placed on top of the text, effectively hiding it from view like two stacked notecards. The anchor tag is being applied to both of them and a hover state repositions the background image of the span to show the dark blue "active" state when moused over. As long as the text underneath isn't too long or sized too large, in most cases this should work fine. Further, the links still work when you disable images whether CSS is enabled (as shown below) or not.

Currently this seems to be the most accessible way to do image replacement. At least until things like the CSS3 content property (which replaces the contents of an element with something else) are supported in the majority of browsers. Since this seems unlikely in the near future, we'll likely be relying on tricky work-arounds and clever hacks for quite some time.

Below you can see the fully functioning navigation. You can turn off images and CSS in your browser and see how it looks for yourself. If you so desire, a quick peek at the source code of this page should reveal all the HTML and CSS involved. If you see a problem with this method or know of a more elegant solution, please leave a comment.

If I take my copy of The Washington Post and put it down on the table while I go get a sandwich, when I return to finish reading it, the content on the front page has not changed. I am not able to resize the text of it to make it more legible. I can't shrink the paper it's printed on until it's the size of my cell phone or enlarge it until it's as wide as two large televisions. If all of that is true, then why do we continue to use a 500 year old technology like the newspaper as a metaphor for websites?

The very term 'email' tells you the metaphor it was based on, but we don't format our emails to fit within a certain envelope size and we don't leave space in them for a stamp. The metaphor is useful to a point in conveying purpose, but that's where it ends. Websites often use columns in layout, have banners and contain text, but at that point any comparison to the printed page should end. Websites are not e-newspapers. They are a dynamic and customizable by the end-user and we need to stop thinking about them in terms of the printed page.

One of the more prevalent hold-overs from print is the concept of "the fold." Our own wireframes contain a marker displaying the estimated 1024x768 scroll line. Regardless of what you call it, I'm not entirely sure the concept is useful and it may, in fact, be harmful.

At least occasionally, most people resize their browser window to allow for multi-tasking (whether it be making your chat buddy list, itunes or another browser window visible). 1024x768 is hardly the only resolution around, and even if it were -- that still doesn't mean people are surfing full screen. Or with the same browser, browser interface settings, text-size preferences, etc. So obviously, if you were forced to pick any one pixel to represent the scroll line, at best you would be lucky for this line to represent 10% of your users. Even using a large "fold" zone around the estimated 1024x768 scroll line would, at best, represent less than half of users. And this is to say nothing of the fact that wireframes are not to scale and only represent the layout of information -- not its design.

Assuming you are comfortable with the fold not being a distinct line but instead being a range of possible values, that still leaves the question open about whether the concept is useful to begin with. As Matt pointed out, users scroll. Research shows they scroll all over the place and that page height has little effect on how often users scroll to the very bottom of a page. Items placed well below the fold line are often used just as (if not more) frequently than items above the fold. Intuitively it seems likely that items that are immediately viewable will get more attention from users, but the research just doesn't support this. Research also shows that users are not bothered by (and in fact, may prefer) right-side navigation... but we still rarely see it used. Pre-conceptions take a while to dissipate.

I said the fold may be a harmful concept. In theory it is somewhat useful in that branding and navigation should certainly be immediately evident when entering a page. In practice, however, its often used as a concrete dividing line between important content and useless content. Clients will try cramming as much content as possible above that imaginary line. Department A may feel slighted if Department B gets their content above the line but they don't. It seems to me this would detract from far more useful discussions about the structuring of information and design. Shouldn't we be leaning towards more white-space and more separation between elements, not boxing ourselves into a tiny box only 700px high?

Feel free to leave comments here or on Matt's post. Even within our own team we don't completely agree, so we're more than open to new perspectives on this issue.

See the following for more information:
ClickTale: Unfolding the Fold (research on scrolling)
w3schools browsers stats (resolution stats)
Web Page Layout: A Comparison Between Left- and Right-justified Site Navigation Menus

So -- you want to run multiple versions of Internet Explorer side-by-side for testing purposes. No problem, it's simple! Oh, wait -- no. It's that other thing. Complicated.

Luckily some other people have done most of the hard work for you, so it's really not that bad. As far as I can tell, you basically have two choices. The first, and the one recommended by Microsoft, is to use Virtual PC and simply run another version of windows through it with IE6 installed. Microsoft has been kind enough to provide a free version of VPC and an image file with IE6 already setup, which you can find here. The version of VPC they provide seems to be time-limited, but they claim they'll continue to provide free versions after the expiration date (seems rather pointless, but who am I to question Microsoft?) I haven't used this method personally, but it seems to be the only way to get IE6 and IE7 running absolutely perfectly on the same machine.

The other way is to use a nifty little program that will allow you to install bare-bones versions of IE. You can find this program and it's description here. After getting IE7 running on my machine I used this program to install IE6 and, for the most part, it seems to work very well. The print preview and a few other functions don't seem to work properly and it's not 100% certain that the way this version draws pages is exactly how a proper install of IE6 would, but I have yet to run into any major issues. This should be more than adequate for most testing needs and doesn't appear to interfere with the functioning of IE7 at all. It'll even let you install multiple older versions of IE, so if you're feeling particularly masochistic you could test your site in Explorer 3.0 as well as IE6. Unfortunately, this program doesn't seem to work under Vista (although they seem to be working on it), so Vista users should stick to the recommended VPC option for the time being.

Please leave a comment if you know of other ways to accomplish multiple IE installations or run into issues with either of these options. Thanks!

Usability is primarily aimed at making things easier for the end-user. This isn't always the case, however. There are tasks, events or functions that you may actually wish to make more cumbersome or difficult.

Deleting email from a Gmail account is very difficult; the commands are buried in menus involving many steps. While we may feel that deleting irrelevant email is something we actively want to do, we might conclude it is less usable than it should be. So why have built-in difficulty and obstruction to usability? Because Google uses your body of email to mine for information it uses to target the ads it delivers to generate revenue; indeed, deleting it would be detrimental to the service. By taking a wider perspective, Google is asking us to question our assumptions about the way we deal with email.

The above is from an article called "Slanty Design" from the January issue of Communications of the ACM. The full text can be found here in either PDF or HTML.

Following up on Nam-Ho's follow-up on my Second Life post... Reuter's secondlife newsfeed can be found at secondlife.reuters.com. also, at least one thing Nam-ho mentions already already exists. The Second Life Library officially opened this week.

Second Life Library Blog
article on TheShiftedLibrarian
coverage on Stephen's Lighthouse

as for the currency exchange and economics of SL... economist Edward Castronova gave an interview to BusinessWeek on such topics. Also, SL Business is the premiere magazine covering all aspects of business and marketing within SL.

more in-line with the NPO side of things, the United Nations Millennium Campaign recently organized the Stand Up Against Poverty challenge. With the help of perhaps SL's most famous content and fashion designer, Aimee Weber (designer of The New Globe Theater, the NOAA museum, and organizer of The Second Life Relay for Life), Second Life residents were also able to participate and counted towards the guinness world record.

oh... and on the open-source CMS front... the 4th Annual Plone Conference will take place this month in Seattle... and in Second Life.

For once I will not be ranting about Microsoft. Today it's about Adobe.

Let me start by stating a simple fact. It should be easier to install software you pay $350 for than to pirate it. It takes less than an hour to search for, download and install a pirated version of any Adobe software packing. Installation of a version you've paid for should be even simpler. The fact that it has taken me almost 5 hours to install the latest version of Adobe Creative Suite CS2 is an insult. I feel the same anger anytime i put in a DVD i just paid $20 for and which then forces me to watch over two minutes of FBI warnings and anti-piracy commercials (you know the ones... they're done in Mtv style grunge graphics and start with "You wouldn't steal a car, would you?") before i can get to the DVD menu. It's rather ironic that the first thing people do when they pirate DVDs is rip out those bits and make ALL opening garbage like that skippable.

Anyway... Friday I received two new software upgrades... Adobe Creative Suite CS2 and Macromedia Studio 8. Here are my experiences with installing each.

Adobe Creative Suite CS2

I currently have CS1 installed, and the new version is an upgrade version. It should easily detect that I have CS installed and install CS2 over it.

Attempt 1: Begin installation. Enter my serial number. Software informs me that I do not have CS or Photoshop installed. In the background I boot up Photoshop... the installation program still informs me that I do not have Photoshop installed, even though I'm currently using it.

Attempt 2: I point the installation program to c:\program files\adobe\photoshop cs... it still refuses to acknowledge that such a program exists.

Attempt 3: The program asks me for my original disks for Photoshop and to insert said disk into my CD drive. I slide the Photoshop disk from Adobe Creative Suite CS into my drive. It informs me that it cannot find such a disk.

Attempts 4-8: I go through all of our CDs... I try Photoshop 7.0, another copy of Photoshop 7.0, Photoshop 6.0, Photoshop 5.5 and, just for laughs, Microsoft Office. It refuses to acknowledge that any of these disks are, in fact, Photoshop. Frustrated, I leave for the day.

Attempt 9 (tuesday): I try steps 1-3 again, to no avail. It then tells me to call customer support and points me towards a website where I can find the phone number. I go to this website and call the number. The number is disconnected. It tells me to call a different number.

Attempt 10: I call the new number. I receive a recorded message... "Due to the popularity of the recently released Adobe Acrobat 8.0, we are experiencing unusually high call volume. Please call again later."

Attempt 11: Frustrated, I begin searching the web for answers. I discover the following... the CS2 installer refuses to verify CDs put into a DVD/CD drive. This fact would be useful if I had ANYTHING other than a DVD/CD drive. This installer was written this year... there is no reason why it should see a DVD drive as some new-fangled high tech device.

Attempt 12: I download a Virtual CD Emulator and make a virtual drive containing Photoshop 7.0. The installer still refuses to acknowledge that Photoshop 7.0 is, in fact, Photoshop 7.0.

Attempt 13: I try the phone number again. I finally get through. The nice lady takes my name, phone #, serial numbers, etc. She tells me that what I have is a Photoshop to Creative Suite2 upgrade, not a Creative Suite to Creative Suite2 upgrade. I tell her that I have a giant pile of Photoshop and Creative Suite disks sitting next to me, so I should have all my bases covered. She tells me all I need is an unlocking number and she will transfer me to lady #2 who will give it to me.

Attempt 14: Lady #2 answers and wants my name, phone #, and serial numbers. I tell her I've already done all that... she wants it again. She then tries to tell me that what I need is a Photoshop 8.0 serial number, not a Photoshop CS serial number. I inform her that CS and 8.0 are the same thing. She disagrees. After poking around on her computer for a while, she concedes the point (remember... this is an Adobe employee I'm talking to). I end up starting from scratch with lady #2, and eventually end up at the same point. Just as she's about to give me the unlocking code... CS2 starts installing. I'm not entirely sure why. My best guess is that after just sitting at the install screen for 30 minutes it either a) finally got around to checking the virtual drive or b) decided it had grown tired of mocking me.

Attempt 15: The program installed fine. great! now all i have to do is update it with all the latest patches. The updating software starts... and then informs me that it needs to reboot. I reboot. The first thing to come on the screen is the message "Adobe Updater needs to reboot your machine." I reboot. "Abobe Updater needs to reboot your machine." I power down and then restart. The same message appears.

Attempt 16: After googling for a while, I find a mention of this error. It tells me to delete some obscure XML file in my application data directory. I do this. It asks me to reboot. I do. When it comes up, I no longer see the 'reboot' message. I start the updater. It downloads 70 megs of updates. Then crashes.

Attempt 17: I reboot. I run it again. It downloads the same 70 megs again and beings installing them. After an hour, it's done.

Attempts 1-17: Total time -- 4.5 hours.

Macromedia Studio 8

Attempt 1: All programs install fine. All programs run fine. It never even asks me for a serial number. Total time -- 15 minutes.

So, in a perfect world, Adobe would learn something from their newly acquired business partner and stop punishing their customers... but in all likelyhood what will happen is that Adobe/Macromedia Studio Upgrade 9 will take 9 hours to install or, just to save time, the disk will just explode when you put it in your drive. I can't wait.

Normally I wouldn't bring my hobbies into the UxD blog, but I believe this may be an exception. For a few months I've been involved in something called Second Life. It's most easily described as a video game, but that is actually fairly misleading. The current popular term is 'metaverse,' which is a bit more accurate. I'm beginning to think that what Second Life is, is the future of the web.

This article in "The Economist" gives a decent overview. They mention the phrase "Web 2.0"... so I'm not the only one thinking of this technology's future impact. (For those of you more interested in business than technology, it might interest you that Second Life has its own thriving economy and currency exchange, which fluctuates daily.)

It's a surreal experience to be within Second Life and to take a class from a virtual representation of a teacher and to be surrounded by other virtual students (the class I took was on 3-d modeling)... or to go to a virtual music concert where you can hear the performer playing live and talking to the crowd while seeing their in-game avatar sitting on a stage strumming a guitar.

I believe that within a few years, everyone will have a Second Life account (or something similar), much in the way that myspace has caught on today. I see many aspects of what websites do currently being relocated into a 3-dimensional space. Why look at pictures of the resort you're planning on spending your vacation at when you could walk around a 3-dimensional replica of it? Why browse an artist's online photo album when you could walk around a virtual version of their art studio or exhibit? Why video conference or flying hundreds of miles when you could just meet in a virtual board room? Things like this are already going on. Harvard Law teaches a portion of one of its classes within Second Life. Suzanne Vega and Duran Duran give live concerts there. Hotel chains are giving tours of their newest buildings. Mark Warner and Kurt Vonnegot both gave interviews there.

Anyway... click on the pictures to get larger versions if you like or browse around secondlife.com, and definitely check out the Economist article for more information and commentary.

articles

• vertical centering via css
• tips from a seasoned css designer
• and just for fun... atari 2600 keychains

podcasts

• boagworld advice on managing and building websites
• practical web design

designing for IE -- you're probably doing it backwards
summary? design for firefox first.

the difference between outlines and borders
details on the outlines property in CSS

where am i?
the importance of navigation

ClearType now a browser-specific feature in IE7
why isnt' ClearType active by default on XP?

ClearType tuner
for turning on and adjusting ClearType on your XP machine

rev2.org
intellectual activity on web 2.0 (blog)

colorzilla
a firefox extension i left out of the ealier post... gives you an eyedropper and other tools to gather color information. incredibly useful.

also, i really like this site because of the girls it is an excellent example of what AJAX can do.