Design Techniques

About This Site

The Goal

One of the things I wanted to achieve with this site was the ability to switch the visual interface without having to duplicate any of the content. I use this site as a place to experiment and try out new ideas and add new styles reasonably regularly. It also occured to me that it would be great to retain the older styles as a working portfolio. Using Cascading Style Sheets and switching between those was one option but turned out to be pretty useless as the browsers simply couldn't handle much more than changing fonts and colours. Switching background images caused all sorts of issues with caching and created some interesting, but not ideal, effects.

XML Steps Up

XML became the main contender for this partly because it is a web standard but mainly because it creates a great separation of the content from the final format. This separation is important for two reasons: 1) the content can appear in any format I choose (e.g. XHTML, HTML, PDF) and; 2) the content is much more flexible and more likely to survive technology changes in the future (the assumption is that recommendations from the W3C are likely to survive a minimum of 5-10 years now).

By using multiple XSLT (Extensible Stylesheet Language Transformation) files to transform the content into XHTML I could effectively create multiple sites from one set of content. It also provides me with the flexibility to create a PDF version of the site by creating another XSL file. As future formats appear on the scene and become viable the content in this site can be displayed accordingly without having to rework the content itself.

How it Works: in a nutshell

Each 'page' in the site has it's own static XML file which is then transformed on the server using a XSL file and passes a XHTML file to the browser for display (See diagram for the basic process). This approach means the browser is receiving something it understands (in this case XHTML) so there is no real need to for any clever hacks or browser sniffing.

By telling the server to use a different XSLT file when it does the transformation we get a different XHTML file being created (different markup, different CSS etc). I got a developer friend to create the PHP (in this case) that combines the XML and XSL. I went on to prove that I'm no developer by simply creating a new PHP page for each visual style I wanted. As I add a new XSLT I also add a new PHP page. The 'interface switcher' icons simply link to these individual PHP files allowing users to manually change the style.

The Point of it All

While changing styles is interesting for this site and allows me to retain old designs as I upgrade the main reason for getting a solution like this working is for use in web based applications where there are usually more than one user group.

These different groups are often trying to achieve different things with the same content. The ability to serve up different interfaces customised to a specific group is invaluable and makes applications easier to understand and use. If it can be done using a W3C recommendation then that is all the better.

Feel free to drop me a line if you have any comments about this article or this use of XML.