@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.
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!
Standards-based strategies for building designs that provide flexibility, readability, and user control--key components.
10 web design lessons from 10 of the worlds best web designers: cutting-edge XHTML, CSS, and DOM scripting techniques.
Leave a Comment
Comments are closed.