Logotype Image & Replacement
27

Logotype Image & Replacement

Kommentarer inaktiverade för Logotype Image & Replacement

As a web designer or developer, you probably want to incorporate a logotype into your web site at some point. So you put you put a nice, blue logo in the header on a dark background. Then suddenly your client’s client prints it and gets an ugly negative square on top. Or perhaps just uses their mobile phone to browse and get’s the same unwanted effect. This article is about placing the visual logotype into the document in it’s original form as a raw, default representative. It’s also about what role the logotype plays semantically in the document; is it a part of the design or content? Finally, I’ll tell you why using <h1> for logotype rendering is a really really bad idea.

Why on earth would you want to replace an image with an image?

One of the most obvious cases lies in the logotype. The logo is often (and preferably) represented by an <img> tag in the HTML document. This leaves us with one question: do we want the same logotype to be represented in all layouts and media? Sometimes that’s ok. But most times, we would prefer to have different logotypes for different layouts. Perhaps you present a negative layout for users with impaired vision, or a print layout where you want a straight-forward black & white logo.

In this article, I made up a possible scenario for every web designer who deals with a negative screen layout, or maybe just a negative header.

In this scenario we want:

  1. a black positive logo on a white background in the default views – print, handheld, and screen without CSS
  2. to replace the black logotype with a light blue in the negative screen layout
  3. the logo to be present and look good with or without CSS activated
  4. an alternate text to be visible if no image is displayed, regardless of CSS activation.
  5. the logo to be an anchor (f.ex to the start page)
  6. the same, simple markup for all views

I made two logotypes for this matter, one negative and one positive:

Positive logotype Negative logotype

Now let’s start with some basic HTML markup:

<a id ="logo" href="#" title="[link destination]">
<img src="logo_pos.gif" width="141" height="57" alt="Logo"  />
</a>

The positive logo goes in there as a default. We give it a proper alt text that represent the logotype content and a title attribute for the anchor to tell the user what happens when you click it. Let’s also add an id for the anchor. This would be enough to satisfy most of our specifified goals (pt 2-6), so now we just need to replace the positive logotype in the negative screen layout. Let us add som simple CSS to start with:


body
{ background: black; }

a img
{ border: none; } /* removes the default browser border */

So far so good! Now here comes the tricky part. We could simply remove the image using a negative text-indent and add a background image to our anchor by adding the following rules our style sheet.

#logo
{
display: block;
width: 141px;
height: 57px;
background: transparent url(logo_neg.gif);
text-indent: -10000px;
}

Almost there. Another option would be to put the negative logo in the markup and use CSS the same way to replace it with a positive logo in the print/handheld (as I promoted once before). This is also a pretty good option, except that the negative logo doesnt look very good with no style activated on a white background. It would also remove the alt text described below in the print/handheld layout. I prefer a pure black & white logo as default in this scenario.

Let’s go back to the CSS example above. Since the <img> element is displayed inline by default, the CSS will move it out of the way using a negative text-indent. Left is the anchor with a negative logotype specified as background-image in our CSS. But it’s not perfect since the text-indent also removes the alt text if no images are displayed. Some consider this to be accessible enough, but it all depends on how you define the term accessible. The logo is still there, and you can access it by turning off CSS etc. But we want perfection, and in this case it means accessible regardless of user preferences.

Using the famous Leahy/Langridge technique, we can hide the image using a padding-top equivalent to the image’s height. Then give the image a zero height in the CSS. This way we can still keep the alt text when images are turned off, and that’s exactly what we want here. Before using the Leahy/Langridge technique, I was experimenting with z-index and got pretty close to a solution. But all browsers behave differently when trying to position one containers child behind itself in my tests, so I resorted to a more stable solution:

#logo img
{
display; block;
padding-top: 57px;
height: 0;
overflow: hidden;
}

There. As a bonus, let’s style the alt text properly, which unfortunately only works in some standard browsers (not IE):

#logo img
{
font: bold 60px/57px helvetica, arial, sans-serif;
color: #2ae;
}

This whole solution seems to work in most browsers (all included in my test suite).

We pushed the logotype into a wider context. It’s not a part of the screen layout anymore, it’s an integrated part of the document as it should be. This leaves us with complete freedom to alter the CSS to use any variant of the logotype for different layouts and media, without worrying about how it will look without styling. Using a logotype with high resolution for printing is suddenly very possible. And it will remain accessible at all times. Isn’t that a great thing?

I’ve had some rants over the years about not confusing a visual logotype with 1st level headings. First of all: a <h1> should represent the page’s content. That means “Widgets” for a page about widgets and “Blue widgets” for a page about blue widgets (page, not site). A logotype is something completely different, it represents the author of the entire site and rarely changes between different pages or sections. It’s merely a visual representative, sitting on top of each view so the user knows they are still there. It’s also considered good practise to have the logo clickable with the home page as destination, where having a header clickable with the same destination would be confusing: “I clicked the text “Blue Widgets” and came back to the start page”. Not very good SEO there.

It’s insanely popular to hide the <h1> text behind the logo using CSS to save markup or whatever reason, I have done so myself over the years. But when you think about it, it’s not such a smart idea at all, since it confuses the document semantics and often leads to using <h2> instead for top-level headlines. It’s also a very bad practise when it comes to search engine optimization, since different header anchor texts leads to the front page.

If you want to hide the <h1> for some reason, hide it. But not behind the logo. Enough about that.

Browser testing suite:

  • MAC: Firefox 1.5
  • MAC: Safari 2
  • PC: Firefox 2
  • PC: Netscape 7
  • PC: Opera 8
  • PC: IE6
<html>
<head>
<style type="text/css" media="screen, projection">

body
{ background: black; }

a img
{ border: none; } /* removes the default browser border */

#logo
{
display: block;
width: 141px;
height: 57px;
background: transparent url(logo_neg.gif);
text-decoration: none;
}

#logo img
{
display; block;
padding-top: 57px;
height: 0;
overflow: hidden;
font: bold 60px/57px helvetica, arial, sans-serif;
color: #2ae;
}

</style>
<style type="text/css" media="print, handheld">

body
{ background: white; }

a img
{ border: none; } /* removes the default brower border */

#logo
{ text-decoration: none; }

#logo img
{
font: bold 60px/60px helvetica, arial, sans-serif;
color: #000;
}

</style>
</head>
<body>
<a id ="logo" href="#" title="[link destination]">
<img src="logo_pos.gif" width="141" height="57" alt="Logo"  />
</a>
</body>
</html>