Using XML in web site design

Version 1.0, October 10, 2000

Preserving a consistent look and feel across an
entire web site is not so hard to achieve. But how do you handle
easily a complete web site redesign without modifying every page?
Let's have a look at the solution that I use for the web site you
are looking at right now...

The classical problem in web development is to assure that
every pages you create gets a consistent look and feel with the
rest of the web site. Generally, the solution is to design a web
page that will be used as a model for other pages, and which HTML
code will be copied over the others.

This is an huge waste of time, since:

copying HTML code is long, and prone to errors

a single bug fix in the main design (for example a bug in a
dynamic HTML menu, or a new menu entry) will have to be copied
into every page of the web site

a major redesign of the web site implies that the web
designer has to modify all the pages

A possible solution is to cut your model page into two or more
"pieces" that you include in all the web site pages, using a
scripting language, such as ASP or PHP. I successfully used this
method in some web sites (see http://www.faineant.com/ for
an example, in French). However, all your web pages will have to
be dynamic, which can be problematic sometimes (your hosting
service will have to support the scripting language, you can have
performance problems...).

Another solution is to completely separate content from
presentation, as we will see in the next section.

Let's imagine that your web site has common menu bars, and on
each page a specific content section, like in the image below:

The idea is to concentrate on content generation and use a
stylesheet for the page layout. Then, if we want to change the
layout, we will only need to change the stylesheet.

Instead of using our own DTD for the content XML file, and thus
having to process every content page before checking that
everything is correct, I suggest we use the XML version of HTML,
that is XHTML. The page will easily be displayed in a browser
during development phase, and it will be well-formed (at least)
XML that we can feed the XSLT processor with.

Next, we create the stylesheet for the inclusion of the content
into the layout page, but instead of including the layout page
code into the xsl file, we use a separate file that can thus be
easily modified, even by non XML-experts.

The comments in the layout file tell where the contents from
the content page should go. Here, we insert the content in the
right cell, of course, but we also copy the title from the content
page to the final page. In order to link the layout and the
content page, we will have to replace that comments by our own
tags:

If you want to include dynamic code into your XML content file,
I suggest you create a new tag for this. Let's see an example with
PHP. You can use any scripting language, provided that it is
XML-friendly (because the generated page must be a valid XML
page).

We will modify the XSL file, to add the template for our new
tag, that we named phpcode. Just add this, before the
identity transformation: