The separation of a web site into structural, presentational and behavioural layers is the key to making a usable, accessible and future proof web site, and the fact that CSS and unobtrusive Javascript allow us as developers to do this has been a major factor in the uptake of web standards. The reason this separation is so important lies in how it allows so many devices to access your data in so many ways. Mobile phones see a different version of your site to Safari, which sees a different version to JAWS yet all access the same mark-up and the same URL. Maintaining this separation intelligently is the key to allowing as many users as possible to access to your data using any means they want.
Many web developers are still falling quite short of this separation, not because they are using tables for layout, inline styling or obtrusive javascript but because they are ordering their mark-up not by how it is used but how they want it to appear. The structure layer of a web site should focus on enriching your content semantically to provide a user with the content they need in the most accessible way possible. This doesn’t just mean using suitable heading hierarchies, lists and labels but also ordering your content properly to provide suitable focus to the most important parts of the page.
Users who visit sites with devices that support limited or no CSS, or with devices that do not display your content visually do not see your content in the organised columns and colours that most do–they will be browsing your site in a single column ordered as your mark-up is and this often means they first receive a long list of navigation items, logos and introductory paragraphs when what they really want is the latest article, train time or number of goals Thierry has scored today.
There seems to be a growing trend for developers to include ’skip to content’ links as a solution to this problem. These links bypass the navigation and header elements and move the user straight to the content, but users still have to move around a page instead of being served what they want straight away. This technique also fails to account for other ways in which your data is accessed; search engines indexing your pages may rank prevalent content more highly for example, and they won’t use skip links to pursue the content you deem most important on the page. Although I am not an SEO expert I can’t believe that important, relevant elements at the top of a page won’t have more influence on a search engine in how it interprets the meaning of your site.
There are plenty of CSS techniques that can be used to separate your page structure from appearance, not least the excellent techniques devised at Position Is Everything for creating columns of mark-up positioned in any order on the canvas. Just remember that the most important column is the one containing what the users came for.
So far 4 people have argued with us about ‘Skip past content, not to it’. Read what they've said and then add to our woes using the form below.
Love what we’ve said? Think we’re talking nonsense? Don’t worry about being polite, just let us have it. We’re not afraid of telling you that you’re talking crap, so don’t be afraid of telling us the same.
I love what you’ve said. I don’t think you’re talking nonsense. Have it. You’re not talking crap, but I am.
Conclusion: Your call to action’s for a reply’s a bit wordy isn’t it?
(love the redesign by the way…)
What I wanted to say: Easier said than done.
I agree in what you’ve said, but it’s pretty tricky keeping the scale between accessibility and “prettiness” on the same level.
As a - well, I don’t want to brag here, just using it to describe someone - webartist, you dont’ want to lose that luxury of being able to “show off” a decent design job. Even if my design fails to look good in some media displays I still aim forwards making it look like I want to.
The small majority that is surfing my site with a palm or similar - sorry that it might not be easily readable, but that’s a glitch I’m compromising.
When time comes where everyone riding home in subways, busses or on the passengers seats of the boyfriends car has a palm in their hands and is surfing around the net, then I’ll definitely be willing to adjust and make my site readable on everything you might know of.
Until then, I guess it might just be to picky to neglect some design aspects because a handful of people can’t read what I have to say.
Peti - it may be easier said than done, but it’s not impossible. We (the Web Technology team at Cimex) have worked on some fairly graphically demanding sites, and I can say quite confidently that we all approach a project with the same mindset - if it’s absolutely impossible to make HTML and CSS do what the designers want, we will offer them guidance during the design phase in order to ensure that we can deliver on what we are proposing to the client, but it’s very rare that we cannot realise a finalised design as accessible, standards-compliant XHTML and CSS.
That being said, we clearly acknowledge that a site will not look the same in absolutely all browsers - that way lies madness ;-)
We build sites that look and work the same in a baseline of browsers, and degrade gracefully in older and more “esoteric” browsers - same code, same content, same essential function, but slightly different user experience.
We are in the minority though - we have the enviable position of being sought out precisely because we do produce lean, clean code and consider accessibility and usability as a core part of our work.
For some developers it is very difficult to justify what they view as “extra effort” in order to build in a forward-looking, accessible fashion - that may be because of contraints from those holding the purse strings, or a lack of understanding of the benefits of this approach by them or their employers. For us it’s part and parcel of the job - we simply do not produce inaccessible sites.
I’m sure it’s possible. I know it’s possbile.
But sometimes I just don’t think it’s worth the sweat and tears - it’s probably just laziness.
Enough said, though. You won. ;)