The "right way" to do "content first"


I want to know what is the right “best practice” way to do “content first” markup. Test case shows my method of doing it, but not sure if it’s the “right way” to do it. Search on this particular topic doesn’t yield a solid example.

TEST CASE: Test Case link

Here there are 3 block elements i.e. #sidebar (ul), Content (div), and #advertisement (div). Right now the way I do this is floating all of them to left except #advertisement (which if floated to right), and both #sidebar and Content are positioned relatively through left and right properties. Please view the source of the page.

This does work, but I want to do it the “right way” in case this is not the appropriate method to do this.

Thanks in advance. :slight_smile:

Screen reader users will expect skip-links to pick where they wish to go in the page.

Screen reader users will expect the page they are on to be like 99% of the web. In fact, most users expect that. Since most pages have navigation before content, that is what most people expect. Skip links are a nice extra (except in Opera where they don’t freaking work if you’re hiding them), but anyone with something as powerful as a screen reader can freely move about the page as anyone, provided the author actually correctly structured their pages (proper elements for type of content).

It’s so way easier to hit the H key than to play around with skip links, really. And better: you can jump to any type of content based on what it is: forms, lists, tables, non-link text…
I make skip links for sighted keyboarders not using Opera, because they are unlikely to have anything as awesome as a screen reader.

It shouldn’t make any difference what the element is as CSS doesn’t really care if it’s a ul, div or table (depending of course on exactly what you are doing to them) . I’d need to see an example in case its a bug of some sort or perhaps I’m misunderstanding the problem a little.

Looks perfectly fine to me.

You might want to consider screen reader users when doing “content first” by providing some skip links, so they can quickly find the main navigation without having to wade through the page content first.

When it boils down to it, it doesn’t matter if you have navigation or content first, search engines are very good at finding relevant text content.

I will have to do some research on “Skip Links” cause I haven’t the faintest idea how to implement those. Anyway, using margins for IE 7 alone seemed to solve the problem with zoom. Using margins instead of relative positioning gives completely undesired result on IE6 (line breaks occur for some reason, so relative positioning seem to work best) and slightly undesired result on Opera 9.0 (the sidebar doesn’t stick fully to the left as in others browsers). I rather use margins for all browsers and relative positioning for IE6 because of the mentioned problem, but because of the undesired result in Opera 9.0 I had to use relative optioning for all browses except IE7. If it’s a opera bug and anyone has workarounds, please feel free to suggest them.

In the above scenario, using margins for IE7 alone solves all problems and works as intended cross-browser. However, assume sidebar is still UL, but Content and #advertisement are tables now. I’m not able to move #sidebar past Content now, but when Content was div I was able to. Any suggestions?

note: time to edit has expired, hence posting as a new reply.

Yes, that’s one way to do it and is the same as I mentioned in a very old demo here. There is a small problem with IE7 using that method when using zoom as it seems to misplace the columns a little. You could use negative margins to achieve the same effect instead of relative positioning and avoid the zoom issue -although it’s not really that big an issue.

There seems to be a great deal of doubt as to whether having content first has any real seo benefit on well constructed and sensible code and I tend not to do things if the only reason for doing it is SEO related.

I like do NAV fist, but use CSS to hide a “skip nav” link before the nav list. That would mean that , when CSS if off ,you are one click away from the content but can easily navigate through the site at the top of any page.

While we’re on the topic, what are the best available 2-1-3 (content first) layouts available that also support faux columns?

Content first may not have too many SEO benefits, but the accessibility benefits are well established. I recommend having skip-links, then the content, then the navigation. Screen reader users will expect skip-links to pick where they wish to go in the page. Having navigation first means the repeating of the same information on every page load and while having skip-links first may seem like a resolution it’s better to have navigation at the end of the document so that once they have finished reading the content, the navigation acts as a “where next” schema and if the user doesn’t want to read anymore content then they can just jump to the end of the page where the navigation is. Essentially, skip-links always come first, then the fresh material (content), then the directions for post reading. :slight_smile:

Really sorry about that, I was calculating the margin values wrong. It is working as intended.

Anyway, setting that aside, is there an Opera 9.0 bug relating to (negative) margins on floated elements?

IIRC correctly opera 9 does have some bugs with negative margins and position:relative in some cases. However, it’s probably not worth worrying about as Opera users are mostly fanatics who upgrade every time the refrigerator light goes on.

I only really test in the latest versions of opera because although it is an advanced browser it is also a browser which usually breaks something different on every iteration.