DokuWiki’s New Template (2012)

DokuWiki finally has a new default template (aka skin or theme) since its latest release (2012-10-13 “Adora Belle”). It has been active on dokuwiki.org for a few months now and I’m happy that the general opinion of it seems to be “awesome”.

That template has a long and interesting story to tell, especially about processes in the OpenSource community and the lack of designers therein. Even professional web developers will probably be surprised at how much effort actually went into making it.

So, here is its story:

This is DokuWiki’s old default template from 2004 until 2012. The main look and feel was taken from Plone CMS and mainly extended by Andreas Gohr and others.

We’ve been unhappy with the old default template and had plans to write a new one for a very long time now. It’s eight years old and in desperate need of some modernisation. I don’t remember exactly when was the first time we talked about it, but I remember at least when Andreas Gohr (the lead developer of DokuWiki) added tpl_include_page() (which was on 5 June 2009 ) that it was already meant for the new template, and by that time the idea was already “old”. I found a private email to Andi in which I wrote that I started the template dating back to 10 May 2009. And Andi remembered that he did the tpl_actiondropdown() also for the idea of making the new default template more mobile friendly and that was even further back ( 17 August 2008 ).

This is the Starter template by Anika Henke (2010). It formed the code base of all following tries of default template implementations.

I actually started to prepare the template back in 2009 (not quite sure when exactly, might even have been 2008?). But as we were lacking designers and professional design ideas, I went ahead and released it “without a design” as the Starter template in November 2010. I was planning to use it as the base for the default template whenever we’d have a design. And that plan succeeded, the new template is indeed based on the Starter template.

The main idea behind the Starter template was (and still is) to improve its maintainability by structuring the code in a way which makes it easier for template authors to understand the code and to start or maintain another template.

This is the first try, designed by Esther Brunner (September 2010) and implemented by Esther Brunner, Anika Henke and Andreas Gohr (until January 2011).

Then Esther Brunner designed a first draft of a new design at the Hackfest in Zurich in September 2010. Esther has been a very active plugin and template developer during the first few years, but has retired from DokuWiki since then.

We started to implement her design there and then and continued to work on it for a couple of months. I personally didn’t like that design much, but Andi liked it. At least we solved a few “positioning problems” and had a few important discussions. But none of us had any time and energy to move it forward and it lay idle since then.

This is the first try by Clarence Lee (August 2011).

In July 2011 I asked my then-colleague Clarence Lee (a UX Designer with a strong coding background) if he might be interested in designing the new template. Luckily, he was!

He had already helped me with the Starter template (mainly typography-related things, but he also had the idea to move the user tools above the wiki title). So, he already had an idea of what that task was about, although he hadn’t used DokuWiki himself.

This is the second and final rough design by Clarence Lee (October 2011).

The first iteration in August 2011 was already okay, but we all (including Clarence) thought it’s lacking something. “We all” means the “template committee” we formed after we noticed that discussing things on the mailinglist wouldn’t get us very far. It resulted in too many opinion and not enough decisions. So we rather discussed things in a smaller team consisting of Andi, Clarence, me, Håkan Sandell and Michael Hamann. We communicated either via IRC, emails or Skype conference calls. Especially the screen sharing feature of Skype helps a lot if you’re not in the same room but need to discuss visual things.

After a few small design tries in between (which didn’t lead to any implementation), the second (and final) design iteration came along in October 2011 with which Clarence was really happy. It’s a bit weird how we all were a little reserved at first and needed to warm up to the new design. But the more we looked at it, the more we liked it. And it finally turned out to be the very first design with which we were all really happy!

I started to implement it straight away and finished the main work in January 2012.

And this is how the final design looks:

This is the implementation of the final design as finished by Anika Henke (January 2012).

One interesting problem we faced was that designing apparently doesn’t really work like coding in an OpenSource environment. Apart from not having a designated decision maker (our team of 4 was still too big for consistent decisions, therefore it often turned out to be “design by committee”), not being at the same place when discussing things also made things more complicated. Parts of that are probably some misunderstandings, e.g. Clarence was really worried because he thought we didn’t like the design. He even was quite surprised when I talked to him and told him that we were all really happy, because in the IRC chats that didn’t come through. (I guess it’s the human nature of first jumping to the little negative things, instead of praising first or at all. And it’s also the fact that he didn’t know our personalities and therefore couldn’t judge how we meant certain things. So, there’s a little reminder to communicate more and more verbosely and to be aware that others usually cannot read minds.) A great read regarding that subject in general is this discussion on Forrst about how to get designers to contribute to open source projects .

We also finally optimized DokuWiki for mobile devices. It was about time, really!

While in corporate environments communication and understanding between designers and developers is already quite difficult, in the OpenSource community it hardly happens at all, because unfortunately there very rarely are any designers to communicate to.

Most OpenSource projects get initiated by developers . And at the stage they get initiated it’s already very late to get a designer involved. Ideally design should start before the development and later happen alongside it. Another problem why designers rarely contribute to an OpenSource project directly, is because it would mean working with its code . And designers don’t usually code that much. This calls for someone acting as a bridge, willing to work with them, who understands both sides and can implement the designers’ ideas.

The one comment from the aforementioned discussion on Forrst which best sums up the dilemma: “Design is not democratic. Most open-source projects are.” Why does collaboration between designers and developers work better in a corporate environment then? It doesn’t really, but it has to! Because having a client (and a boss) makes it much less of a democracy and makes it just necessary to collaborate, otherwise there will be consequences.

As OpenSource is often about doing things voluntarily, you’ll naturally walk away if things don’t work out.

Fortunately it has worked out in our case. So, big thanks to Clarence for designing a template that works in several scenarios and looks great and professional, thanks to Andi for leading the decision making process and later on designing some smaller parts, thanks to Esther for doing the design groundwork, thanks to Håkan and Michitux for testing and feedback, and the biggest thanks go to myself for doing all the hard work. :wink:

P.S.: If any words of this post sound familiar, I copied and adapted texts I had already written to the mailinglist on 5 Feb 2012 as “ Embrace the new default template ” and use images I had already posted on imgur as “ DokuWiki template design iterations “.