By its very nature, design is about constraints. Clients, budgets, messages, gamuts; without constraints, a design could not take form. On the Internet we lose some of the traditional constraints, but gain others.
Bandwidth, resolution and browser compatibility are all things that web designers have to struggle with daily. These are immovable barriers imposed upon us and out of our control, but there are also restrictions that we place upon ourselves, restrictions that we are free to release. Take tables, for instance.
Tables, crippling the Internet
Ever since Dave Siegel first laid claim to bastardizing a data table for his own visual design purposes, tables have become a ubiquitous tool for web page layout. They are so deeply woven into the fabric of the Web that software companies have made small fortunes in delivering tools that can help us decipher the endless morass of quadruple nested <td>s and spacer gifs.
They work perfectly for what they’re meant to do – make things line up. But they’re crippling the Internet.
Content is king
If there’s one thing that the success of Google has shown us, it is that on the Internet, information is king. We devour information at astounding rates and Google et al feed us the sustenance which we need.
The rise of RSS – an almost pure data stream – has highlighted the notion that information is powerful enough to survive on its own. It transcends attempts to subjugate it into just one manner of appearance. It adapts to a multitude of environments.
Structure and flexibility
It is a fine balance, however. Structure is certainly needed to enable a basic understanding of data – for without structure the data itself would be unreadable – but with each successive layer of structure that we introduce into our data, we reduce its flexibility.
For instance, if you consider this article the words themselves are irreducible (unless we want to get more granular than that, but this certainly isn’t a study of linguistics), but the manner in which they are stored imposes barriers upon their usage.
If I click “save” in MS Word, I commit the words to a structure which very few other applications can understand. Web browsers certainly can’t. The same comparison can be drawn with HTML.
The semantics of HTML enable structure to be inferred from its markup – paragraphs, headings, lists, links, etc. – because without that structure, the text would be meaningless. But to preserve the flexibility of that data, a line must be drawn to divide the necessary from the unnecessary, that prevents the data from specifying the method of its own display.
The restriction of tables
The use of tables for positioning in HTML is purely for visual layout. No other reason. They allow a logo to be placed at the top, a menu to be placed on the left, content on the right, a footer at the bottom. You load the HTML into your 800 x 600 web browser and everything looks fine – a web page as it’s meant to be.
But what if you load it up on your PDA? What if a blind user has it read out to them? What does Googlebot see when it comes to visit? And what happens when you have to move that menu to the top?
In each of those cases, your HTML fails. Your tables are only built for one thing – desktop browsers that are 800 to 1600 pixels wide. Your tables are holding back the full potential of the Internet. And why? Why, when there’s a solution that works now, are you reinforcing a restrictive way of working?
Logical progression, enter CSS
As the Internet matures, it is only natural that the technologies it utilizes do the same. Tables sprung out of a need that was not met by the technology available at the time, but since then the Internet has shifted from a static, page-based model to include dynamic interaction, applications, data feeds, web crawlers and much more.
We are already feeling the limitations imposed by an ad hoc solution, so doesn’t it make sense to move to a framework which fully considers future compatibility and provides the most flexible framework possible?
Since 1996, technologies and standards have been developed and refined to address the very issues that tables were misappropriated for. The Internet’s standards body – the W3C – created a set of guidelines that embody the division of data and appearance.
Cascading stylesheets (CSS), paired with your choice of data format – HTML, XHTML or XML – allow the independent styling and layout of web pages with unprecedented control. By taking cues from established areas of industry such as software engineering, the W3C’s standards have provided us with the means to skip the same problems that those industries experienced and ensure the unimpeded growth of our medium.
These standards take a step back from table-based layout and ask, “Why do we need to constrain the structure of our data so that it can be viewed only one way? Why not have them all?”
Object oriented programming is a well-established standard of best practice in the software development industry, and focuses largely on the independence, reusability and maintainability of separate modules.
As conscientious developers we use these techniques all the time to increase efficiency and improve the development lifecycle, whether it be in .Net, PHP or ActionScript. Yet it is strange that the same principles have been resisted once the code leaves our servers.
Web standards are a direct application of 0bject oriented principles – they allow us to independently maintain the data from its appearance.
The CSS Zen Garden is the de facto example of how the exact same markup can be used to produce wildly varying visual layouts by just changing the CSS. Alongside showcase sites such as the Web Standards Awards and the CSS Vault, it is also a great example of the power of standards, in that virtually any layout achievable using traditional tables is possible using standards. And in some cases standards-based designs are capable of some layouts that tables aren’t.
Some people still continue to hold onto the belief that support for table-less design is still rather sketchy, but while they have been looking the other way the browser market has quickly adapted to the new standards, and we now operate in an environment of over 90% compliance.
Granted, there are some inconsistencies between browsers, but these existed for tables and will always exist where different vendors try to co-exist. Thanks to a thriving community of standards-supporting developers, there exist solutions to most, if not all, of these inconsistencies.
Being a part of the future
Of course, Web standards seem different and unusual when you first approach them with a head full of table-based solutions, but what else would you expect? It’s a different way of working, but an undeniably better way. You just have to un-learn the obsolete table shortcuts which you now regurgitate by rote and replace them with the foundations a more efficient and sustainable paradigm.
It is no longer a question of whether it’s worthwhile to support standards, it is a question of whether you wish to be a part of the Internet’s future.
About the author, Cameron Adams
Cameron Adams is a freelance designer based in Melbourne, Australia. As co-founder and judge of the Web Standards Awards he has helped to raise the awareness of standards-based design across the Internet, and continues to preach the marriage of beautiful design with beautiful code on his respected weblog, The Man in Blue.
Cameron has managed to apply his knowledge to projects for Government departments, large corporations and tiny businesses -- he doesn’t discriminate on the need for good web design.