Order of Page Components
Published: | No Comments
Reading Time: 3 minutesIn this post we’ll look at how using CSS page layouts can free up web page layouts and allow us to make life easier for our users by placing the main content of the page nearer the top.
Some history
In the olden days of web development pages used to be laid out with HTML tables. This wasn’t of course the correct use of the <table> tag (which is meant for data tables), but it was the only real option if you wanted some structure for your pages.
Using this old layout method the order of the components of a typical page might be something like this. (The order that components appeared in the HTML is shown in brackets).
| Header (1) | ||
| Navigation Column (2) | Main Content (3) | Features, Promos or Sub Navigation (4) |
| Footer (5) | ||
Getting up to date
Using CSS for page layout frees you from that extra markup associated with tables and the potential accessibility issues if you didn’t use them carefully. Admittedly, CSS and floats and margins can get a bit counter-intuitive at times, and Internet Explorer’s non-compliance with web standards was/is frustrating. But once you got a page template that works it’s fairly easy to adapt it to most of the things you need to do.
Now, the order of the components on a page could be:
| Header (1) | ||
| Navigation Column (3) | Main Content (2) | Features, Promos or Sub Navigation (4) |
| Footer (5) | ||
or the order could even be:
| Header (1) | ||
| Navigation Column (4) | Main Content (2) | Features, Promos or Sub Navigation (3) |
| Footer (5) | ||
Obviously not all pages are structured in this way. Tabbed navigation across the top of pages has become a popular option.
But why is this important?
Visually on a laptop or desktop machine there is no real difference. But on mobile with smaller screens and slower connections it’s useful that actual content comes earlier in stream than the navigation links. Your users may start to see some real content while the rest of the page is loading. If you have a specific mobile theme or template for your site the navigation links can trail after the content.
There is a page psychology argument that says “I’ve arrived at a page, let me access the content first, then I can see where I want to go afterwards.” Having the content near the top is a way of addressing that argument.
Accessibility reasons too
Screen readers (used by people with visual and other impairments) work on the order of page items within the HTML stream – so content coming first is better for these users. They won’t have to trawl through your navigation links before getting to the content – especially important if your navigation has a lot of links in it.
On larger and more complex sites it may be useful to keep a breadcrumb trail at the top of the main content to help users orientate themselves within the site. See a previous post: Navigation – Where Are You?
So which is best?
Not everyone feels the same but I believe that placing the main content of the page before navigation links and promos/features is good from both a usability and an accessibility perspective. I think some of your users will thank you for doing it that way.
Those sites with tabbed navigation at the top of the page would seem to present a problem though. But some sites do put the tabbed navigation into the end of page HTML and use CSS and/or javascript to visually place the navigation at the top. These techniques do present other issues for an expanding site and a future post will look at the pros and cons of doing this.
Even if the content of a page comes earlier, the provision of skip links within your pages can still help your users jump to the navigation. See an earlier post: Providing Skip Links in Your Pages.
Got a view?
Please leave a comment.
Related Posts
Recent posts in the Accessibility category:
- Building Accessible WordPress Themes – Featured Images Apr 28th, 2019
- How to Build an Accessible WordPress Theme Apr 28th, 2019
- Accessibility Checklist Apr 7th, 2019
- Street Accessibility for the Blind in Vienna (Video) Jul 28th, 2016
- Instagram Accessibility Reduced by New Design May 18th, 2016
Share this page (Links open new windows/tabs)
There are no comments yet - would you like to leave one?
Like to leave a comment?
Please note: All comments are moderated before they will appear on this site.
Previous post: Providing Skip Links in Your Pages
Next post: Alternate Text for Images
