Tuesday, June 7, 2011

Free Advice

Here's some free advice to website designers:

If you're going to define the color of your website's background, define the default text color, as well.

Now, free advice is often worth what you pay for it, but in this case, I'll offer an example why I say this, and how to fix it. Here's how a page at Firedoglake looks on my computer screen at the moment:

Image credit: Screenshot of FireDogLake page by Cujo359

See how the text of my comment is washed out? That's because I'm using a reversed desktop color theme for on my computer. People who have a bright screen with limited contrast sometimes like to do this. Unfortunately, it makes the default text color a very light gray or white. Not good if someone defines the background color on a website to be white, but doesn't bother to define the default text color. This is just bad programming technique, as far as I'm concerned. What this practice does is define the background color at the website, but leave the choice of text color up to the visitor's web browser.

To fix this, I downloaded that FDL page, and changed Cascaded Style Sheet style_003.css from this:
Firedoglake Ajax Commenting Theme
*/ /* Tags */
body {
        font: normal 13px Arial;
        background: #F2F1EC;
}
To this:
Firedoglake Ajax Commenting Theme
*/ /* Tags */
body {
        font: normal 13px Arial;
        background: #F2F1EC;
        color: black;
}
With the result that the page now looks like this:

(And no, the blue lines didn't disappear because of the change I made. That's to do with the difference between the downloaded page and the one loaded from the website.)

Just to short-circuit some return free advice:
  • Yes, I know I can tell my browser to use its own colors, rather than the website's. This is almost invariably a bad idea.
  • Yes, I know that I can tell my browser to use a different default text color (like black), instead of the desktop theme's. Firefox doesn't do this properly, though.

I like the look of a reverse desktop color theme, and I wish I could use it as the default in my web browser. Plus, as I said, not defining one thing while defining the other is bad practice. Letting one bit of software determine one part of the look of one's website, and another, completely different bit of software determine the rest, is also an invariably bad idea.


No comments: