A few days ago, Jeff Burns wrote “Source Order: why I think Zen gets this wrong”.
His basic premise is that content-first HTML source ordering is an SEO-driven idea, is not backed by any accessibility studies, and goes against user expectations. While I respect his opinions, um… he’s wrong. :-)
So let’s look at Jeff’s first point…
SEO has hijacked accessibility and used it as the catchcry for better search results.
It’s not the SEO junkies who are using “accessibility” as a club to get their way. They don’t give a damn about accessibility and they’ve got the money to ignore the tiny minority of people who need those features.
It’s the Accessibility experts who have noticed the parallels between providing more context for users and more context for search engines. And it’s the Accessibility experts who have convinced clients to implement accessibility features in the name of SEO. Jeff’s analysis is almost completely backwards.
Why have clients been willing to shell out bucks for accessibility features re-branded as SEO? Because they work.
Jeff goes on…
Pundits claim that content first source order is some sort of best practice. Nominally baseless due to lack of real data, more oft based on a misguided notion of what we ought to be doing. […] Of course my words are only my opinion, however I do think there lacks a body of evidence to emphatically draw a conclusion.
The primary study Jeff quotes (webusability’s OZeWAI 2005 Presentation) was primarily about user expectations, which is a flawed study IMO. It’s like taking a survey in 1908 and asking what color do you expect your automobile to be? The answer would be “black”, of course (Model Ts were only black). That doesn’t mean they should have continued to only make black cars.
So why do users expect navigation links first? Because it’s really, really hard to get content-first HTML source ordering. And the vast majority of sites don’t do it. Why? Because they don’t know how to do it, can’t justify the cost to implement it, or can’t re-work their graphic design to make an option a possibility. (I've found some graphic designs make content-first an impossible task due to content-flow issues.)
So since users have gotten used to site navigation first… does that mean we shouldn’t attempt content-first HTML source ordering? Of course not!
Unfortunately, Jeff is not alone is misunderstanding this study. When it came out three years ago, I saw lots of people say “See! Content-first doesn’t help with accessibility.” But because the study organizers were so focused on screen-reader users’ expectations, they left dangling several key points. For example, “Interestingly, […] four screen reader users volunteered the opinion that although navigation is usually presented before the page content, they felt that they would probably find that pages which present the content first easier to use.” Expectations, in that case, can be a hinderance to learning about better ways to navigate websites.
So, really, there’s a lack of evidence for either side to draw a conclusion. So why did Jeff assume that site navigation should come first? His assumption is based on convention, not on data.
Every time I implement an accessibility “feature” on a website, I carefully consider why I’m using a particular technique. And I try to determine (to the best of my ability) if it really is improving the accessibility.
And I see absolutely no harm in having content-first HTML source ordering.
Now, two quick rebuttals before I get to the heart of the matter. Yes, I really do have a point. :-)
Jeff says that Zen’s “skip to navigation” link, which appears at the beginning of the HTML, is confusing. And, thus, should be replaced with a “Skip to main content” link.
many who hear the words "skip to navigation" infer this as "skip navigation"
That’s a good point. But noticing that the wording could be improved doesn’t mean Zen’s implementation is “conceptually flawed”. [insert raised Spock eyebrow here.]
And lastly…
Screen reader users expect the search form to be the first form element on the page
I had originally put the search box in Zen next to the site navigation because I thought of Search is a way to navigate the site. In the Drupal 7 page.tpl.php that I worked on this past January, we decided that primary navigation, secondary navigation and search don’t need to be grouped together; the search box is in the header and the secondary navigation is in the footer. Again, this is a minor debate point. And not indicative of a deeper flaw.
The big accessibility picture
The bigger picture that is missing here is that the user needs page navigation links to be first. Right now most themes only have “skip to *whatever*”. (This includes Zen.) When the first thing on the page should be list of page navigation links like: “Jump to: content, site navigation, section navigation, search, etc.”
This quick list of page navigation should have dramatic accessibility improvements. Since it will provide a mini-outline of what is on the page and where.
I opened an issue about this over 7 months ago in Zen issue queue (http://drupal.org/node/308376) but only Yoroy had asked for more details. Unfortunately, I haven’t had time to implement it yet. But it will be done as part of the larger page.tpl.php re-work I have planned for Zen 6.x-2.0.
I encourage anyone who reads this to join in with ideas (or code) at the Zen issue queue.
Comments12
Zen, accessibility, and designers
The most formidable deterrent I've experienced that's led me away from Zen (though I love it to death, John!) is the obstacle of positioning the navigation above the copy. There is no one standardized method for this or a one-way street -- it takes time-consuming and difficult CSS wrangling to get it done. Although it's definitely true that semantically, copy first is much more valuable, it hinders designers' ability to adopt such a drastic change to their practices. As Jeff pointed out on his blog, there is no evidence that copy first has any effect on SEO, and sites that purvey accessibility's virtues such as Section 508 do not adopt this source order.
Personally, unlike Jeff, I do not see any problem with Zen having a copy-first philosophy. I think this is extremely valuable for the contextually oriented and should be retained. But the greater web design community would reject content-first as what Jeff calls it: "a misguided notion of what we ought to be doing." It has been so ingrained in the minds of the web design community that copy comes after navigation that it's unlikely this will assist new designers to approach Drupal receptively.
Thanks for posting this,
Thanks for posting this, John, and thanks for all your hard work on Zen.
I think you are correct in that content-first is a net positive for any site, but I think the value is hard to quantify.
Generally, I do not consider it worth the trouble to do content first – mainly because it requires quite a bit of hacking to make work.
Whenever I'm tweaking the layout of one of the Zen-based sites I've done, it usually takes 20-30 minutes extra of fiddling with widths and negative margins to make it all work again, and some things are just not possible (like a dynamic-height navbar).
So, in my opinion, you should consider taking it out of the starting kit and using a simpler layout. For most sites, this three-ring CSS hack circus is probably not worth the effort ;)
Zen and positioning navigation at top
I'm not convinced that copy first ordering has any impact on SEO. It is this single feature that has caused many problems when implementing a design. Just one example: moving the navigation to the top with css demands the navigation has a fixed height, which is often a big limitation (even if the height is in ems).
Why not create another Zen theme where the ordering is standard? I love Zen - I've used it for about 14 sites and it's currently my preferred theme, but because of this one troublesome 'feature', I'm considering blueprint.
Generally, I do not consider
But see, that's the beauty of Zen - the hacks are already done.
Yes, the negative margins thing is tricky. I've been using Zen since my first Drupal site, but I feel I've really only come to truly master it in the last few weeks or so - the chart on the Zen reference card sparked the revelation. But now that I get it, getting everything to play nice with sites of non-default page and sidebar widths really isn't that tricky. Zen is a great starter theme, but that doesn't mean those just starting out with HTML and CSS will be able to immediately wrap their heads around it…
I don't really have a strong opinion as to where in the source order the navbar should go, but I do have a strong opinion towards Zen as a whole - it's wonderful, and has helped me realize the (at times somewhat outlandish) designs that our company's designers come up with with much more speed and elegance than I could do with a more basic starter theme, I'm certain.
Many good points
Agreed, Preston! That’s why we opted not to have content-first in Drupal 7’s default page.tpl.php. It would have been too much of a burden on new Drupal themers. I’m hoping that a theme will make it into core that has a content-first page.tpl.php, but we’ll have to see.
Yep! If you need the navbar to affect the flow of the page (i.e. push the content down if there are lots of links/wrapping of links), then there really is no way to have content-first. Unless you want to use javascript to modify layout. x-p
So let me state for the record: I have to override Zen’s page.tpl.php in about 90% of the websites I’ve themed. Usually, I can keep the content-first aspect of the tpl. But sometimes I do need to move the navbar about the content. It just depends on the actual design I’m implementing.
I’ve never done SEO metrics (mostly because I really don’t want to be in the business), but I have anecdotally seen a site jump in the search listings based on this one change alone: putting content first. Seriously. And it was Google’s own Matt Cutts who first pointed at an article that said content first helped search engine rankings. Unfortunately, I’ve lost that link. /me shakes fist at ma.gnolia.com!
Maybe the best approach: you
Maybe the best approach: you can take parts you like from Zen, and to rewrite everything else.
Preston So I agree with you
Preston So I agree with you that putting content before navigation is not an easy task, and can be incredibly frustrating, however I do think that Zen offers a standard way of handling this is *most* cases, and this is something that John (and myself) want to educate people about.
If your navigational element varies in height, then yes this is much more difficult to achieve, but in my experience the nav region is very often a fixed height. And using the Zen layout method helps you place top nav, left and right sidebars after the content region. It doesn't require difficult CSS at all b/c John already wrote it for us in the Zen theme - we just have to plug in the widths. And to be honest once you've used it once or twice, it becomes an incredibly useful tool for other parts of theme implementation - not just the source reordering of content and nav. Its a technique in CSS that I think everyone needs to learn, IMO.
Another good reason to have content first: mobile devices
Another good reason to have content first: mobile devices
I was talking about this issue with some folks over dinner last night, and one point that was made was that content-first source order is much more desireable when viewing pages on mobile devices. With limited screen real estate, it doesn't make sense to have to scroll through or skip navigation and other repeated elements on every single page.
Another reason for content first...
I am a BIG fan of Zen and the content first source order is one of the things I like about it. Once I grokked the negative-margin CSS business, it even became easy to customize.
There is another good reason to put the navigation after the content -- headings and structural labels.
Having the content first puts the h1 of the page headline as the first thing after the skip links(s) and the branding (great for SEO), then the sub-headings (h2-h6) of the content are next (also great for SEO since they're keyword-rich). Accessibility experts recommend using headings to label structure on the page, like the site nav, section nav, etc. The structural labels are useful for obvious reasons (to make it clear what the meaning is of what comes next), but it's also because screen readers (like JAWS) make it easy to jump to the next heading, so in a sense they're part of the page navigation. Most designers then hide structural labels (e.g., text-indent: -9999px) because sighted visitors can figure out what things are by position and other visual cues. So, structural labels aren't useful for SEO but they're usually in headings, so it's better to have them after the content so they do not "dilute" the SEO impact of the earlier ones.
When we all switch to HTML5 and have the section element we can "restart" the headings, but for now, I think it makes more sense in the heading "outline" of the page to have the content first.
And I'm totally with you on the page menu idea. The structural labels I'm talking about would be the obvious destinations of those links.
OK, one last comment on the "Skip XXX" link naming convention. Everywhere else we carefully choose labels that describe the destination of the link, so I prefer to use "Jump to XXX". But the verb "skip" has become so conventional that I don't want to confuse anyone. As Jeff pointed out, "Skip to Navigation" is too similar to "Skip Navigation" (which is more common). So, how about if we start a new trend and call it "Jump to Navigation"? (And/or put em tags around the "to" so that the screen reader emphasizes the word.)
Zen
Zen just seems to complicated to me. I mean it's not bad but I have a very hard time customizing it for some reason.
"content-first HTML source ordering is an SEO-driven idea"
I am behind this statement 100%. The first thing the SE's read is your content and it's the most important IMO. To much complicated script just confused SE bots and they can penalize your page or not craw it often.
Daniel
It’s not the SEO junkies who
I suggest you read some SEO blogs. You'll see SEO's have been using "accessibility" for a long time to sell SEO services. I worked in SEO for a long time, and pushed accessibility features, such as proper h1, h2 headings and other such features.
I'd agree wholeheartedly that content first for SEO borders on unprovable. You would have to build two sites with the exact same content and do a serious lot of testing. I've seen it done a while ago, by memory someone at SEOBlog might have done it, results were astounding - the nested tables based layout ranked higher than the div based content source ordered layout, and that really put the cats amoung the pigeons.
I beleive the conceptually flawed remark should read "implimentation is flawed" because Zens skip link can appear in the source, even when there is nothing to skip to (unless this has been addressed recently).
I have to say that in the last few months I've done two themes for blind developers (yes, there are a couple and they are members of drupal.org). Both of them chose a more conventional source order, with navigation (primary links) above the content, with sidebars below the content. They chose this because this is what they expect a site to be like and I tend to think user expectation is very important, as did my clients.
content first
As I understand it, the content-first idea came from the earlier googlebots (and other search bots) who would limit how much of a page they'd index. So having the most important stuff first would guarantee that the main copy of the page got indexed. Google has said for quite a few years now that the bots don't have those limits anymore, or that they are greatly expanded. In any case a better solution for any limited bots is to have as little code getting in the way of the content as possible (lean, minimal markup).
If the navigation isn't sitting in a sidebar (in which case, the point is almost moot), but is horizontal somewhere, I personally enjoy it being at the top. While navigating to the page I'm after, I need navigation first— nobody wants to crawl through an entire page just to get to the next click. Only once I've gotten to the page I'm interested in, do I want the navigation gone. Having a simple, main navigation with not much more than 6 options can help this. Even if for some reason there's no skip link and you can't use other methods, 6 items isn't too long to tab through. Use a secondary menu to have all the thousands of sub-options.
Since regular links don't say "Go to blah" or "skip to Blah", and most of the "back to top" links we see say nothing more than "top" or "home", I've started trying out my skip links as saying "main site navigation", "login" and "main content". I mean, it's a link, links go places, so possibly it makes more sense to just state the destination rather than what it's skipping over or that it's doing an skipping at all.
Though I also make all my skip links visible (for sighted keyboarders), and then "skip to content" might make more sense.
There was an older screen reader study done in 2003 or so where the participants, who were not technical users, were confused by the term "navigation". I'm not sure but hope that's become more standard and understood. In Dutch pages I'm calling them the "menu" and that seems safe (without user testing, I'll never know).
In any case, whether the content is first, or the navigation, you have to have a skip link either way, so does it matter? If the content's first, you SHOULD have a skip to the navigation (in case that page isn't the desired destination but just a stop along the way), and if the nav's first, a skip to the main page content. Looked at that way, I don't see one being better or worse than another.
I do think most sidebars are either repeated or too unimportant (or filled with ads) that they should come after the rest of the page. However I haven't figured out how to do LayoutGala-style negative-margin sidebars that drop down like normal floats when the screen is shrunk. That would make things really nice.
Re the SEOers using accessibility in their arguments: as someone who doesn't give a rat's about the googles but does care about accessibility, I find that "SEO" is a reason bosses and businesses listen to when you're trying to sell accessibility : ) The googles are your most frequent blind visitors.