Using flexible CSS layouts to keep your content in order of priority

As you probably already know keeping the content in order of priority improves the accessibility of your pages.

This has been declared in WCAG 2.0, published as a W3C Recommendation on December 11th, 2008, where Guideline 1.3 states that we should always create content that can be presented in different ways (for example simpler layout) without losing information or structure.

The easiest way to meet this guideline is to develop our websites starting from a good semantic XHTML structure. We should organize the code so that the most important content always comes as close to the top of the page as possible. Once we have the structure we can then use CSS to change the presentation. But content has to come first. As you know on the Internet content is king and always will be.

The main issue with this approach is that sometime it’s not that easy to get the positioning we need without moving bits of XHTML around. Obviously this practice could mess up the content order, jeopardizing the accessibility of the page.

Dan Johnson published a cool article on how to use CSS floats to achieve any column layout, while keeping the most relevant content highest on the page.

In his example, he uses the exact same HTML markup to create six different layouts by the clever use of CSS styles. This is a great sample of how we can get the design we need, keeping the content in order of priority and safeguarding accessibility.

Try it out!

Leave a Comment

Comments are closed.



News and Articles

@media 2009 London

One day to go! What is considered one of the most intriguing and awe-inspiring web events around, will take place in London on Tue 25th and Fri 26th.

12 examples of mind-blowing websites

Web designers struggle every day to create impressive and usable websites, but what makes the difference between a good and functional product and a mind-blowing one?

News and articles archives

Recommended Books

Bulletproof Web Design

Bulletproof Web DesignStandards-based strategies for building designs that provide flexibility, readability, and user control--key components.

Web Standards Creativity

Web Standards Creativity10 web design lessons from 10 of the worlds best web designers: cutting-edge XHTML, CSS, and DOM scripting techniques.

Recommended books archives