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:
- 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.
- 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.
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.
Chameleon is a highly-adaptable, well documented and responsive MediaWiki skin that uses Twitter Bootstrap 3.
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.
- MediaWiki.org: Chameleon
- Examples (demos):
This well documented skin was developed to push content to the “foreground”.
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.
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.
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.
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.
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.
Dgraph was developed to equip wikis with graph database software.
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.
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.
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.
Gamepress implements the same design ideas as its WordPress skin but on MediaWiki.
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.
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.
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.
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: