As usual, let’s take a look back at last month’s offenders. For each of these sites, I sent detailed information on the problem and how to fix it:

• Visa: unfixed and still problematic when using a different background color.
• TMZ.com: fixed, and quite quickly: within a day of my mention of it.
• ITtoolbox: unfixed.

So, one for three last month. Not bad, I guess. I did not get any email back from any of the sites.

Now onto this month’s problem sites. As usual, I’ll send email (if I can find suitable contact information) to each site and we’ll see how long it takes for them to fix the problem (if they fix it at all). This week, all the backgrounds are a soothing blue, the current default background of my browsers.

Apani

Apani is a network security company (I came across them while looking for VPN solutions for Mac OS X). As is typical with the problem sites, the fix is just to add a "background-color: #fff;" to the stylesheet body selector. Time to fix: the usual couple of minutes.

Screenshot of Apani.com

Kana

Kana provides various customer relation services, like a natural language search engine, call center integration, etc. I guess testing their Web site design isn’t one of their "core competencies."

Screenshot of Kana.com

Project D.U.

What’s with these gossip/news web sites with weird names that can’t manage to get their background colors right? Project D.U. boasts that their "network of 30 bloggers are viewed as the best in the biz." What they really need, though, is to test their site with browsers that aren’t using the defaults. (Note: Project D.U. is “Presented by AT&T.” AT&T is also my employer.)

Update: As noted in the comments, Project D.U. has corrected the problem! Yay! They win this month’s "Quickest Fix" award.

Norelco’s Shave Everywhere

A special bonus problem site: Norelco’s very amusing Shave Everywhere site. I’m sure that they spent a lot of money to create the site. Apparently, though, they could not afford to put a background color on their page.

Screenshot of ShaveEverywhere.com

Others In the Series

• Define Your Background Color, May
• Define Your Background Color, March
• Define Your Background Color, Double Dammit!
• Define Your Background Color, Dammit!
• Sites That Need White Backgrounds, Redux
• Sites That Need White Backgrounds

Define Your Background Color Flickr set

Technorati Tags: web standards, background colors, css, web design

And, for newcomers, here’s the deal: when using CSS to control your site’s design, it’s important to realize that not everyone keeps the browser defaults. So, for example, if you forget to define a background color in your CSS, the browser will display the default color. If you haven’t changed your default, you’ll be fine, since these designers assume you have a white background. However, if you are like me (and many others), you may have changed that default to something not white. And that’s where the problems begin.

A recap of last month’s fun: pretty bad, still. Of the new sites mentioned, only one corrected the problem (which he found independently). But GD USA, Quark, Ask.com, and the others are still sporting the default.

May’s Offenders

Visa

First up, Visa. I’m using a dark grey background this month, and you can see the havoc it plays on the navigation on the site. Actually, you can’t see the havoc, since my lovely grey background is the same color as the navigation.

• Price of Ad Agency Design and Coding? $10,000
• Price of Quality Assurance Testing? $2000
• Price of Adding a “background-color: #fff” to the CSS? $0
• Eliminating a Big Accessibility and Usability Problem? Priceless

I’ve sent email to them, let’s see what they do.

TMZ.com

Next contestant: The TMZ.com site, which is some sort of AOL news/gossip/entertainment site. I don’t even know what “TMZ” stands for. And here’s what I see. Again, this was another 5 second fix (I type slowly). It amazes me that such high profile sites look like this. I’ve sent email to them, as well.

Update: Looks like they fixed the problem! That was quick! I still don’t know what ‘TMZ” stands for, though.

The ITtoolbox Sites

I always love the tutorial sites that attempt to teach you something, but fail to do the bare minimum testing of looking at their site in something other than a plain-jane configured browser. Such is the entire ITtoolbox set of sites, including, amusingly, their Web Design section. Here’s their page on Web Design/Layout issues and here’s my view of it.

Others In the Series

• Define Your Background Color, March
• Define Your Background Color, Double Dammit!
• Define Your Background Color, Dammit!
• Sites That Need White Backgrounds, Redux
• Sites That Need White Backgrounds

Define Your Background Color Flickr set

Technorati Tags: web standards, background colors, css, web design, visa, aol

Update: All back to normal now.

Technorati Tags: CSS Naked Day, CSS, web standards

Of the three Refresh sites (Refresh Dallas, Refresh DC and Refresh Phoenix) , two of them finally did define background colors for their pages. Refresh Dallas, however, seems content to not fix the problem.

Wow, the two Coke pages I notice before have been fixed. That’s a big surprise, since pages like that normally never get looked at again. Nevertheless, they now have backgrounds defined: Coca-Cola’s Make Every Drop Count and the HTML page noted before. Makes me want to try and choke down a Diet Black Cherry Vanilla Coke (truly one of the worst tasting drinks ever).

Google, though, is still the same. Their Analytics sign-in page, AdSense Tour, and Email Switch page are still as flawed as before.

Now, for some new contestants. First up, Graphic Design USA. Somehow, I think it is worse when sites that attempt to educate about graphic design or web technologies can’t manage to get their own pages right. Here’s what I see when I visit the GD USA site. Estimated time to fix? A few minutes if you type slowly.

Next on the hit parade: Ask.com. Hey, Ask.com, why does your CSS not define a background color? It was better when Jeeves was around. My view of the Ask.com page. Note that the greyish text below the form field is unreadable with my color settings. That’s because they assumed I’d be using a white background. Yet another two-minute fix.

Another company that should know better? Quark. They just spent a bunch of money getting a new logo, then spent more getting another new logo. I guess they didn’t have enough money to spend defining their pages’ background-color. How Quark’s home page looks to me. Their problem? Well, way too much CSS, for one thing. Buried in their code is this:

#pagebackground	{
  margin:0;
  padding:0;
  color:inherit;
  background:transparent;
}

Eliminate the “background: transparent” and the problem is fixed. Took me about 5 minutes to find and eliminate the problem.

SketchUp definitely needs a background color defined.

Finally, sort of an amusing one. Just Keep the Change is a self-proclaimed “Web Design Weblog.” Recently, the author did a post on The All Time Top 5 Designs. One thing that all five of the designs do that Keep the Change doesn’t do? That’s right. They all define their background colors.

That’s it for this time. Let’s see if any of this week’s batch correct their mistakes.

Update: Three days after I linked to Keep the Change, looks like the author fixed the problem. While he mentions that he independently discovered the problem, which is indeed possible, I think the timing makes it likely that my critique had something to do with it.

Update 2: Refresh Dallas has updated their pages, yay! In the comments, Jeff Adams suggest that I shoot some email to folks who I put on the hitlist, and I think that’s a good idea. After all, for sites like Keep The Change and the Refresh Dallas sites, there are people who can pretty easily correct the problems. I’ll definitely keep that in mind for next month’s version!

Define Your Background Color Flickr set

Others In the Series

• Define Your Background Color, Double Dammit!
• Define Your Background Color, Dammit!
• Sites That Need White Backgrounds, Redux
• Sites That Need White Backgrounds

Technorati Tags: web standards, background colors, css, web design, quark, ask.com

Nothing is better than getting like minded individuals together to discuss topics of web design. It’s a great idea and I fully support it. However, if you are going to link to seven sites about creative Web design groups and three of the seven sites (Refresh Dallas, Refresh DC and Refresh Phoenix) manage to not define a background color on their pages, it kind of makes you think. I’m not doing this to be mean: designers and coders need to understand the usability and accessibility issues when they forget to test. Always test with a variety of Web settings, not just the plain vanilla default. Here are the screenshots on a browser with the browser’s background color changed (and thanks to Dan again for a great suggestion: set your browser’s default background color to something really weird and the problems are even more apparent):

• Refresh Dallas Screenshot
• Refresh DC Screenshot
• Refresh Phoenix Screenshot

Update, February 11, 2006: Looks like Refresh Phoenix has corrected their page. Yay!

Update, February 13, 2006: And now Refresh DC has corrected their page. That leaves just one!

Large companies aren’t any better, despite the millions of dollars they spend on their advertising. Would Coca-Cola put a television ad on the air if it had lousy lighting? Probably not. Yet they have no problem putting up a Flash piece with transparency enabled: Coca-Cola’s Make Every Drop Count. Here’s what I see: Coke Screenshot. The HTML page following it isn’t any better. And what I see. (Another big thanks to Dan for showing me this one!)

A recent link on Digg.com about Google finally getting a graphic designer is amusing to me. It does seem like Google has new folks involved on their sites. And they need to define their background colors, too. Here’s Google Analytics (you may need to log out to see the problem) and here it is in spectacular "Define Your Background Color-Vision." Same people probably did their Adsense Tour. The link in the Digg article also has the same problem: Google Mail Switch Page.

Define Your Background Color Flickr set

Others In the Series

• Define Your Background Color, Dammit!
• Sites That Need White Backgrounds, Redux
• Sites That Need White Backgrounds

Technorati Tags: web design, background color, css

First up is a company that wants to carry all your important voice traffic. It’s Vonage! See the screenshot on why they need to define their background color. The problem is consistent across the site, too.

Next up: 10 x 10, a site that displays photographs gleaned from news reports. Some of the pages are fine, others, like the home page and the photo page both need to define a background color. See the screenshot.

Never one to play favorites, many of the sites of my current employer (the new AT&T, a Voltron-like combination of SBC and the old AT&T, but without the cool sword) have the background color problem. One of my favorites is Project D.U. (see the screenshot). You’d think with the "headlines from 30 blogs, commentary from 9 editors and 1,000s of links" that someone would have noticed the problem.

Taking a look at my last list of offenders, I see that SBC (the new AT&T) has fixed their problem (after we pointed it out to them). The other sites, though, still suffer the same problem. Office Depot still being pretty bad.

The quick and easy fix? Add background-color: #fff; to the CSS for the body tag. Should take all of three minutes.

Technorati Tags: background color, css

The audience seemed about evenly split between those on the coding side and those on the design side (though I’m sure there were many wearing multiple hats). There were a few evil content writers/managers types mixed in, too. All in all, there were a little over one hundred of us, packed into a room that probably should have been a little bigger.

First, the good: the pacing seemed mostly fine. All the speakers were knowledgeable and funny. Normally at these types of affairs, I find myself either drifting off to sleep, or doodling/working. Not here: I felt engaged at all times. I also liked the interplay between the speakers and the attempt to show the process from design to final CSS tweaking. And I found Eric to be quite similar in attitude to myself and other code-monkeys. I really liked Eric’s presentation on the totally em-based design, while at the same time wonder if attempting to correct browser failures with CSS and JavaScript are very productive.

However, I also felt that the conference could have been much more useful if there were separate “tracks,” one for the more code oriented folk and another for the design people. It felt weird to have Eric idle when Jeffrey was talking and vice-versa. It would have been really great to have that time to ambush Eric with some difficult CSS issues, for example. Or to pin down Jeffrey on some accessibility questions while Eric talked about CSS. Having two tracks would allow both Eric and Jeffrey to be fully utilized.

I’m also glad I didn’t bring my laptop, since the Wi-Fi access was spotty at best (I was just looking over at Joe’s screen, anyhow). Folks were uploading pictures to Flickr when the connection worked. Parts of me show up here and there, despite my best intentions to remain unphotographed.

I think there were probably many of us who wanted to go into a lot more depth on CSS issues (just as I’m sure some of the more design-oriented types might have wanted more of Jason’s design thoughts). So I think there was a missed opportunity in there. And there was nearly nothing said about semantic XHTML: I’d have liked an hour or so on that topic.

Then there were the “freebies.” I always like freebies. :) Each attendee got a T-Shirt and a random book from New Riders. It would have been nice to be able to choose the book you received, but folks were trading (wouldn’t have helped me much, since I think I probably own them all already). And I won a year of free hosting (just have to figure out what to do with it).

Overall, though, I was quite pleased.

Technorati Tags: css, An Event Apart

Let’s take a look at some other offenders. To find sites with this problem, simply adjust the default background color for windows to be something other than the default. I use a nice soothing gray.

• SBC: The home page gets it wrong, but the subpages seem okay. Note how the links near the bottom of the page are pretty unreadable without a white background.
• Brighthand: all the pages appear bereft of a background color.
• Pontiac: On the home page: seems like it might be on purpose. It is hard to tell. However, on the subpages, the backgrounds are white.
• Scarborough Country: Even idiot conservative pundits can’t get it right. Not really surprising.
• XML.org: Sometimes, even geeks can’t help. On a different note, I’d sorta expect XML.org to at least use XHTML for their site.
• Office Depot: Even with the 13 background colors they define in their CSS, you’d think one would be applied to the body. You’d be wrong.
• Google Analytics: Even the mighty Google isn’t immune.

Technorati Tags: background color, css