Better headers

When it comes to the design of your web site, the site header is a fundamental section for consideration, as it will no doubt appear on all pages and set the tone and style throughout. A poorly planned or shoddily designed header will put off your visitors before they even see your content. However, it is more than just horizontal container for your company logo, and if you use an image on its own then you’re losing out.

Screen readers and search engines don’t tend to be clever enough to interpret images, so at best they are ignored. To convey that information textually you need to include some extra detail, even if it’s not shown normally. This is the case for all images, incidentally, and it’s a very good idea to include ALT tags for all your images, and only use CSS backgrounds for background textures, not actual content.

Below is how we might initially approach the header of the web site, using a DIV with an image inside it.

  1. #header { text-align: center; border: 1px solid #606060; padding: 4px; }
  2. ...
  3. <div id="header"><img src="logo.png" alt="Site title goes here" /></div>

That puts our site logo in the header, complete with alternative text just in case, and with a little styling centres the logo image and puts a little border around it to mark it out. This works.

The problem comes when we start to think about the site conceptually. When looking at the code, what is it about that line that marks it out as the site header? The id=”header” bit? Actually there is very little that tells us that this is the name of the site, and in cases where the images are removed for whatever reason (screen reader, viewing on a mobile device) you are at best left with some small text saying what the image was supposed to have been. Not clear enough.

A better approach is to use the H1 tag as a dedicated site heading object, and style it appropriately to create the desired visual effect. H1 is a block-level object, which means that it automatically fills all the available horizontal space in the same way a DIV does. By default H1 has various padding and margin values set up, and these vary between browsers, so it’s best to turn these off completely for consistency, or at least set your own.

To get the image in the header, I’m actually going to recommend the opposite of what I said before about not using backgrounds for important content. By setting the site logo as a CSS background we not only make it harder for people to steal our logo and use it for their own ends, but also make page loading faster - CSS is cached in the browser, so instead of having to load the image each time it’s stored locally and HTML is slimmed down slightly.

To address the problem of not having any alternative text that might otherwise appear in an inline IMG object, we make use of a SPAN. Within the H1 object, add a span and put the text of your logo in there. If for any reason we don’t want to use the image, we can still have access to that text, which will be clearly marked out as the site title. It’ll be picked up by search engines too, which is useful. To hide it for normal use, just add an extra line of CSS telling it to display: none;.

  1. #header { background: url(logo.png) center center no-repeat; height: 120px; }
  2. #header span { display: none; }
  3. ...
  4. <h1 id="header"><span>Site title goes here</span></h1>

Mobile devices will generally ignore CSS backgrounds, but will also thankfully ignore the fact that we have hidden the SPAN content, and will correctly render the text as the header. That ensures that no matter what happens, your site always has a clearly identifiable header.

Matthew