Bruce Lawson's personal site

Navigation or content first?

It’s a debate that comes and goes: should your content be before your navigation in the source order and/or in the visual order?

Personally, I use the visual layout of nav on the left, but at the bottom of the source. With a huge nav like a blog generally has, I think Google likes my content better if it’s at the top of the source, and it’s better for screenreader users not to tab through endless nav.

Arguments against content first tend to focus on the subversion of user expectation: it spooks people out too much if the content is first. I say “Tish and Pish!” because I think that’s a red herring—users expect massively-nested tables for layout but doesn’t mean you should do it. I also think that websites are so heterogenous that people expect to have to learn a new layout for each site, anyway.

The reason I mention this is that I read a generally sensible blog post the other day by the American Federation for the Blind called How to Make Your Blog Accessible to Blind Readers which said:

Blind users find top and left-hand navigation bars annoying because the screen reader starts at the top of the page and reads from left to right. It is very time-consuming to listen to the same list of links every time you visit a page. You can get people right to your latest post by putting your navigation links on the right-hand side.

If you are wedded to left-hand navigation, then place a tiny “skip link” at the top, so blind users can jump to the new content. Just don’t forget the anchor!

Assuming that the AFB knows what it’s talking about, that’s pretty clear: put content first, but if you really can’t do that, use skip links (even though “skip links” is a widget that’s does what the browser should do, and Patrick Lauke will give the AFB a collective wedgie for recommending it).

Talking of which, Ian Lloyd has made a video that shows people how to resize text in all the popular browsers called Teach a Man to Fish (or How to Resize Text) which he wants people to link to instead of arseing around with text resize widgets. Do it, or Lauke will give you a wedgie.

Buy "Calling For The Moon", my debut album of songs I wrote while living in Thailand, India, Turkey. (Only £2, on Bandcamp.)

23 Responses to “ Navigation or content first? ”

Comment by Mo

I tend to put top-level navigation at the bottom (or somewhere below the primary content, at any rate), but I’ll often put intra-section navigation at the top, directly below the top-level heading. It does depend on the site a little, though.

Of course, CSS positions it all completely differently to the content, but hopefully done in a way which doesn’t break it for screen-readers.

Comment by Tim Hofman

At the moment i’m using a “skip to content” link in every site I create, but honestly I don’t think it really matters a lot whether you put content or the navigation first.

On a bigger site with more than only “the latest blogpost” and the navigation a user might want to read something totally different from the sidebar like perhaps a shoppingcart, for example.

In that case screenreader users will most likely prefer to navigate by using the headers in the page.

Comment by Rich Pedley

It’s interesting, but I wonder how many people in the real world they actually spoke to. I’ve been in contact with blind users, or at least know people that have, and a good proportion of them actually jump immediately to the bottom of the page and navigate up – probably because of the number of left hand, first in source, navigation.

But I am glad to see the recommendation of a ‘skip link’.

Comment by Rosie Sherry

My personal preference is for order of content to be as seen on the screen, as a visual user I find it too easy to get lost using the keyboard to navigate.

One point that does annoy me is keyboard navigation for non blind users. It’s incredibly frustrating using using tab keys to navigate when you can never see which link is selected – ie, users get lost using the tab key to navigate. This point often gets overlooked in web projects and is usually pretty easy to fix.

Comment by Craig

It’s rare you see this concept discussed, but I think it’s logical to have the source ordered: content, secondary navigation (pages within the current section), then the main navigation. That’s good for SEO and accessibility.

However, it does depend on the site’s size (number of nav links) and design. Putting everything after the content generally requires CSS absolute positioning which can be problematical.

Comment by Daniel Walker

Either approach is an assumption as to what the user needs most, and much of this debate almost seems to imply that the navigation is a nuisance: its only a nuisance while you’re actually on the page you wanted to read. Until then, it may be the only means you have of getting to that page.

Two things seem most important: consistency and ease of use. Ease of use involves things you can do to give the user the ability to switch between menu and content with ease (for instance). However, consistency is more of a matter of consensus: you want to place your material where the user expects to find it, and these expectations are informed by all the other websites they regularly use. Furthermore their screen readers are designed to cope with the real world – as represented by all those other websites. Screen readers are currently great at handling nested table-based layouts, for instance, not because nested tables are good, but because they’re common.

Sure, those of us trying to develope with the needs of users who are blind, in mind, should reach a consensus on where to place this content, but screen reader makers will continue to develope their software for what’s common; not what’s necessarily best-practice.

By reaching a consensus, we get to have a say over what’s common, but like it oor loath it, most users of screen readers want to surf Amazon and Ebay; not our blogs. By banging on about what we’ve all agreed they should be doing, we can perhaps get even Amazon and Ebay to realise that being a 21st Century web-resource involves something more than giving all your graphics round edges. However, while we hurl derision at them, let’s at least make sure we’re all hurling the same derision.

‘Menu at the end’ certainly seems to be the way to go, so let’s go that way. Sometimes, some things are the best way to go, simply because that’s the way everyone else happens to be going, at the time.

Comment by Bruce

Russ, thanks very much; I have read that, and wanted to link to it when writing this post, but (as usual when you want to link to a good article) I couldn’t remember where I’d read it!

I notice, however, that you surveyed user expectations rather than preferences, although you do note

Interestingly, during these follow up discussions, 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.

Rosie – you’re absolutely right about sites needing good :focus contrast on links. I need to add it to this site.

Dan – as usual, a sensible comment. Thanks mate.

Comment by Mike Cherim

I don’t think it matters that much to users that don’t see layouts so long as jump links are provided and accessible. This I’ve heard directly from blind users so I take it at face value. I do prefer content first with navigation and secondary sidebar content to follow, capped off with anything in the footer. (This is the semantic ordering I prefer.) But I don’t do this for accessibility since it my understanding it doesn’t matter much; I do this for SEO more than anything else. Even there it isn’t that important, but every little bit helps I suppose.

Comment by Richard Rutter

Screen reader users I’ve spoken to and seen in action have tended to navigate pages using headings (assuming they exist in the markup). This is especially true for their first visit to a page or site, as it helps get a feel for the structure. When navigating by headings the navigation is automatically skipped over, the implication being that a skip nav link is not required.

The people I spoke to also said that they would _expect_ navigation to come first in the markup, so if the nav was last there needed to be a *skip to nav* link to they could get there quickly and easily.

Comment by Robert Whittaker

I tend to go for navigation first, since then it’s consistent with the visual ordering on the page — and so helps those using a combination of visual viewing and keyboard navigation.

Moreover, if you’re providing skip links to various elements within the page (content, main navigation, secondary navigation, search box, etc), then those links need to be at the top to be found, and to avoid having to hear them all to get to the content, the first one had better be “skip to content”. After that, it doesn’t really matter where you put the content.

With content first and no skip links at all, will people browsing in a linear fashion find the other page elements? If people are reporting that they often work from the bottom up, surely this is telling you that you’ve got your page ordering backwards!

Comment by Mo


Given that most sites put navigation first, that tallies with people browsing from the bottom up, surely?

The consensus solution (from both an SEO and accessibility perspective) would appear to be top level heading, skip to primary navigation, secondary navigation (maybe? I’m not sure), followed by the content.

I’m not sold on the idea of having lots of “Skip to…” links at the top of the document—it strikes me as suffering from the same problems as putting the navigation at the top of the document!

Comment by bruce

I think Richard’s point is good one; as more and more sites at least have a logical heading structure, people can navigate using the headings. (Should we have invisible headings saying “navigation”, “content”, I wonder in passing?)

I’ve been thinking of Dan’s point that we’re assuming that nav is useless. I think that there’s nav, and there’s nav. For example, on a small brochure site where there are only a few main nav points it makes sense to have them at the top. They might even be useful to Google.

But on a blog page, such as this one, the navigation is secondary. I’m pretty sure this is true from a look at my server logs. I get lots of visits referred from Google – because they’ve searched on “Conditonal Comments” or “Shaved German nurses”. They read the article and then they go away. They’re strangely not interested in my music, my beautiful poetic soul, or anything else on my site (although people searching for the former would doubtlessly be interested in the latter if they knew I wrote about that, too). So, in that context, nav is pretty useless.

Comment by Mo

Interestingly, making sure the headings are present if something I’m quite anal about (and that gets relayed to the other guys who work here): sections, in general, are made up of a heading and some content. A link or a list in the middle of a page with no context is meaningless, so you need that heading for it to make sense. If it helps people navigate the page because they navigate specifically by heading, all the better (although my intent was that people who navigate the page in a linear fashion will know what they’re looking at/hearing, it’s much the same thing though, really).

Comment by Robert Whittaker

Possible SEO issues aside, what exactly are the problems with putting navigation (or skip links) at the top if the first thing on the page is a “skip to main content” link?

On the other hand, content first with no skip links leaves a user arriving at the top of the page with no useful way to discover what useful devices might be hiding below the content (other than perhaps reverse navigation by headings, or reading through all the content first).

Comment by Matt Machell

I agree with Dan. Don’t assume navigation is useless. Remember that the web subverts heirarchy, so just because the user is arriving at your site on a page, doesn’t mean it’s the one they want. They may have come from a not-quite-right search or via an ambiguous link.

Good navigation is a great orientation mechanism in this situation. A screenreader user can do the equivilent of glance over your primary navigation to gain a site context and that’s a useful thing to do first.

But that said, as others have pointed out, as long as the inpage navigation mechanisms are clear it shouldn’t matter what order a page is in.

Comment by Ben 'Cerbera' Millard

Source order doesn’t affect page rankings, afaict. So there’s no SEO reason for it.

In mobile devices and other linearised contexts such as screen readers, having the content first makes it easier to get to. But it makes the navigation more difficult to get to. And vice versa.

Whichever order you use, as long as it’s consistent throughout the site users can get used to it.

Accessing sites by hitting the Tab button on the keyboard isn’t really a viable way to interact with the web, imho. Voice commands, alternate pointing devices, touch screens and the emergence of eye-tracking technologies seem a much better solution than filling your page with skip links. Or use Opera, which is pretty helpful…and free. 🙂

Comment by Stephen

“Source order doesn’t affect page rankings”

That’s not true.

If you’re working with very competitive terms (where subtle changes can make more difference), having those terms early in the source makes a difference.

It follows that it also makes a difference for less competitive terms, but is less of a factor.

Comment by Brian Darby

In our experience, source code order matters and content nearer to the top of the page structure always seems to be picked up first and is often used in search result summaries. Content further down the source code structure seems to take a lot longer to be picked up by search bots, and even then, it’s usually only phrases in ‘bold’ or link text.

If you are relying on ‘tabbing’ to navigate, (as many of my friends do) it’s nice to have, at least the main navigation, at the top of the page structure. If it’s at the bottom and you have a lot of ‘in-page’ links, you have to step through all these to get down to the main navigation, unless, as was mentioned, you just assume the navigation is always at the bottom and jump straight to the end of the page.

Comment by Daniel Walker

However, the manner in which clusters of Linux servers, located in Mountain View California, or wherever, read your webpage, should not be your primary concern when building for accessability, because that can (and will) change.

In many ways, I think this obsession with what the googlebot thinks of us, is indicative of the untidy and disorganised way in which web content is made available, these days, and no one in particular is to blame, for that: why try to order your content, when your visitors all arrive (and depart) as a result of something they typed into a textbox? The success of the search engines both created this effect, and help to drive it. As a result, it is often easier to find anything relevant than it is to find something specific. In fact, the more specific the problem, the more likely you are to find a solution, if one exists (and, of course, the less likely you are to visit the site you found it on, ever again). You don’t even have to spell it right! I suspect Google’s list of misspellings of ‘Ubuntu’ probably run to several pages: not bad, for an obscure Xhosa word for a concept that cannot be stated in plain English.

But, there you go: sometimes it’s just eaier to put a name to a problem, than it is to put a name to a face.

Interesting, as this is, however, it should not cloud our perception of the fact that we build for other people, and not for robots. A robot will remember your name because it has been programmed to. if you’re important enough, it’ll even correct you, if you spell it wrong. It cannot help you with this, though:
But who knows? I might actually want to read what Bruce was writing about in September 2003. I can’t get there by tabbing, though :o) (hmm, I can see the campaign slogan, now: ‘Give me content, or give me carpal tunnel syndrome!’). In fact, ironically enough, he makes us use his search facility. Maybe we should all just ditch our site navigation just and create a network interlinked of search boxes?

Comment by Mo


Although you’re correct that page structure shouldn’t should be dictated by what’s right for users, not what’s right for robots, when the difference between two (or more) options is intangible for the users but makes a difference to the robots then, absolutely, you should optimise for the robots.

What it’s worth bearing in mind is that (a) the robots are designed to emulate the behaviours of humans (although how well they achieve that is variable both over time and between engines, of course), and what works well for humans often works very well for robots too, and that (b) on an awful lot of sites, the primary traffic source is the robots in the first place: if nobody can find your page, it doesn’t really matter how it’s structured.

My personal experience suggests that building human-oriented content-focussed well-structured pages works extremely well as far as search engine spiders are concerned, although there’s always plenty of fine-tuning that can be done for both humans and robots, and that’s all this debate really centers on: if all you’ve got left is content first, navigation second, or vice versa, then you’re going to do pretty well for both audiences whichever you choose—but that doesn’t stop you wanting to improve the experience of either, or both.

Comment by Rich

Honestly – I’ve never found that it’s made any difference to SEO. Not a significant enough difference to notice anyway, but then I’ve never worked on any really really big sites, just lots of corporate medium level ones and personal blogs etc. As a preference I always tend to go down the content > nav soucecode order, the sort out the layout with CSS etc.

More recently I’ve started inserting various bits of text into headers of sites using jQuery and AJAX – things like contact details etc. This way when the site’s crawled, non essential things like the phone number or ‘about us’ paragraphs that are sometimes common towards to top of every page of a site aren’t indexed and seen on every page by google, thereby diluting the genuine content of a page or been flagged as duplicate content. On the homepage or about us page I leave it in the original source so it’s indexed appropriately, but for the rest of the site’s pages I insert it dynamically by AJAX when needed. Again, I’m not sure how much of a difference that makes but it just seems like good practive to me?

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.