The top 10 MediaWiki skins

Maximal mobility and responsive design are central when developing MediaWiki skins. Image: Kelson, CC BY-SA 3.0, via Wikimedia Commons.

We have had a look around at what interesting skins are available for MediaWiki and here we present those we think are the ten best.

But first, we will say a few words on MediaWiki and skinning in general. When comparing new MediaWiki skins, one always comes back to the following three themes:

  1. Mobile: How and how well do the skins support mobile applications? Many skin developers use standard HTML, CSS and JavaScript frameworks like Bootstrap or Zurb, to develop “Mobile First” skins.
  2. Navigation: Orientation towards mobile applications has significant consequences for the layout and design. It becomes “flatter”. The edit functions are in the background so as not to overload the small screen, and to reduce complexity. In this way, the pages appear more attractive on the web, and the “Mobile First” skins are more handsome, particularly for the reader. A power user wanting to work in the wiki will often find such skins problematic because they need extra clicks to access the functions they need.
  3. Semantic support: Many wikis use Semantic MediaWiki to work with metadata. Some skins integrate functions from the semantic extension into the skin or customise the layout in such a way that it does not break the optical design.

Let us now look at a few skins.

1.    Vector and MobileFrontend

Let us start with the MediaWiki skin used by the Wikimedia projects. Vector has been the standard skin for MediaWiki since 2010 and has many supporters and fans, being well maintained, simple and functional.

Vector Skin (Wikipedia)
Vector has been Wikipedia’s skin since 2010.

Personally, I no longer find the Vector design contemporary. But contrary to my hopes of a few years ago, there has been very little movement. At the Wikimedia Foundation, the development of a new standard skin has been lost sight of.

Although Vector has been developed further for mobile devices, it is not fully responsive. Wikimedia supports mobility with the extension MobileFrontend and the corresponding mobile skin Minerva. Mobile devices automatically switch to the mobile skin. In comparison to other skins like Vector, Minerva offers a much simpler user interface and focusses on good performance and fitting the requirements of readers with mobile devices.

Another way in which Wikimedia supports mobile applications is Wikimedia Apps, which are very successful, and perhaps should form the subject for another article.

Vector is still very applicable for projects outside Wikimedia. MobileFrontend is also very practical. However, the projects are tailored a great deal to Wikimedia, which makes it very difficult for web developers to include innovations and their own advancements.

Links:

2.    Chameleon

Chameleon is a highly-adaptable, well documented and responsive MediaWiki skin that uses Twitter Bootstrap 3.

Chameleon Skin (Physiopedia)
Physiopedia uses the Chameleon skin.

As standard, Chameleon provides a horizontal navigation menu with dropdowns at the head of a page and a horizontal menu with dropups for language links at the bottom of the page.

But the skin lives up to its name, giving you five different layouts to choose from. Every layout is defined in an XML file, and so it is easy to customise it to different requirements. The examples listed below show the wide variety of layouts and designs possible with Chameleon.

We use Chameleon time and again for customer projects, and it will probably form the technological basis for the BlueSpice 3 skin. Chameleon can also be found on many websites that have installed Semantic MediaWiki.

Links:

3.    Foreground

This well documented skin was developed to push content to the “foreground”.

Foreground Skin
Foreground: a new version is currently being worked on.
It has a responsive layout and supports Semantic MediaWiki. Foreground is based on the Zurb Foundation Framework and thus on an advanced, pleasant front-end framework.

The developers have reduced the menus and navigational elements a great deal. The left menu is integrated into the top navigation menu. There you can also find the toolbox and personal settings. Even the page actions (“edit”, “move” and “watch”) are only available via a button (“actions”).

At the moment Version 2 is being produced. By the editorial deadline, there was no publication date known for a stable version.

Links:

4.    Pivot

The pivot skin also follows the “Mobile First” approach. Like the Foreground skin, Pivot is based on the Zurb Foundation framework. The skin is well documented and supports not only modern layout development but also Semantic MediaWiki.

Pivot Skin
Pivot skins’ homepage.

In contrast to Foreground, Pivot has kept the “Wikipedia” layout. Even the search field is back in the left navigation bar as it used to be in the old days of MediaWiki (see also Metrolook below). The reduction of the page and user functions to one button creates a serene optical effect.

Links:

5.    Tweeki

Like Chameleon, Tweeki is based on Twitter Bootstrap. The developers of this skin have tried to implement as much Bootstrap functionality as possible so that it can be used very simply and with highly reduced markup, and provides many configuration options.

The Tweeki skin.

Tweeki aims for the highest compatibility with Semantic MediaWiki and PageForms, with the goal of being particularly useful for “wikis as websites”. To correspond to this, all the navigational elements are placed in the top navigation bar. The navigation bar within the article, which you know from Wikipedia, is dynamic and placed on the right border. This skin is also very well documented too.

Links:

6.    Dgraph

Dgraph was developed to equip wikis with graph database software.

Dgraph comes from the business world.

The skin supports responsive layouts. Dgraph has, like many younger skins, a more minimalist look and is styled for application in business. It directs the focus to the header area, which is finished off with a horizontal navigation bar. The menus, the search function, the page functions and the personal page are integrated into this.

Links:

7.    Timeless

Timeless is a very cheerfully designed skin, arising from a discussion on a new look for Wikipedia. Its layout seeks to balance editing and content elements.

Timeless Skin
Timeless supports readers and authors to the same degree.

Thus Timeless builds on the Wikipedia style, keeping the central navigation bar on the left hand side, but arranging the page functions, the toolbox and categories in a column to the right. The content area is pushed upwards by Timeless, so that no space is lost and one even creates enough for a search field.

Responsive behaviour is partially available but not fully implemented. An interesting point is that in the demo we link to here, Timeless for mobile devices works with both MobileFrontend and Minerva together.

Links:

  • Timeless: Demo on the Wikimedia Foundation lab server.
  • MediaWiki.org: Timeless

8.    Metrolook

Metrolook is also a fork of the Vector skin, which is oriented on Metro an unofficial Microsoft design language. It was written for a data base with images from video games (PidgiWiki).

Metrolook Skin
The Metrolook skin.

Metrolook is fully responsive. The configuration options are well documented.

An upload button is included in the navigation section at the head of every page, which aids collecting image data. This top navigation section also houses the page functions and the user functions, which is a little unusual. The left menu is kept the same as in Wikipedia.

Links:

9.    Gamepress

Gamepress implements the same design ideas as its WordPress skin but on MediaWiki.

Gamepress Skin
Gamepress for wikis that prefer black.

This skin cannot disguise its background in the gaming scene. It is well suited to documenting games, but also to wikis with a point of contact to the world of media (photo, film). The black Gamepress skin is also interesting for technology communities.

The central navigation system is placed at the top. It offers a drop-down menu. To the right is a second navigation bar, like in a classic blog. This houses the search, user and page functions. The three-column footer offers further space for design.

The skin comes as standard with four design colours: red, blue, green and orange. Gamepress consciously opts to have no space for a logo, instead showing the name of the wiki.

Links:

10. Skins from web projects

The skin we envisage at spot number ten (MediaWiki Bootstrap skin) is unfortunately not available at the moment. For this reason, I will use the opportunity to note some projects that have come to my attention while researching for this article.

Energypedia – example of a successful skin design.

These are some very attractive individual skins. However, as far as I know they have not been made publicly available. They can, however, provide web designers and maintainers very interesting ideas nonetheless.

  • Ryte Wiki. Ryte (previously: OnPage) is a website optimisation business. The company has built up a wiki on the topic of digital marketing. Overall a very nicely designed page.
  • Energypedia: a platform for collaborative knowledge exchange on renewable energies and energy efficiency in developing countries.
  • WikiWand: the Wikipedia reader WikiWand is also generally a good place to find ideas for beautiful web front-ends.

BlueSpice Skins

Let us add one thing about ourselves: our MediaWiki distribution BlueSpice (demo) requires a customised skin because additional BlueSpice functions, for example the user menu, need to be included. The skins mentioned here would need to be adapted for BlueSpice. Hallo Welt! would of course be happy to undertake such a commission. However, we are also glad to support developers who would like to be active in this area themselves, so that they can offer their customers and users of BlueSpice alternative skins.

Let us finally note:

WikiApiary, a project from the MediaWiki Stakeholder’s Group, which records public wikis and in doing so, also the spread of skins and extensions.

You Might Also Like

1 Comment

Leave a Reply