The semantic markup helpers

A general workflow of creating websites always looks the same:

1. The graphic department or the designer is designing some artwork for and with the customer, until the layout of a website is finalized.
2. The web developer receives the final artwork to realize a prototype in html.
3. If the prototype is okay and cross-browser tested, the system architect receives the code to merge it with the Content Management System or any other Data Sources.
4. Finally the website goes online.

Since approximately two years, I am responsible for translating the artwork from the designer into html & css.

When I read the book “Transcending CSS“, written by Andy Clarke, he described an idea how to lay down the semantic structure of the website, before writing one row in HTML.

The idea is to use special markers. Each marker represents an element in html. The design of the markers allows to add short notes (e.g. typical IDs like #navigation, #footer or other useful hints) in the green area, and the html tag in the right area.

Above sample marker represents an unsorted list with the given id “navigation” and will be placed on the artwork where the navigation is layouted.

After you marked the most important elements, you will have it much more easier when you begin to write down the markup.

Since I like this idea, I created a Macromedia/Adobe fireworks templates with some predefined “markup helpers”.

First I was skeptical to go this way, but after some projects, you will save time when you develop the prototype and you get a higher quality of the website. So try it out, feel free to use them in your next web project and extend it with your own markers. This could be also useful to define microformat tags, which is mainly unintended on most websites

Click here to read more, why it is important, to have a good semantic markup in the source code of a website.