Back in June 2010 I wrote about using SVG for your logo. When I realigned my website earlier this year (see: Designing a new me) I reverted back to the typical PNG and used the -webkit-min-device-pixel-ratio to provide a high-res version.
Well 17 months ago I wasn’t as sharp as I am today with front-end standards and for whatever reason I settled on using the <object> and <embed> elements… what was I smoking? Well anyway, it didn’t occur to me that you can provide an SVG file as the source of an <img> element or as a background image in CSS — and I’ve now done just that, look up! Browser support is pretty much across the board.
Now because SVG scales by nature it is resolution independent, meaning I no longer require a media query for the @2x high-res PNG version (that only the iPhone 4 could see). If your logo resizes at different breakpoints (mine gets smaller below 480px) simply allow the <img> to scale. Or if you’re using a background image in CSS apply a background-size in each media query in which it resizes.
I’m using the conditional comments trick around my <html> element so that Internet Explorer versions below 9 can fallback to a PNG instead of SVG. All very simple and clean! I should probably use a JavaScript test to cover all bases.
I do plan to realign/redesign my website again early next year. I’m also well aware I’ve made a few mistakes in my current markup and CSS — that’s a weasely disclaimer because I’m about to get very deep…
The H1 Debate
You may have noticed my logo is actually a CSS background applied to the document’s first <h1>.
Many professional developers and semantic purists including Harry Roberts — whom I very much respect — will argue that you’re logo is not a <h1>. I agree with everything Harry says regarding his approach, which is perfectly fine, but there is an alternative. To make sense of that, allow me to explain!
I could say that in my case I don’t even have a “logo”, more of a stylised typographic illustration of my main heading “David Bushell does design”. I could also, in theory, achieve that style using CSS3 and not require an image replacement technique at all thus taking myself out of the equation, but I digress.
My choice relates to the document outline and the decision to make the website’s name a consistent top-level heading on every page across the site. (Whether I’ve got my document outline perfect is another debate.)
I’d much prefer search engines, assistive technologies, and everything else to see the top-level <h1> as the first piece of content in the document rather than an image (like a logo). For this reason the logo is relegated to the realm of “style” and is not a piece of content whose value would be questionable in pole position. This trade off is based on what I consider a more appropriate content hierarchy. I could lead with the <h1> and continue with an <img> for the logo, but again, it really isn’t a valuable piece of content at that prominence. The heading serves to communicate ownership, the logo is merely branding.
If I were to remove the website’s name as the top level <h1> and instead use the page’s first heading — e.g. this article’s title “The Good, the Bad, and the Logo” — I may need to promote my logo back into semantic document content and, of course, use an <img> element. Or I could make it visible elsewhere with CSS.
Whether the logo needs to be content is secondary to the question: what should the document’s top level <h1> be? The website’s name, or the page heading? I know developers, SEO optimists, and others who provide arguments for both cases. (I know many more web practitioners who have no idea of what I’m talking about.) My document’s <header role="banner"> (including the navigation & advertisement) is site-wide, where as my page heading refers to the main <article role="main"> below.
Content and users come before SEO, in fact, they influence SEO (not vice-versa). On the majority of websites I build I believe that the website’s name should lead the content on every page. Whether you use multiple <h1> elements as HTML5 allows, or a <h1> and <h2> for legacy purposes, there is value in having the textual website name lead the content in the semantic markup and document outline. Much more value than an image for branding purposes; this can be applied with other branded styles in CSS. Once we’ve established that, applying it as a background image to the first <h1> is irrelevant to the semantic document, as are the brand colours etc.
I don’t believe a logo needs to be content. While your logo is an image in one sense, it doesn’t have to be an <img> in the document. It should never need to be an <img> nested inside a <h1> either. I am willing to be persuaded on what the <h1> should be, but that’s a separate debate in my eyes.
There are semantics, and then there are HTML semantics. A “logo” can be interpreted in different ways that don’t necessarily conflict with properly built websites.
* * *
Finally, what about logos made purely out of “CSS”? No. Never. That is absolutely, categorically, illogical. As a quirky esoteric challenge then sure, knock yourself out — but in practice? Don’t even joke about it!
I hope you’ve enjoyed this article!
7 Comments
Harry Roberts
-tag
+element
;)
The problem here is that we don’t really build websites, we build web pages, and in tying them together the website builds itself (I hope that make sense). A website doesn’t need a
h1because users (and bots) don’t interact with whole websites, they interact with pages on websites.So, if a user is on a page entitled The Good, the Bad and the Logo that is the most important thing on that page. The uppermost title on that page should be the title of that page. The fact that page lies on a website called ‘David Bushell—Graphic & Web Design’ is secondary and almost wholly irrelevant.
Where SEO is concerned, I feel that my method of using the
h1as the page title is working well for me (in fact, a not-logged-into-Google search for logo h1 currently brings my article up #1 for me). It makes the page’s intentions far more concentrated and explicit. People using a search engine don’t care what my site is called because they don’t know it. They’re not looking for my site specifically, they find it because they’re looking for the content that happens to be on its pages. People, and bots, don’t care what my site is called, they care if my site contains the content they’re looking for—they care what my pages are called. Marking up the content’s/page’s title with the uppermost heading makes way more sense than marking up the less explicit and irrelevant site title with it.Lastly, almost as a last-ditch attempt, a logo has nothing to do with CSS whatsoever. A brand shouldn’t rely on a modern language in order to maintain integrity. It]s just… wrong :( Even knowing that we can use multiple
h1s doesn’t make it okay to use one for the logo. A logo is a type of image (hence brand image), not a type of textual element.Good article dude, but I’m afraid that I personally don’t agree.
Ash Robbins
This will always be a tricky one, because people can see a logo as either an image (brand image as Harry says), or some stylised text like the “logo” for this site (or mine). Personally I feel that a logo is a graphical thing, and if your just using text then it’s more of a heading or just a site title, whether it has style applied to it or not.
I think I’m more inclined to agree with the point that the most important piece of content on a page is the article/page title and not the site title, despite the fact that the site title is what remains consistent across all pages. Therefore the article/page titleshould be the h1. The only niggle I have with that is that it feels weird structurally to have an h1 as not one of the first things on the page. Maybe that’s just me being a weirdo though, and obviously it depends on the design, so let’s pretend I didn’t write that…
9miles
Valid response and argument. It would be as though the brand logo is specific entity of just the web and not the overall brand itself.
Andreas Gehrke
On a more pragmatic note: Using an img tag for your logo allows it be displayed on many social networks when your pages are shared. So +1 for img.
David Bushell
Thanks for the comment Harry, I’ve fixed the tag/element tomfoolery ;)
Just so we’re clear I’m not using “SEO” to justify one method over another, and your example is a prime candidate in highlighting the fact that search engines will find good content regardless.
I understand what you’re saying about building “pages” not websites, but I don’t think it is that clear cut. Most modern web pages have all sorts of content unrelated to whatever the main feature is. A page like this one heavily favours the main article, but often that’s not the case. A web page needs a header to represent the whole, I don’t see that being “irrelevant”. This discrepancy becomes even blurrier when you consider websites that act more like applications than a collection of documents.
Anyway, all of that is far more important than a logo. I can’t justify having an image lead the content for the sake of whether or not it’s appropriate in CSS. If we abstract content by reading the HTML alone it is “unbranded” — it doesn’t need a logo. It could lead with a h1 or end with author or colophon details. On presentation we brand that content with CSS. I think it’s perfectly acceptable to apply the logo in the same way.
I know you’ll never be convinced of that :)
Tom Hermans
Harry’s comment is the better explanation on this page imho
Your site title can only be an h1 on your homepage.. nowhere else, cause, it’s simply not the title of that page.
btw, if you care about what is leading the content that much, why is your navigation first in your source ? and the advertisement, and the contact info ?
I know I’m picking here and I know that the majority of sites ppl (and me) build have this setup, but do you see my point ?
David Bushell
@Tom Hermans – Thanks for the comment!
It comes down to how HTML was originally designed around the idea that one page/document = one article/topic, all linked from an index page. To be fair your typical blog remains close to that idea, but most modern websites are not designed that way anymore. They are designed with a lot of permanent, site-wide elements on every page. It makes no sense to have those elements floating around before or after the main article. By marking them up as top-level content in the document outline (with the main article and other content nested appropriately) sense is made. If you don’t like that idea then don’t design websites with site-wide headers, instead link back to your index page from within the main article which encompasses the whole document. Both approaches are correct if they match their respective designs, in my opinion Harry’s more “traditional” explanation doesn’t fit a modern website design.
I have no real issue with the logo being represented as an image element in the header, I just feel it’s a lot tidier to whack that sucker behind the top-level h1. This is where I actually disagree with Harry in that I see this as acceptable practice :)
Your Comment…