Wednesday, March 12, 2008

Written by Richard MacManus

Sometimes when you talk to a professional web developer you'll hear the phrases 'CSS layout' and 'Tables Layout'. Without knowing something of the history of web development these phrases would be meaningless to you which is why I'm going to talk about them today as they happen to be quite important.

Back in the mists of time there was HTML. HTML was the basic programming language used to create websites and since there was only one major web browser on the scene all web pages were built in HTML to look good with this browser. Because HTML was young and basic the best way to achieve complex layouts was to use something called the table tag. The table tag was very flexible and allowed the programmer to create tables where each table cell contained text or graphics or both. With a bit of ingenuity, patience and imagination, increadibly complex designes could be built using this method.

But as time went on other web browsers became popular and each had subtly different ways of 'rendering' the HTML and tables. Because the browsers were in competition with each other they each added different features and extentions which were not part of the official standards and the rendering differences between the browsers grew greater and greater. Problems also became apparent with maintaining sites with complex table layouts and browsers for blind people (commonly called screen readers) had major problems disiphering and distilling these sites in a meaningful way. Eventually, the 'Browser Wars' as they were known back then were won by Microsoft and its Internet Explorer browser. This had the effect of killing innovation dead and for a while we were left with horrible table layouts and bad standards support.

To present day
When it seemed all was lost a number of crucial things happened. With its dying breath Netscape (the other major player in the browser wars) won an Antitrust case again Microsoft. This had the effect of creating enough breathing space in the browser market for competitors to re-appear and three new browsers began to gain a foothold, Mozilla's Firefox, Apple's Safari and Opera's Opera browser.

At the same time the standards organisation W3C (World Wide Web Consortium) began to re-assert its authority in the face of calls for better support for screen readers and disabled internet users. This new round of standards were called Cascading Styles Sheets (CSS) and xHTML and were aimed at providing a more descriptive way of building complex web layouts without sacrificing accessiblity, effectively allowing developers to totally separate content from appearance.

This provided a common cause for Microsoft's competitors to champion and before long the only browser not doing CSS and xHTML properly was Microsoft's Internet Explorer. Microsoft finally stared to fix this deficiency with IE7 in 2007 and they promise to be fully compliant by the end of 2008 with IE8 but its taken a 15% drop in market share for this to happen.

Thanks for the history lesson but what does this mean?
So thats the history but what does it mean to you? Well, as you might have guessed its common opinion that CSS/xHTML is good and that Tables and HTML4 is bad. This is for several reasons:

  • CSS/xHTML when done right will be more more accessible to people with disabilities
  • Because CSS/xHTML is a rigidly defined standard, your page should always look the same across standards compliant browsers (providing its built correctly)
  • Theoretically it should be easier to completely change the appearance ofa CSS/xHTML website without modifying content or the actual webpages thus making CSS/xHTML site much more maintainable.

So why do developers still do table layouts if CSS is so great? Well its a complex issue, many developers have learned their Tables skills through years of hard work coaxing the different browsers to do the right thing. CSS is a fundimentally different way of building websites and as such Tables based skills are next to useless. Busy web developers are understandably reluctant to throw away their hard earned skills and start again, this costs them time, money and possibly reputation as they re-learn their trade.

Fine you say, if its so difficult to change then why cant we just have both? The problem here is that because the two approaches are so different from each other, if a site is built in Tables in this day and age it is already effectively obsolete and will NOT be maintainable in a couple of years time. Right now all new sites should be being built to the standards, this will help Microsoft and other vendors make their products more standards compliant which in turn will make life easier not only for web developers but for users with disabilities and ultimately for all of us.

What should I do with this information?
When deciding who you want to help you build your new website make sure you ask them if they build in CSS or Tables and if they answer that they use CSS then ask them to show you a site they have built that validates. A validator is a tool which examines a website and checks for errors against the standards, ideally a website should validate but if it fails on minor errors its not the end of the world. In general, the closer a site sticks to the standards the better it will look across browsers and the more users you'll have access to. Your site will also be able to be much more clever incorporating things like animation and better interactivety with the user.


As always if you have any questions, comments or disagreements with what I've said here then drop me a line!

http://www.jamesburrows.info

No comments: