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...

Common web design problems

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:

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.

Using XML in web site design

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

Image representing the layout of a page, with a global menu bar at the top, a contextual menu bar on the left and the content of the page in the rest of the available space

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.

For example:

<?xml version="1.0" encoding="iso-8859-1"?>
<html>
  <head>
    <title>My web page</title>
  </head>
  <body>
    <p>My content</p>
  </body>
</html>

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.

Here is the layout page. This is also an XHTML file:

<?xml version="1.0" encoding="iso-8859-1">
<html>
  <head>
    <title>My web site - <!-- My content page's title goes here --></title>
  </head>

  <body>
    <table align="center">
      <tr>
        <td colspan="2">Global menu</td>
      </tr>
      <tr>
        <td>Context menu bar</td>
        <td><!-- Content goes here --></td>
      </tr>
    </table>
  </body>
</html>

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:

<?xml version="1.0" encoding="iso-8859-1">
<html>
  <head>
    <title>My web site - <insert-title/></title>
  </head>

  <body>
    <table align="center">
      <tr>
        <td colspan="2">Global menu</td>
      </tr>
      <tr>
        <td>Context menu bar</td>
        <td><insert-content/></td>
      </tr>
    </table>
  </body>
</html>

I suggest you use your own namespace for the new tags. However, it's not mandatory. Let's call this page layout.xml.

The final step is to create a XSLT stylesheet that will process the layout and the content page to give the result page. This is a classical XSLT transformation, which involves two files:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

  <xsl:output method="html"
              doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
              doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
              encoding="iso-8859-1"/>

  <xsl:variable name="page" select="/"/> <!-- Root node of the content file -->
  <xsl:variable name="layout" select="document('layout.xml')"/> <!-- Root node of the layout page -->

  <!-- Include the template into the result -->
  <xsl:template match="/">
    <xsl:apply-templates select="$layout/html">
  </xsl:template>

  <!-- Include the content page's title -->
  <xsl:template match="insert-title">
    <xsl:value-of select="$page/html/head/title"/>
  </xsl:template>

  <!-- Include the content -->
  <xsl:template match="insert-content">
    <xsl:apply-templates select="$page/html/body/*">
  </xsl:template>

  <!-- The identity transformation, as a default -->
  <xsl:template match="@*|node()">
    <xsl:copy>
      <xsl:apply-templates select="@*|node()"/>
    </xsl:copy>
  </xsl:template>

</xsl:stylesheet>

To get the final result, all you have to do is process the XML content page withis stylesheet. You can also create a makefile to process your website when needed.

What about dynamic pages?

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:

<xsl:template match="phpcode">
  <xsl:processing-instruction name="php">
    <xsl:apply-templates/>
  </xsl:processing-instruction>
</xsl:template>

The <phpcode>...</phpcode> will then be replaced with <?php ... ?>. But be aware that your web designers won't be able to fully view the static content pages without processing them first.

Conclusion

The solution I used for this web site is not the ultimate solution, of course. However, I am rather satisfied with the result. This may not be the solution for you...

If you want to go further, you can of course create new tags for your content files (provided that you modify the XSL stylesheet to transform them to something a browser can understand).

I know this document is far from perfect. Here is were it could be improved:

Send me your contributions!

References

Here are some links related to XSLT: