Simon Willison’s Weblog

Here two shots, using MIE5.1/Mac under Mac OS X. http://www.xs4all.nl/~apple77/willison/losize.jpg (60K) http://www.xs4all.nl/~apple77/willison/hisize.jpg (83K) I have to be a nitpicker to not say you are doing great. The wrapping of the main menu looks a little strange at first, but thinking about it, it is a good thing. Better would perhaps be to use percentage values for it, so it attempts to fill like 85% of your window's width and use percentage values on various margins and paddings. And as for a step further than mimicing it's appearance, try make it respond okay to text resizing.

Kris - 1st August 2002 17:20 - #

Oh, and I think a logo image should be part of the page's content and not CSS styled decoration. But that is only an opinion about which I can argue endlessly :) It is like signing a letter with your name or authograph -- it gives identity to the content and has little to do with decoration, like the page margin or the font-face of the letter. The ALT text could be the company's name, possibly in this format: alt="Company Name" alt="logo: Company Name" or alt="[logo: Company Name]"

Kris - 1st August 2002 17:26 - #

Why is <h1><img alt="company name"></h2> of lesser semantic value? It is content being classified as a H1 heading, content that has a textual equivalent in form of the ALT attribute.

Kris - 1st August 2002 18:05 - #

Thanks for the screenshots - I'm still trying to work out a good way of preventing the navigation tabs from wrapping like that or at least getting them to wrap in a way that doesn't disrupt the rest of the site design. The logic behind using an <h1> with a background for the logo is that the image is essentially the words "Lancaster University Management School", and as such is the primary header and should go within an <h1> tag. Using an image with an alt tag would also work but would lose the semantic significance of using <h1>. One of my aims was to make the document structure as logical as possible, hence why I went with the <h1>. It is also probably an excellent optimisation for search engines :)

Simon - 9th March 2003 19:54 - #

sorry, that would be: <h1><img alt="company name"></h1>

Kris - 9th March 2003 19:54 - #

That's an excellent question :) For some reason I didn't think you were allowed to have image tags inside <h1>s, but I've just checked the XHTML DTD and it looks like you can. That said I think I'll stick with the current method - it has the added bonus that it helps achieve complete seperation of content from presentation - the only images in the actual markup are directly related to content (the image in the document and the advert) - at the end of the day the header logo is still a presentation thing rather than a content thing. Keeping it in the CSS also makes changing the logo possible without changing the markup.

Simon - 9th March 2003 19:54 - #

"it has the added bonus that it helps achieve complete seperation of content from presentation" Well, we disagree on the logo being a presentational object. I think it is as important as one's name under a letter, thus being content. "Keeping it in the CSS also makes changing the logo possible without changing the markup" Changing the image to which my <IMG> tags refer, will do the same side-wide :)

Kris - 9th March 2003 19:54 - #

You've convinced me :) I'll change that next time I mess around with the new CSS layout - I'll place the image inside the <h1> tag instead. Thanks for the insight.

Simon - 9th March 2003 19:54 - #