Daily Twaddle

I decided to go with a transparent gif at the top of each page. I do this on all my sites anyway so I can make the logo a link to the home page. So, I just gave some style to the alt text that appears when the images are turned off.

The HTML looks like this:

<div id="headbox" >
  <a href="index.html"><img src="images/transparent.gif"
  alt="Company Name" /></a>
<h1>Company Name</h1>
</div>

And here is the CSS:

#headbox img
{border: none;
/*make the transparent gif the same size as the company logo */
width: 800px;
height: 100px;
/*make sure the alt text font can be seen on the background */
color: #f7f7f0;
/*make it look like a header*/
font: bold 24pt "Times New Roman", Times, serif;}
#headbox h1
/*hides the real header for CSS completely off*/
{display: none;}


The Pros:

1. It’s easy to make a transparent gif.
2. No hacks or extra markup for certain browsers.
3. Minimal coding.
4. Great flexibility when changing the overall look of the site.

The Cons:

1. The H1 is invisible to search engines.
2. I’m surprised that I can’t think of any more cons. I must be tired.

The result is pretty cool. Here is images off:

Here is images on:

Images make a dramatic difference in the overall feel of the website. And I suppose it could go either way (good or bad). I’m going to start using more images (and preparing for images off with my solution). I don’t know if anyone else has tried this, but I’m going to give it a snappy name. Like “the covert gif.” I never tried the Campaign Monitor’s solution. I’m sorry Matt.

I’m sorry Carol, I can’t help it. I love this shit.

I have a couple of websites that use a graphic header instead of a plain text header. It’s pretty that way. And if a person is browsing with CSS turned off all-together, the site still functions beautifully.

But, what if someone just turns off the images and leaves the CSS on? I used to surf this way all the time. My stupid slow dial-up internet was killing me. With the images turned off, I could surf twice as fast. I lose critical information surfing this way. Which is a bummer if designers design without me in mind.

But I have planned for this disaster. Most of the images on my site are worthless (just decoration). But if they have a purpose, I’ve included a descriptive “alt” tag which replaces the image with text.

Now, on to my headers. Eeek. Background images are in the background. How can I get them to cover-up the plain text header? Apparently, I’m not the only one trying to figure out this problem. Here are a few sites with solutions:

1. Site Point: CSS On/Images Off
2. Site Point: Accessible Header Images
3. Campaign Monitor: A CSS Solution to Image Blocking
4. The Watchmaker Project:Images off/CSS on Image Replacement

I ended up using Site Point’s Accessible Header Images because it didn’t require a lot of extra markup. In the example images above, one of the sites has images and the other has plain text. They both function well, just one looks better.

I didn’t like this solution very much though. It works really nice in good browsers (Carol), but it sucks it up in IE. I hate using hacks. I think I’m going to try The Campaign Monitor’s solution.

Did you know that most website’s logos are a link to their homepage?

The logo is usually in the upper-left corner of the website.

If you hover your mouse-pointer over the logo, you’ll notice it is a link.

This blog’s logo-home-link is the title: “Jenn’s Daily Twaddle”