Book Image

MediaWiki Skins Design

Book Image

MediaWiki Skins Design

Overview of this book

Table of Contents (16 chapters)
MediaWiki Skins Design
Credits
About the Author
About the Reviewer
Preface

Examples of MediaWiki Skins


There is little variation in the MediaWiki skins of each wiki, when we take their popularity into consideration. A few examples of existing wikis will give you an idea of what can be achieved. In particular, we will look at Wikipedia, which has become synonymous with wikis, AboutUs, and the WordPress Codex.

Wikipedia: The Monotony of MonoBook

Wikipedia, the "free encyclopedia that everyone can edit", is the most well-known example of a MediaWiki implementation. Wikipedia uses a slightly modified version of the "MonoBook" theme, the default MediaWiki skin that is supplied with the installation.

It is surprising that only a few webmasters redesign their wiki— the 'MonoBook' theme supplied with MediaWiki's installation and used on Wikipedia, is a very common sight on wikis. The logo is often the only element that is changed in the design. The problem with MonoBook is that Wikipedia has become so popular that the MonoBook theme is usually associated with Wikipedia rather than MediaWiki. Although a great change in the overall layout of components can cause visitors to the wiki to become disorientated, a reasonable amount of change can be made before this occurs, so this should not deter us too much.

MediaWiki comes with a selection of six themes: "Chick", "Classic", "Cologne Blue", "MonoBook", "Nostalgia", and "Simple". Another theme, "MySkin", allows you to specify the stylesheet to be used by creating a valid CSS file at User:YourUserName/myskin.css in your wiki's namespace. Apart from the "MonoBook" skin, the other MediaWiki themes are not used very frequently. This is because aesthetically, they are not very appealing.

As an online encyclopedia, Wikipedia's skin is under-stated. A too bright design would hinder the visitors' focus not only from the web page content, but also the most important aspects of the website. Let's face it: MonoBook is an ugly skin. It is grey, dull, and unappealing to new visitors. Wikipedia's saving grace is its content; but the supposed focus of each page's primarily monochrome content is lost to the plethora of blue links surrounding the content.

The use of a small font allows a lot of content to be displayed on the screen, and is ideal for an encyclopedia with long articles. But the amount of content on the screen makes it hard to read for a long period of time.

There is too much information on the screen, such as links to that versions of the page in different languages and log in and register links. Because of this, no single element on the page really stands out. This means the search box is unlikely to be used unless you are a frequent visitor to Wikipedia, and only those "in the know" will be aware of the ability to edit pages.

Bog Standard

MediaWiki's Standard skin is another one that is supplied with the installation.

Not surprisingly, there is nothing special about this skin. It displays the content in a plain, featureless way, which may be suitable for Wikipedia, but will not help you to differentiate your wiki from other wikis.

In Standard, the navigation, including the links to the page in different languages is split between the left-hand column and the top of the screen. This unnecessarily pushes the page's primary content even further down the page.

Nostalgia

Nostalgia is similar to MediaWiki's Standard skin. It is similar to Standard in placing various (probably infrequently used) links above the page's primary content. Unlike Standard, the Nostalgia skin aligns the wiki's logo to the right rather than the left, making it less of a focus on the page.

The location of the page's primary title makes it very clear as to what the content of the page is all about (in this case, Conway's Game of Life). It is good for search engines too, but the content related to this heading is far down the page.

Many of MediaWiki's characteristic links, such as "Edit this page" and "Discuss this page" are again included in this skin underneath the primary content.

MediaWiki is generally quite slow in presenting pages to the visitors, and the duplication of content in the Nostalgia skin does not prove to be helpful.

Modern

Modern is an improvement on these skins: it looks better-designed, and the muted grays and blues used in the header and navigation help to give the content a greater focus.

Notice the absence of the Wikipedia logo in this screenshot. Modern does not allow the space for it, which could present a problem if you want to use your wiki's logo with this skin.

Although the links are not underlined, the "blue" does suggest that visitors can interact with them. Also, the article's content is displayed in a clear manner.

However, but attempting to prove useful for every type of wiki you would want to create, this skin suffers from the same problems as its siblings do. Modern leaves very little to be desired in terms of distinguishing your wiki from other wikis on the Internet. As with MonoBook, Modern's search box is in the left-hand column, meaning it's not instantly recognizable as a search feature, which most users will expect to be at the top right of their screens.

Simple

MediaWiki's Simple skin lives up to its name. Again, the navigation and search features are located in the left-hand column in this skin. But unlike MonoBook and Modern, the "View" links are displayed in this column too, rather than at the top of the page.

This allows content in the Simple skin to be displayed at the full height of the visitor's browser, which is useful for wikis with long pages of content, such as Wikipedia.

Unlike MonoBook, Simple's category links are not styled so as to separate them from the rest of the content. Instead, they are styled in a similar way to the rest of the page's content, having the same font size but being in blue. This may not be as beneficial for the wiki's visitors, as the centrally-aligned text in the categories box is not as obvious after a long block of left-aligned text. See the following screenshot:

Cologne Blue

Cologne Blue follows a format similar to the other MediaWiki skins but has better features. The language links are colored green rather than blue, distinguishing them from the more useful links.

The skin is another dull blur of blue, gray, and blue-gray colors that are most suited to general use.

As we will see, it's useful to skin MediaWiki to help distinguish your wiki and make its useful features stand out.