Clearer Web Design: Separating Content and Design

As I have recently started work as a web developer, I have been exposed to many more examples of how websites can be constructed, both at work, and online when I am looking for inspiration and solutions to problems that I’m having. Web development seems to be a task that can allow many bad habits to form as there are many ways of coercing a browser to lay out your web page according to the design you want. When you are under time constraints, or if you’re just starting in web development, it’s tempting to take what initially appears to be the easy path. However, building a website the wrong way is like building a house with a crumbling foundation. As soon as you want to change anything the whole house falls down which causes much more grief than if you had built the foundation properly in the first place.

I could list many of these ‘shortcuts’ and poor development practices but today I want to focus on the classic argument of whether to use content elements such as divs, or using table elements for layout purposes. People argue vehemently from each camp, the supporters of tables arguing that tables are simpler and that if the end product is the same, it shouldn’t matter how you code your web page if the average audience member won’t see the source. Supporters of using the content elements argue that the content should be separate from the style to allow rapid changes to layout and design among other things. However, many people take it too far and think that the use of the table elements are completely discouraged and will make their life harder by creating strange nested div layouts to display the tabular data the table element is designed for. I think it all comes down to a big misunderstanding of the way a web site should be constructed.

A web page is not just a big table with invisible borders or a big image, it is primarily a document. If you think about the way you write a book, you write the content first and then you divide it up into sections and headings but in the first stages you are primarily concerned with the content. You then take your manuscript to a publisher and they apply a layout or style to your content to create the final book. Building a web page is exactly the same idea, you write the content you want to convey to your audience and divide it up into logical sections and afterwards you apply a style to it which can be altered at anytime without having to mess with the content at all.

A perfect example of the separation of content and style being a boon is when you want to use the same content in different situations. For example, your web page could be viewed on a smartphone, tablet or even printed, each having different layouts and styles. Tables do not allow for this kind of flexibility. Another example is screen readers for the vision impaired. If your content is separated from the layout the screen readers can easily pick out the relevant information and ignore the style which just gets in the way.

Below I put an example of the same web page laid out using content tags and tables. It’s clear that separating the content from the layout produces much more readable code. A screen reader could easily traverse the example on the left and know the context of the content, but would have a hard time working out how the content fits together in the table layout.  If at any time I wanted to change the layout of  the left example, I could simply change a definition in the CSS file and the content wouldn’t have to be touched. For a great example of this see the CSS Zen Garden

An example of website layout syntax.

An example of the same web page using content tags (left) and tables (right).

In this golden age of information we need to make sure that information is presentable and easily accessible. It is no longer the 90’s, the standards are there and there is an abundance of information on how to write web sites properly that you can find easily with a quick web search.  For more examples of why tables should only be used for tabular data, check out this website, a great introduction to these principles that goes into much more depth than I did.