One question I get asked a lot by managers, clients and other associates is: "Why is clean markup important? Search engines just see the text, right?"
Lots of people don't understand the benefit of table-less designs. Now there are thousands of lectures all across the Internet explaining why CSS is better, so I'm not going to start another one here. However, I am going to discuss what the legal and marketing impacts are on having a proprietary, out-of-date design.
CSS is designed to separate presentational instructions from the actual content of the page. This makes the design easy to maintain and/or re-write if necessary - the CSS Zen Garden is the best example of this I've come across so far.
By separating markup from content, we are left with just a plain text page, with a couple of heading tags here and there, and maybe the odd list (see the markup of this page if you want!). For people who are visually impaired, this is what they want to see - or rather, what their screen-reader wants to read to them.
Suddenly your site is accessible. You have fulfilled a basic legal requirement under law both in the United Kingdom and the USA. In the United Kingdom, your site is accessible according to the Disability Discrimination Act, and in the USA your site is compliant with USC Section 508. Worldwide, the W3C sets the guidelines on web accessibility.
However, when we're using old-school table-based designs, we come across a number of problems:
- Tables are for tabular data.
The whole point of the <table> tag is to display tabular data - be it stats, charts, numbers, measurements, whatever. It was not designed for holding layout and this causes confusion to screen readers and search engines.
- Size and performance is everything.
No, we're not talking about the contents of a Carry On Coding film (that could be quite a good idea actually...), but that by separating the presentational code (CSS) out from the content (HTML), your HTML file is smaller, and your CSS is re-usable - and it gets cached on the client browser. This is great for performance because your browser doesn't have to download presentational data with every page - just once with the whole site. As a result, bandwidth charges reduce, and you save money.
- Search engines can find you. If they find you, customers find you through them.
This is a key issue which has been discussed over and over again, because search engines don't release their user agent algorithms that they use to crawl websites. The crux is, the search engine is just like a blind person. If it has to wade through lines and lines of presentational table-based markup ("fluff" as I like to call it) then it's going to think that the word distribution count is lower than average (more markup on average per word = less emphasis on the words of the page) and therefore the site has a lower ranking.
Whereas, if I have a presentation-free file, which is done using pure CSS (such as this site), then a search engine is going to take much less time to find appropriate keywords on the page. Better search ranking = more customers find me = more money.
Hopefully that's a good primer as to why tables are defunct in your web design strategies. Ultimately, CSS-based designs save time (code re-use and re-design), and save money (time to design, and bandwidth charges).
Yes, there's the ever-present problem of browsers which are just plain rubbish at rendering CSS (think IE6, IE7 here?), but these problems are almost behind us with the latest IE8 beta 2 being launched a little while ago. When IE8 comes to market, I think CSS designs will be ready to show the world how sites on the Net should comply.
Microsoft's problem
Not Google this time - web developers. When ASP.NET came out with all it's fancy server-side controls, web developers screamed for SEO and compliance from the rooftops. ASP.NET's controls were rendered using client-side Javascript which just didn't cut it. Javascript menus aren't read by search engines, which is why the humble <ul> came into prominence with Suckerfish-style menus.
So Microsoft sat back and listened again. And they released a bunch of CSS-friendly server-side controls for the most commonly-used ones (like menus etc.).
The project can be found here and I use it as an alternative menu to the DotNetNuke-incorporated Solution Partners' pure-Javascript menu.
It also contains a CSS-friendly TreeView control for other hierarchical data structures.
In my next blog entry, I'm going to be taking the CSS friendly adapters and turning them into free and open-source DotNetNuke modules.
Benjamin