Article

CSS devs are king

Using tables to create web pages appears to be a thing of the past. Since the advent of CSS divs are king and the humble table used for page design appears to have gone the way of the dodo.

Back when I started creating content for web pages we put everything into tables.

If I wanted a three column page with a menu across the top, links down the left-hand side and additional information highlighted at the right I would create a table as follows:

Main menu Option 1 Option 2 Option 3
Secondary menu        

Sub Option 1
Sub Option 2
Sub Option 3

Sub Option n

         

Main body of the page goes here

         

Highlighted part here

and put my HTML directly into the table cells.

It doesn’t work like that any more.

True, there are still thousands of sites out there using tables to display their data, but the advent of CSS and divs and spans has heralded a new era in web design.

The www.csszengarden.com site shows the way.

The Diary, by Alexander Shabuniewicz is totally different to, say, Ray Henry’s Zen City Morning.

Exactly the same HTML data is displayed on both pages. The only thing that has changed is the CSS that is used to produce it, and the pictures.  The underlying page has not been touched.

(Those of us who use Word Press might recognise similar functionality through the use of themes, but it is not the same. Wordpress themes often do change the underlying pages, these do not, they are totally driven by the CSS.)

What does this mean for technical writers?

Firstly, the content is totally separated from design.

This means that you can concentrate on what you are good at—writing the words—and let someone else worry about the look and feel.

Secondly, it allows reusability. All you need to do is produce a document once.  It can then be badged according to each company you produce it for.

One set of proofing, one set of reviews. The only thing you need to duplicate is the final copy, when you attach the appropriate company style sheet.

Everything is controlled from the stylesheet.  Everything.

Yes, you can get the same effect by creating tables in the HTML and placing your data onto the HTML page.

Using tables is actually a lot simpler.

I really struggled to set up the divs on our home page www.infinitediversity.com.au, for example. I was tempted to go back to tables because I knew it would work. I knew I could be finished in an hour, instead of the four hours it took me to get it right (and it’s still not 100%), but if I ever want to change that page now all I have to do is replace the current stylesheet. I never have to touch the home page again.

Combine this method of displaying pages totally via the style sheet with a single source of content such as XML (DocBook or DITA standard) and you have one of the holy grails of technical writing—single source content.

Comments (No comments)

Comments are closed for this post.

Post a comment

Comments are closed for this post.