About the Site

The website is generated in XHTML, using CSS to define all layout and design beyond the bare content. The XHTML itself is not written by hand - instead it is automatically generated by a PHP script, which turns raw .html and .txt files into the appropriate static webpages.

History

This is my third website. The first was a very pretty looking thing I did the art for in Fireworks and Photoshop, and hand-wrote the HTML; pages were a single massive table with cells everywhere to hold all of the different image slices. It looked good, but I was then completely unable to change any of the menus without redesigning the entire page (particually since I'd lost the original files I used).

Once I graduated (and my university-provided hosting evaporated), I decided to do a better job; I paid for hosting and a domain name, and decided to produce a more maintainable website to encourage me to upgrade it. In practise, I mostly tried to disguise 'lazy' as minimalist, with no colours, images (aside from the logo on the initial page), borders or anything else beyond a vast expanse of whitespace. The starkness meant I put off updating it, and so it languished until I tore the whole thing up and tried again.

This third version was where I determined to do it properly. I looked at how various sites I liked were laid out, and then sat down to teach myself the skills I needed to do a proper job.

XHTML & CSS

Before starting I scanned through several hundred designs on CSS Zen Garden to get a feel for the flexibilty and usefulness of CSS. Since I have limited artistic skills I wanted a clean user interface with few if any images, tied together instead by a coherent theme of colour and shapes. Since I've always been fond of ochres, I settled on that.

The website was assembled with a degree of trial and error, along with constant reference to W3Schools, a site comprehensive enough I didn't need any other tutorials or articles to show me how to write my style sheet. The final product was only 20 or so lines; you can read it here.

I used XHTML Strict 1.0 as the document type for the content, as most modern browsers will render this (mostly) according to the W3C spec, rather than using their more ideosyncratic compatibility modes. XHTML requires little more effort to write than HTML, and the existance of online validators means it's easy to ensure that your syntax is valid.

PHP

While the style sheet allowed me to change the layout by editing only a single file, the rest of the content is XHTML. Hence the menu for a given group has to be duplicated on each page of the group; adding a new page means going through each one and adding an entry to the menu in each, which seemed wasteful. I determined to find a better way - generating all the pages automatically via PHP.

The code to do so is relatively straightforward; it reads a source file which contains the details of each page to generate (title, file name, brief description) along with their order in thir group, opens each file and appends all the XHTML it needs, automatically generating elemnts like the left-hand menu based on the information from the source file. It can also read text files, in which case it appends code for paragraphs and line-breaks as needed.

As a result, to add a new page the only thing needed is to upload the file and then edit the source file to include its path, title and description. It also makes it trivial to change details in the header or menus; only the single php file needs editing, rather than dozens of pages. While for a much larger sites it would make more sense to abandon static pages altogether and dynamically generate every page when it is requested, this is a relatively handy solution for a small site like this.

The Logo

The logo on the front page was created for me by Kevin Pease, an artist who in addition to drawing the webcomic Absurd Notions also has a fondness and skill for creating ambigrams. An ambigram is a word or phrase that can be read in more than one direction: stand on your head and my logo will look just the same. He's got some amazing ones on his site, so go check them out. I cropped the first letter to make a design for the title bar at the top of each page, as I felt the coloured panel needed a little something extra.