Debian Wiki Design Process

Instructions

Test locally in Desktop Mode

Download MoinMoin 1.7.1 and the latest-debwiki.tar.gz unpack the MoinMoin distribution and cd to into the /moin-1.7.1 folder and unpack latest-debwiki.tar.gz. You will then need to replace wikiconfig.py with wikiconfig.py.debwiki. Make backups as you see fit. To start the MoinMoin server (desktop version) type ./wikiserver.py. I would suggest creating a temporary username to test the installation.

Test older proposal at wiki.debian.org

By entering this url into

Settings > Preferences > User Css Url

And setting the Preferred Theme on the Debian Wiki to debwiki you can have an approximate look at what I'm doing. I need to make some further changes to the python theme before it will work without ugly hacks.

Please note that the wiki homepage is more or less broken with the above theme.

Wiki issues

The many "special ways" of a wiki and MoinMoin in particular means that it's quite difficult to create a theme that is functionally similar to the main w.d.o site without interfering with the ways of the wiki.

One way would be to have a very different layout for the wiki but introduce some colours and details from the overall debian theme. This avoids the issue of navigational elements that looks like the wdo ones but behaves different. This has some usability advantages as the predictability of say the navbar will not be damaged

The other way would be to move the wiki as close as possible to the wdo behaviour. Permanent navbar, normal breadcrumbs etc. Smaller differences such as clicking the current breadcrumb resulting in a search might be acceptable. The advantage of this approach is that the wiki will be more integrated in the site and that it will behave more like the rest of the site.

Wiki Options

Horizontal

This version locates the login information by the subdomain flag and places the page title as a large h1 heading at the beginning of the body. The edit tools are then located just under the heading associating the editing to this title

Pros

Cons

Vertical (sidebar)

The previous proposal using a sidebar for the user and edit links

Pros

Cons

About the Wiki proposal

The main task is to create a MoinMoin template and stylesheet that fits well with the proposed debian.org design. The idea is that the wiki should use an exact copy of the standard debian.css and then have a separate stylesheet for wiki specific elements.

In addition to the fundamental task of applying the new design to the wiki I would also like to propose some additional changes. For instance a new homepage design and some general thoughts on the design of the wiki.

I was pretty amazed by the complexity of the markup behind the wiki. The more special and "designed" elements are beyond the pale. All the styling is done inline in the markup, creating a right mess. By creating css templates for common elements much of this complexity could be reduced while gaining consistency in the appearance.

The main thing though would be to use simpler markup whenever possible. The gain in looks are very rarely worth the added complexity. If the mindset could change from one where the pages are "painted" through markup to one where markup is a tool to add structure and meaning to the content the wiki would be greatly improved. I would also suggest using icons more sparingly if at all. The inconsistent graphic style and the fact that the icons often have a tenous relationship to the topics they represent makes them confusing rather than useful. Making the pages pretty should never come at the expense of clarity.

Bold Suggestions

Wiki Homepage focus

The wiki homepage could focus more on guiding users towards contributing. More space should be given to promoting little jobs anyone can do. This of course needs to be supplemented with supporting guides and tutorials to give people the confidence to contribute.

Ideally the tasks in the list should be replaced every two weeks or so. The purpose is not only to complete the tasks but to highlight what sort of things you can do to help.

Wikis worth looking at

Information

The css files are organized into

debian.css
The proposed global www.debian.org stylesheet that provide most of the look.
debwiki.css
Additional rules and overrides specific to the wiki.
modernized-common.css
A MoinMoin default stylesheet by Juergen Hermann that sets icons and plenty of other stuff.
ugly-hacks.css
A stylesheet that corrects and overrides the mistakes I made in the css files and python templates uploaded to wiki.debian.org. If the new debwiki.py template is used this file is not required.

In addition there is a python template

debwiki.py
A modified version of the Modernized theme template by Nir Soffer and Thomas Waldmann.

Questions

Issues

Admittedly minor

Solutions

Proposed list of predefined css items

There are currently very few pre-defined styles for items such as notes, warnings, official, portal & so on. By providing pre made templates the wiki can become more coherent and easy to manage.

Graphics coming soon

Official
Link to official documentation. Exists
Blurb
Descriptive introductory paragraph
Note
Comment-like highlighted information
Warning
When required
Link Grid
Links organised in grid with icons
Portal Header
Special header to emphasize portal status of a page
Code Block
Exists through the pre and code elements but is a caption/title required?
Prompt
Tell the user how to behave
Table
To be used for tabulated content only

Others?

Comments

Portal have to much graphic emphasis

The portal pages could be much simpler, such a monumental design should be used more sparingly. The strong graphics obscure the portal topic.

The portal icon is not so nice