So called web standards-compliant coding using XHTML and CSS is being touted as the way of the future for web design and more and more people adopt the new methods and practices by the day. However CSS introduces a less than intuitive way to think about page layout which makes it hard to adopt and is also why web designers still use tables for layout. In this article I will cover some recent web design history, discuss why designers think with tables and why the CSS formatting model is not as intuitive as it should be.

The first ten years of design on the World Wide Web

The Internet has seen an explosive growth, from being an underground phenomenon to becoming something everyone in the industrialized world depends on in one way or another. One of the most used Internet technologies is the World Wide Web, or just the web which consists of millions of web sites and documents all coded in the document markup language known as HTML. In fact you are using the World Wide Web right now to display this article.

The use of HTML to build web sites has changed dramatically ever since its inception some 18 years ago and its development was during its first ten years controlled by web browser software designers rather than the standards created by the World Wide Web Consortium, an organization founded to define and promote standards for the WWW. The result has been that browsers have interpreted HTML in very different ways which has caused an endless headache for people whose job it is to design web sites and make sure information is presented consistently online.

The hypertext markup language, or HTML, is a way to classify and structure information in order to store and share it. This markup language has one very interesting property, which for a long time in the early pioneering days of the web went largely unnoticed. This property is called semantic classification and allows you to classify information based on its meaning. A properly marked up document will have all text considered to be headlines marked as headlines. A headline is more than a line often in bold, large font, it also has a different meaning compared to a paragraph, and this distinction can be coded in the HTML.

When HTML was thought out and implemented at the CERN research facility in Switzerland in the late 80s there was no need for advanced text formatting, or any need to do graphic design. It was designed for a small system, intended to be used by the researchers alone. As HTML and the World Wide Web were introduced to the general population the needs changed. People wanted fancy, attractive websites that were colorful, had different type faces (or fonts) and images embedded a lot like the magazines they were used to reading. In order to satisfy this need, web designers were forced to be creative using what little HTML offered in terms of graphic design. Browser software designers and manufacturers such as Netscape and Microsoft, were quick to give them what they wanted and soon there were tags (pieces of code) to set the font face, size and color and even create blinking text. Microsoft decided to omit support for the latter, by some people sardonically commented to be the only positive contribution Microsoft has even done to WWW technologies.

Tables, formerly a web designers best friend

When Netscape introduced the table tag, originally intended to be used for tabular data, such as statistics, web designers had the tool they had been looking for to create page layouts and web designers started creating advanced page layouts. By nesting tables in each other and using images you could make rounded corners or create advanced layered backgrounds for elements. By using so called spacer images you could make sure elements were position the same way in all browsers, a nice way of getting around the a lot of quirky browser behavior since every browser had its own way of doing things.

Now, as some of you probably know there was a problem with this, the table tag, just like most other tags, was intended to be semantic, it was intended to reflect the meaning of the content it wrapped but was most often used for nothing but presentation. The result was that tags lost their semantic use and people who were visually impaired and relied on speech readers had a lot more problem browsing the web. Not only that, it made indexing and searching the web a lot slower and harder since search engines had to figure out what of the HTML code was meant for presentation and what was meant to be actual content.

Standards and Semantics

The web standards movement, initiated by people tired of browsers that didnt work the way standards dictated and had their own way of displaying content online, is working for the return to coding according to standards. Coding according to standards today means more than just using tags that are in the standard, avoiding proprietary tags introduced by browser manufacturers, it means separating presentation from content and use HTML for semantic classification. In order to meet the demand from designers to allow advanced graphic design on the web, CSS was developed in the latest 90�s. Standing for Cascading Style Sheets, it allows the designer to put all formatting rules in one document while storing the content in another, making sure they arent mixed and that presentation does not mix with semantic structure or vice versa.

Why CSS is a flawed technology

Cascading Style Sheets introduce a new way of thinking about how a pages layout is constructed, it introduces several key terms that refer to how an element on a web page is position in relation to another. I will not explain CSS in this article as it is beyond its scope, but suffice to say the design thinking behind CSS is not like that of traditional graphic and print design, or rather intuitive either for that sake. CSS was created by software engineers, and with all due respect my dear programmers and Linux kernel freaks, software engineers generally do not do good design or understand how to best present information in an aesthetically pleasing and usable manner. The result was that CSS became hard to grasp, hard to learn and even hard to implement.

It would appear that CSS is inherently flawed in several aspects and the design and implementation of CSS was done without considering usability, information design or cognitive psychology. In short what we know about how people perceive, structure and design information was disregarded when CSS was thought out and the specifications for it were written. The CSS formatting model is poorly abstracted as it is based on how the browser works technically and how browsers are coded and designed to interpret and display web pages instead of how pages are designed and used.

The whys of the popularity of tables and grids for layout

Despite their shortcomings, tables were popular for several reasons. First of all, layouts based on tables displayed surprisingly consistent in different browser and across different platforms. But secondly, Ill argue, most importantly, tables were more intuitive and represented a thousands year old way to think about the display of printed information. Designers loved tables because it allowed them to work the way they were taught, schooled and used to think about page layout and text formatting.

Using tables it is very easy to create a so called layout grids, a text layout which can be observed in ancient Egyptian scrolls and in the first books printed by Gutenberg. Using grids for layout isnt just something that we have done for thousands of years, it is a design pattern we learn the day we see printed media, not to mention learn how to read and as such affect not only how designers think but also how every member of a modern culture thinks. In fact, grids seem to be the most fundamental principle of human structural layout.

Yet, ironically, creating a layout grid with CSS that works across browsers is an enormous challenge that has taken hundreds of attempts and several years to manage. There are several reasons as to why it poses such a challenge for a traditional print media designer.

• First of all, understanding CSS well enough to create this, the most basic of all graphic design patterns isnt easy, it is hard, you need to understand a way to position elements that has very little to do with classical graphic design. CSS works this way, contrary to design intuition; it was built this way even though the people who are meant to be using the technology are indeed designers.
  
• Secondly, since the Internet Explorer browser was developed according to broken and incorrect models of how CSS works, it will also require an understanding of cross-browser CSS rendering.
  

The future of web design

Despite its flawed implementation and design, CSS allows us to effectively separate content from presentation and build a semantic web where information is structured in a way that makes it accessible, transferable and indexable and provides a storage format that is future-proof. This an enormous benefit as it makes the Internet more usable and more valuable.

Considering this, traditional HTML tables are not an option, they are not suitable as they are not compatible with the semantic web. What is necessary now is to rethink how CSS should work and extend the CSS standard to allow designers to use CSS to quickly and easily build grid-based layouts in an intuitive, natural and effective way instead of forcing them to learn a formatting model which is the result of poor abstraction, a model that is based on the technical implementation of a browser rather than how web pages are designed in reality.

Cascading Style Sheets already offer ways to display elements arranged like tables, something much akin to how grid layouts and constructed, but it is not yet supported by Internet Explorer, that browser that most web designers love to hate. In order to make the semantic web a reality and spearhead the future of the semantic World Wide Web, making grid layouts with CSS must be easier and must be better supported by browsers and standards.

Trackback URL for this post: