CSS and Containers versus Tables: No Contest
Thameslink's original website14 Years ago I was an IT manager working for Thameslink Trains, then a part of British Railways as it was before privatisation. The closest I came to web design was installing a copy of Ventura Publisher on a 16Mb 486 with a 40Mb harddrive and 16-colour VGA screen. The Internet was yet to be but I hit the bulletin Boards with a vengeance using a 1200 baud modem.
Table-Free Website
Time passes and I had recent occasion to visit their website. The general layout was clean and the content well presented, easily navigable and informative but when I took a look under the bonnet I was disenchanted. The markup comprised tables almost in entirety. Admittedly there was a CSS (Cascading Style Sheets) file referenced but it too was overweight. Were it not my recent contributions to an accessibility and standards list regarding the merits of container versus table-based layout I might have grunted and moved on. As it was I spend most of a Friday night developing a table-free index (home) page, the results of which are seen as the left lower thumbnail, almost identical bar a rotating header in the live site.
Update: Thamelink recently redesigned their website (mid-May 2005) (I've uploaded the original index page but don't have the revisions - but the general comparison remains valid). Sadly, it remains a table design with masses of inline font declarations, presentation spacer gifs ... what a shame. With hindsight, I should have contacted them directly and offered our services. Ah well, looks like I'll have to rebuild it again once I find a little time ...
Recently: Thamelink lost their contract to First Capital Connect back in April 2006 (sounds like a bank - and such is the way with the new railways) and these new masters seem to have made good inroads into compliant development. The new site is not perfect but it at least has dropped the love of tables and are making inroads into compliant development.
Thameslink's tableless home pageWhy bother, you may ask? Because it was a prime candidate for conversion to containers due to the sheer volume of tables used. The original page weighed in at 23Kb plus 9Kb of CSS, the tableless version a mere 12Kb with 3Kb of CSS. That's less than half the total size. Such markup savings are not unusual and are generally around the 60% mark. On a heavily visited site bandwidth savings are considerable, even with server compression the savings remain relative. One might argue such savings inconsequential to a £160 million turnover train service company; ask a small business with a popular product or service and monthly bandwidth costs greedily eat away at a limited budget.
Display Rendering Delays
As well as the protracted download time, tables also present challenges at the client end. Browsers must use recursive calculations to determine the width and height of tables before they can be displayed. This time is increased to a noticeable lag when complex nested table layouts are employed, whereafter the page suddenly springs into the window once sizing is completed. In contrast, container or <div> based design is interpreted linearly by browsers, making for far more swift page rendering.
Web Design Benefits
The benefits of tableless design are not simply restricted to enhanced download and rendering. Shedding tables and the paradigm shift this encourages leads one to re-evaluate development perspectives and presents if not, arguably, better design, certainly greater design opportunities given the hitherto unrealised wealth of control unleashed. This is not to say that Thameslink's design is poor, and neither is this an underhand opportunity to slight a fellow webmaster's work. As I commented above, the design, accessibility and useability are far superior to many designs I have encountered — including CSS-presented container marked-up sites. This is simply an exposition of the benefits of tableless design and an effort to encourage the take up of container and CSS development — modern website design and development practice.
CSS-supported container design is a fundamental step forward in website development: the separation of presentation from not merely content but from content delivery.
Device Independence
The move towards X[HT]ML (eXtensible [HyperText] Markup Language) and pure content data streams makes for not merely browser independent content delivery but heralds in the era of true device independent development. With the revision of XHTML to version 2 and CSS from 2.1 to 3, development standards will unify and the disparate rendering engines from the numerous handheld devices like PDAs (personal digital assistants) and mobile phones, tablet PCs and flexible display sheets will converge and consolidate. But that's a little way down the road ...
For the present it's enough to endorse the efforts the W3C are making and look at further practical container-based development benefits.
Comprehension and Maintenance
From a developer perspective tableless designs are more readily understood and serviceable. As can be seen, the source code for the two versions are markedly different. The container version is much easier to comprehend and therefore maintain and brings with it a clean, easily interpreted structure. Apart from presenting a stable design, multi-developer teams are less prone to overlap errors as containers can be isolated and worked upon independently and their behaviour predetermined by replicating prefabricated structures established through CSS. And it's a pure delight for a legacy developer to work on.
Efficient Redesign
Another aspect of container design, one which will satisfy designers, is the ability to radically alter the look and feel of a website entirely from within CSS. Elements may not only be recoloured and resized but repositioned in and out of the document flow at will. Sure, there will be constraints but the better thought out the initial framework and functionality, the easier it is to accommodate design changes at later stages in development and after delivery. Hence the recent rapid development and deployment of core content management systems (CMS), made eminently more practicable though CSS/container web design take-up.
Search Engine Benefits
There is another incidental yet lucrative benefit to business: better SERPs (search engine results pages) placement. Cleaner, tighter, logical and more spartan code means text content is more readily available to web crawlers. There is even a suggestion search engine algorithms award well-designed, semantically correct sites inflated rank, although I have seen no evidence to support this, unless it be such well designed sites originate from a smarter mind. Nevertheless, there is no denying container sites have the potential to do well given their content can easily be positioned towards the head of the page and thus deemed immediately more relevant.
Container Paradigm Shift
In terms of performance, legibility, maintenance, extensibility, functionality, accessibility and web visibility container-based development wins hands down over archaic table-based design. Yes, there are frustrations with the current implementation of CSS - 100% vertical stretching, twitchy cross-browser columnar layouts, collapsing margins, vanishing borders and a few more - but these are no more than niggles and are more to do with (sometimes intentional) browser misinterpretation and rendering of CSS guidelines as they are genuine failings. CSS container-based website development is here to stay. Embrace it. It's a difficult journey for some entrenched or intransigent developers but I believe it's simply a question of adopting a new mindset and making the paradigm shift.
