CSS wiki zen garden

I've been playing with wikis for the past three years but it was only about a year ago when I started realizing they were a killer app for intranets. Given a protected environment and a small group of users, the ease-of-use for editing and the ability to grow a site organically are the two biggest features in my mind.

A couple months ago I started thinking about how I could get the same easy editing features in other software, or if that wasn't possible, I wondered how far you could take a wiki package's output. I kept thinking about this until I finally sat down and gave it a try. This weekend I had some free time so I sat down to answer the following design challenge:

Is it possible to produce a wiki that offers all the power of a wiki while at the same time looking like a regular website?

"Looking like a regular website" for me also adds additional design parameters. In my eyes, a site has to be valid HTML and use CSS instead of tables for layout. A site also should be semantically correct, and since most wikis produce fairly simple HTML (content is just headings and paragraphs), I intended to take a CSS zen garden approach when coding it, putting all style into a CSS file while leaving the content produced by the wiki (and the content order) alone. The last requirement I put on myself was to produce a site that didn't look like it was limited by the other parameters. Like other projects I have created, I design purely in photoshop. This often produces interesting designs that have to be solved like a rubik's cube when converting them to xhtml/css, but I do my best not to think about XHTML strict vs. transitional when putting colors, fonts, and shapes together in photoshop.

The CSS zen garden site really opened my eyes and demonstrated that almost anything is possible in xhtml. It served as a model and inspiration when I started working on this Friday night. After some initial mockups, I settled upon this clean design and did my best to make the final product match it.

The first big obstacle was finding a wiki package that produced simple, valid HTML that didn't harm semantics. "WikiWiki" means "quick" in hawaiian and after looking at several packages, it seems the engineers that coded them were working quickly too. I could see how most relied on ugly hacks and awful html to display content, which is the nature of fast web application production. Eventually I chose phpwiki due to the simple headers and paragraph tags used for layout, and I spent most all of Saturday hacking away at the template files that control output (I've since heard from others that there are better packages out there).

I removed as much of the wiki cruft as I could, I simplified the URLs used by the application, removed unnecessary items from the navigation, and locked down the system so only I could edit pages (although I'd love to get typo fixes from the community, the specific and personal content doesn't really lend itself well to collaboration).

After a day and a half of hacking at php, xhtml, and css, I spent this evening converting the old content into the new site layout and wrote up some bits of info here and there.

The end result is here. It's valid XHTML 1.0 strict, produces some simple, semantic output that works in any browser, is entirely controlled by a wiki back-end (making editing and adding new pages a cinch), and I achieved the layout of my mockup almost exactly (compare the original mockup to a live portfolio page).

I'm happy with the outcome, though it was a ton of work to achieve my goals even considering my fairly simple content. I believe with further hacking it would be possible to control a fairly robust corporate or personal website with a wiki backend, so here's hoping someone creates that package, or takes the work I've done farther with their own site.