Bulletproof Logos

Marc → www.bostonwebstudio.com

That is quite nice, thanks for showing us. I’m definitely going to try that in future sites.

Shaun Andrews → www.shaunandrews.com/mon/

Just curious, but why wouldn’t you wrap the site logo in a header element? To me it makes more sense to use an h1 than a div with a id. Its less markup and it degrades nicer (with the browsers default styles).

Alex Beard → www.al-ex.net

I’ve never given much thought to this subject, but what you said makes complete sense. I’ll definitely keep this in mind.

Shaun Andrews → www.shaunandrews.com/mon/

Sorry to double post, but am I missing something or is there no feed for comments on articles? I like being able to keep up to date to response to my comments through my feed reader (Waggr).

cch

I do that a lot.

For anyone trying this at home, remember to remove any margin or padding from the h1, or funny things will happen.

Another good practice is that the logo links back to the site home, so we’d have:

<h1><a href=”/”><img … /></a><</h1>

Kevin → lawver.net

Why not just use the header as an image? You can do the same thing with an h1 with “rollyo” in it, then use CSS to move/hide the text and put in a background image of the logo. It saves you some markup, and you never have to change the markup if you need to change the logo.

Jacob Patton → freetheslaves.net/store/dreams-die-hard/

Dan, those are both nice options, but why don’t you replace the logo with a CSS image-replacement technique? Is it just a matter of preference, or do you have a reason for not using IR?

On the Free the Slaves site, I’ve marked up the logo with a paragraph tag and replaced it using Phark image replacement. I could arguably be better off with an H-element for the logo, but do you think an img is the better choice?

Sebastian Redl → stud3.tuwien.ac.at/~e0226430/

Is there any reason for the wrapper div instead of applying the styles to the image directly?
Aside from being a block element, I mean.

Joe Clark → joeclark.org/weblogs/

Is there any reason at all why one could not write CSS like:

img.logo { font: 120%/1.4 Zapfino, cursive; }

?

Kevin → lawver.net

Joe, I tried your suggestion, and here are the results:

1. In Safari, no alt text is displayed.
2. In Firefox, I got your expected result.
3. In IE, I got the regular red X and “unstyled” alt text.

coda → coda.co.za

Building on what Joe said:

img.logo[alt] { ...rules... }

Dave Simon → www.oddlaa.com/

I didn’t know Firefox or Opera did that. That’s good to know.

Seems like it would be a logical step for browsers to take, but only two do it. I guess everyone else assumes images always load!

Calrion

I’ve always marked up images (especially text-as-image) this way, even back when I was using tables. My feeling was that it’s more semantic, and I hoped that it would make a difference — if not in browsers, then at least in screen readers.

It’s funny, I noticed the same behaviour in Firefox just the other day. Definately a good feature.

Francis → www.hisbrother.co.uk

Oooh, cool - I’ve been doing something that Dan’s only just mentioned! I’ve been doing that for a year or so, but as the effect never worked in IE I used the attribute selector: #logo[alt] which works as well.

Yannick → www.godsporch.net

This was an interesting read. Thanks Dan. I never knew that Opera and firefox would actually apply formatting to the ALT text. I can probably use this on upcoming projects.

Tom → nominoc.com/

Wouldn’t it better if we had the following

XHTML:
<h1><span>NOMINOC</span></h1>

CSS:

h1 {padding: 0; margin: 0; display: block; background: transparent url(img/logo.png) no-repeat 0 0;}
h1 span {display: none;}

I know that Google and other search engines love header tags, and I am not sure if they take in IMG Alt attribute as the text within tags.

Chris Jones → www.leeked.net

@Tom: That is how I like to do it, usually with a width/height rule also though.

Tom → nominoc.com/

Chris: Oops. yea. :)

Robert Nyman → www.robertnyman.com

Dan,

I usually take the same approach with using heading tags. It seems like the best way to do it from a semantic point of view.

Then, of course, it’s that ever-going debate if a logo is presentation or content. Using an image (within header tags or styled directly for proper alt presentation) is more fool-proof than image replacement techniques. But now I’m drifting off-topic, sorry…

Is there any recommendation saying how the alt should be presented? As plain text or as a broken image?

Sergei Muller → www.shift-ctrl.co.za

Thanks for the great article.

I’ll definitely be using it in my sites from now on.

Aristotle Pagaltzis → plasmasturm.org/

FWIW, this is actually the way alt was always supposed to work. It is an “alternative”, ie something that can serve as a true stand-in for the image when the image is missing. That’s why 99% of the images on the should have alt="" – people who put a description or caption there are mistaken, that sort of thing goes in title.

Andi

I realise that you’re trying to achieve something different semantically by using a H1, but an alternative with no additional mark-up is to set a font size on the image in this manner:


img#logo {
font: normal 130px arial;
}


I’ve tested this in Mozilla and Opera with good results. Opera has a few quirks unless you set a height and width on the image. IE remains oblivious to the whole concept, of course.

Not an improvement, but just another approach.

Robbie → www.projectgoboy.com

Just like the site name: SimpleBits.. who would’ve thought! :)

Shaun Andrews → www.shaunandrews.com/mon/

@Robert - I’ve never heard of this debate for the logo being content or not. It seems only logical that the logo is content. Could you possibly point me the direction of this discussion? I’m really interesting in this debate.

Mark Priestap → www.designwisestudios.com

@Sean #2

One very good reason for not using <h1> for logos is that search engines look to see if the <h1> text is relevant to the page content and especially the <title>. If you ever use a tool like WebCEO or some other Search Engine Optimization (SEO) tool, the first thing it’ll warn you about is the descrepency between the document <title> and the <h1>. My own site doesn’t follow these rules b/c I wasn’t aware of it when I built it.

Another approach that seems to work ok is placing the logo text inside <big> tags. The BIG tag can be styled, and is both semantic and helpful when CSS is turned off.

Just my 3 cents. Nice post Dan.

Robert Nyman → www.robertnyman.com

@Shaun,

Calling it the ever-going debate was maybe an overstatement! :-)

Dan, sorry for going a bit OT here: I had a post and discussion about image replacement in my blog: Is image replacement really worth it? where it came up.

Kirk Franklin → www.magneato.com/

The W3C recommends that the h1 be the same as the title. I interpret this to mean that both should refer to the title of the document, not the site.

Ramandeep Singh

If I’m not mistaken I think Digital Web Magazine uses this technique for their logo. That was where I first saw it in actions when I was digging around their HTML & CSS etc :o) They wrap theirs around a <h1> element, which is a better option, no? If CSS is off along with images the logo/site name will still be obvious as it will render using browser’s default <h1> settings.

Darrel → www.mnteractive.com

I know that Google and other search engines love header tags, and I am not sure if they take in IMG Alt attribute as the text within tags.

No one knows the inner working of Google, but their image search seems to rely heavily on ALT attributes, and since alt attributes have been around forever, and serve a very real purpose, I see no reason to not just wrap the inline image in H1 tags.

oemebamo → oemebamo.blogspot.com

@Tom & Chris Jones: If you hide the span inside h1 with display:none, it won’t be heard by people using screenreaders (see skip-nav-discussion) and they’re left with an ‘empty’ header, isn’t it?

Maybe something like:

h1 span {
position: absolute;
font-size: 0;
left: -1000px;
}

would be better? Makes sense?

Oliver Zheng → mtsix.com/

The search engine will definitely look at the alt attribute of an image. Usually, the alt attribute is the image’s name when you search for that name.

In Opera, when images are hidden, there is a border around the image which looks awfully displeasing.

FlorentG

@oemebamo:

This technique has a drawback : if you turn off images, but leave css on, nothing will display…

Matthijs Aandewiel

Jacob Patton, regarding your comment.. correct me if i’m wrong, but when i go to the freetheslaves site, with images turned off, i do not see a logo.. anywhere.

Joen → joen.dk/

Dan: You wrote that “At present, this will work in Firefox and Opera (AFAIK)”. Should this be interpreted to mean that you don’t test with Opera? If that’s the case, you really should, especially now that it’s free.

Joen → joen.dk/

Dan: Thanks for clearing that up.

I have been reading your blog for a couple of years now, but never left a comment until now. So while I’m at it, I’d just like to say keep up the good work!

Jacques Marneweck → www.powertrip.co.za/

Dan, that is quite an interesting find that you found there :)

Oscar

I quite like the mozilla.org approach… A negative text-indent that displays the H1 tag when styles are disabled.

Small Paul → pauldwaite.co.uk/

Yeah, I’ve always preferred this method to image replacement. Works with images off and CSS on. Keeps the logo in the printed version. Closer to the XHTML 2.0 way of doing things (i.e. <h1 src=”img.jpg”>)

I wasn’t sure about it, because one time (haven’t been able to find it online since) Dave Shea made a comment suggesting that <h1><img> was somehow distasteful, though I don’t think he said why. But I’ve never figured out what’s wrong with it.

theUg

Firstly, on semantics. Logo (or header as a whole) on the webpage is nothing more than a running title (titre de colonne in French, Kolumnentitel in German, колонтитул in Russian)) and should be treated as such. End of story. For those who is in armored vehicle—no h# tags. ;)

As for the styling of “alt” text, I was concerned about it few years back, cause I always wanted to control it. Since I used mostly Opera in the past 4-5 years I didn’t really bother about IE, although I think minimally it actually does style some of it if I remember right. I need to check on it.

Denis Defreyne → htt://amonre.org/

Considering this does not work in Safari, I guess image replacement would be a better choice (at least for now).

I’m wondering whether removing the alt text and putting it next to the img tag would be a good idea. The image could be put in front of the text, hiding it when images are enabled. (I’m aware that similar image replacement techniques exist, but as far as I know none of these use img tags… correct me if I’m wrong.)

Billy Wong

Aristotle:
Very often, is abused. People heard that there should be an alt and they put alt="" in every image tag. It is especially true for the code generated by image host. There’s numerous time the images fail to load (when there are too many on the same page) and I cannot right-click > show image in firefox since there’s no way for me to select it!

“If it’s content, please put something in the alt.” I really want to say so to those guys, before I realize the code on the discussion board are not written by the poster…

Cory S.N. LaViska → www.laviska.com

For those who don’t know (and those who do), IE displays ALT text as a tool-tip if you hover over the image with your mouse. This seems to be another one of Microsoft’s brilliant ideas to conquer the WWWorld.

Anyhow, FF and Opera are on the right track when it comes to ALT text - it guarantees that the user will never be left “stranded”. It also seems more practical that way - plus, it makes [most] people happy.

And besides, your HTML pages won’t validate if you don’t include ALT in every IMG tag.

Bina → www.webbriefcase.com.au

It’d be interesting to know if the search engines would consider an alt text within H1 tags to be equivalent to headlines. I guess it wouldn’t hurt to put the tags around the img tag. Your post is very interesting by the way, Dan. It would never have crossed my mind if I never read it here.

flashtech → www.vlan9.com

Very often, is abused. People heard that there should be an alt and they put alt=”” in every image tag. It is especially true for the code generated by image host. There’s numerous time the images fail to load (when there are too many on the same page) and I cannot right-click > show image in firefox since there’s no way for me to select it!
Css is wrong