Source Order

This is a side-topic that’s come up with the recent updates to the skidoo layout. To achieve NN4/IE4 compatibility, I’ve had to move the right-column to appear second in the source (after the first column, before the third column).

Source ordering of columns is a topic that doesn’t seem to get covered a lot, but perhaps it’s something that should be more closely looked at.

Why should we even care about source ordering? The only people this will affect are text-based browsers, old browsers, and browsers that can’t handle CSS (primarily PDAs and other small-screen devices). There’s also another group of users that this is important to, screen readers, primarily used by those who have poor sight or are blind.

Those users make up maybe 1-3% of your user base, leaning more torwards the low end of that scale. So is such a small user base worth supporting? That is a topic for another discussion. For now let’s move forward with the thinking that, yes, we need to support these users (or at least make the effort).

So we need to look at source ordering.

Is it desirable to have the content appear first (among the 3 columns… masthead and hnav blocks will still appear before this content)?

I don’t know. That’s your decision. When I look at the way I would use the left and right columns, I see them acting, primarily, as navigational elements. In that case, I think they should appear before the main column.

Take the scenario: a user visits the homepage, looking to get to a sub-section of your website. Do you want to force them to page down through the content of your homepage just to get to the navigational elements that get them into the sub-sections? Or, do you provide that first, and keep the user from having to page through all that content?

But what about on those lower-level pages? The user is after content, not the navigational elements. So do you use an entirely separate HTML structure for those sub-pages? That seems a bit much. It’d require maintaining a completely separate set of stylesheets and layout template.

Instead, we could add an extra link to that hnav section, a link that lets users skip the navigational content and go straight to the content of the page. That link would be hidden from CSS-based browsers (by setting display:none). This gives users an option to jump straight to the content while still allowing the user to access the navigational content without having to scroll through the content.

(Conversely, you could add an element that jumps past the content to the navigational stuff… maybe that’s a personal preference, but I like it set up the way it currently is.)

So. What if you don’t use those columns for navigation? That third column is especially enticing to be used for something other than navigation, such as an index of articles on a blog. Maybe you add a skip link in hnav to jump to the third column’s content and at the top of the third column, a skip link to the content.

But in your implementation, in your content structure, it may not make logical sense to have that third column content come before the first column.

Well with skidoo you can do this, you can edit the HTML to move the third column to appear after the content. The only problem will be NN4 and IE4 support breaks. So you’d have to remove the v4.css link and NN4/IE4 users get a flat/plain text version of the document.

But what about getting that left-column to appear after the content? If you find a need to do this… hah, you’re on your own. I haven’t worked that out yet. Maybe I should.

bleh. i’m losing my train of thought. i’ve tried writing this post 3 or 4 times over the past week. this is probably the best i’ll get for now.

I’m really inrested in what you think. Who cares about source ordering, and what do you think? Should that content column come first? Is there a market or need for that? Please feel free to post your thoughts.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s