Lens, a skin for version 2 of PmWiki,¹ was the most complex web design project that I’ve done to date. It took several months and a lot of swearing to develop. It’s modular, which makes it unusually easy to customize. It is also:

• Web standards compliant,
• Forwards and backwards compatible,
• Accessible,
• Adaptable to multiple levels of expertise, and
• Centralized, which makes it easier to modify and update.

Customizable

OP really was very serious when he said this theme is highly customizable. Thanks and great job! –RS

Compliment posted on my skin’s page at PmWiki’s official site

My top goal when writing Lens was for ordinary people to be able to customize it without having to learn any programming. XHTML and CSS are a cakewalk compared to a serious programming language like C, but many people still find it difficult to make one or two small changes to an otherwise ideal design without having to dive in headfirst.²  So Lens stores a lot of itself (for example, the contents of the sidebar) in the wiki rather than in the template file. It has many built-in style options to choose and learn from. And of course you can dig into the guts and tweak the code by hand if you want to. Continue reading →

The webpage template I designed for Westciv‘s 2004 competition won an honourable mention and was included in Stylemaster version 4 under the name Lime Spider.

See a live demo of Lime Spider. Isn’t it lovely in comparison with the unstyled version?

Entries in the competition were expected to be valid, accessible XHTML and CSS. So, I used semantic code which is more accessible, especially for screen readers. I styled it so that text contrasted strongly with the background and could be resized without damaging the layout or aesthetics. Neither does it rely on having perfect colour vision, or have any images or plugins replacing the text. Lime Spider is readable, attractive, compatible with a wide range of browsers, fast-loading, and easy to modify.

It is also a fluid design. It reshapes to fit your browser window width so long as it is not too narrow or wide to read comfortably. Since its proportions are set in ems, they’re maintained regardless of your window or text size.

I began by making a grey version, to hammer out the layout and typography, and then made several colour variations.

• Grey
• Lime
• Autumn
• Cobalt
• Cerise
• Aqua
• Lime v2

I created the Arndis skin for PmWiki in the spring of 2004.  I was running PmWiki v 0.6 or 1.x at the time.  It’s been through a few rewrites since then, but the visual design is much the same as the original.

Like my other web designs, it’s standards-compliant, semantic, accessible, etc., etc.  It’s a simple liquid two-column affair, with a brighter content area floating in a sea of background and sidebar. I made several colour variations:

Going beyond the pretty looks, I did some things to suit myself with this skin. There is a breadcrumb trail to show the reader her location in the site. The sidebar contains some auto-updating sections that use javascript snippets to work their magic. The editing command tabs are an unordered list, for the reasons given in A List Apart. This particular unordered list began life as an example from Listamatic, but I tweaked the heck out of it over several generations.

The hardest thing to do to it was the you-are-here marker, which highlights the current tab. I needed a CSS selector for it and only it, which meant I needed a hook in the HTML PmWiki generated. Happily, the creator of PmWiki is very good at answering questions or helping out with small things like this, and he pointed out a hook that already existed in the code.