Choosing a Responsive MediaWiki Skin

If you're about to start your own MediaWiki project or spice up an existing wiki, some of the following points may be helpful. We will talk about "skins" - freely distributed sets of code and resources - that will determine the appearance of MediaWiki.

...
WikiTeq
Share:

If you're about to start your own MediaWiki project or spice up an existing wiki, some of the following points may be helpful.

We will talk about "skins" - freely distributed sets of code and resources - that will determine the appearance of MediaWiki, and about the factors important for choosing the right one. We are developers and will focus primarily on the technical and conceptual aspects of the choice.

The design should match the content, not the other way around

Many people think of the Wikipedia interface when they think of MediaWiki: a large number of links that support the specific workflows of readers, commentators, editors, moderators, administrators.

The phenomenon of the world's largest online encyclopedia is so inspiring that many people or companies using Mediawiki want their wiki to resemble Wikipedia.

vector wikipedia's skin with adjustments

Vector - Wikipedia's default skin. Registered users can adjust look and feel in their account preferences.

The purpose and subject matter of a wiki, the nature of its content, and the intended user experience may require a more or less extensive adaptation of MediaWiki skin. Or maybe you just want to make your wiki unique?

About 70 different skins are listed on mediawiki.org and most of them were created by enthusiasts and/or professional developers with the goal of:

  • improving responsiveness
  • making interface cleaner
  • adding emotions
  • matching wiki content

Since it makes sense to make your wiki look great and distinct, these skins should generally be viewed as templates for your own design. Therefore, ease of setup is important.

For review, we selected mature skins that are regularly maintained, provided with good tutorials, and improved support for the Semantic Mediawiki. Follow our blog to learn more about Semantic MediaWiki, MediaWiki, and Wikibase

A public wiki skin must be responsive

Until recently, skin responsiveness — its ability to adapt itself to different devices and screen sizes — was kind of a nice feature. This is a must these days for most of public wikis.

There are two main approaches to making your MediWiki site look good on both desktop and mobile devices.

“MobileFrontend” Approach

Mobile frontend wikis use two separate skins for large and small screens, as well as an extension called “MobileFrontend” that attempts to automatically detect the current device and select the correct skin. They also have manual switching between mobile and standard view that can be used in case of failure. 

Leaving aside the architecture of the solution, we only note that the use of two skins significantly increases the cost of their configuration, support and maintenance.

This approach is widely used in long-established wikis, including Wikipedia.

Vector and MinervaNeue Skins by Runescape.wiki

Vector and MinervaNeue Skins by Runescape.wiki.

Runescape.wiki is a nice example of a mobile frontend wiki. It features the customized Vector skin on desktop and the customized MinervaNeue for mobile view. It offers a number of configuration options, including a dark skin variant. Made with love and talent.

Truly Responsive Mediawiki Skins

A family of relatively new skins that can do the work of MobileFrontend on their own and can adapt to any screen size without the need for a second skin. 

Framework based approach

They usually make use of one of the well-known responsive frameworks, designed for rapid development and easy management, and providing access to extensive collections of re-usable variables, behaviors and ready to use elements. It is much easier to find developers or maintainers for wikis with framework based skins.

Here are some popular MediaWiki skins of this type:

Chameleon - Based on Bootstrap 

Chameleon skin offers several predefined page layouts to choose from and a simple content flow with dropdown based navigation. Packed with free Font Awesome 5 icons. Provides a huge amount of variables that can be changed centrally, modifying the appearance of the skin. You can create your own layouts using a set of custom components. The skin allows you to import bootswatches - ready-made collections of styles from Bootstrap.

Chameleon Skin customized by WikiTeq

Chameleon Skin customized by WikiTeq.

Pivot - Based on Foundation

Pivot offers a page layout familiar to Wikipedia users, with a sidebar on the left. Supports Font Awesome 4.7. A modest set of configuration options for tweaking the skin's key features, including adding AddThis social buttons for sharing and subscribing to content.

Pivot MediaWiki Skin

Pivot MediaWiki Skin.

Tweeki - Based on Bootstrap 

Tweeki creates simple uncluttered pages with dropdown navigation. Font Awesome can be easily added with a configuration option. Tweeki defines common MediaWiki elements and allows you to customize their visibility or create your own elements. The skin comes with a good set of controls, although their location is a bit scattered (parser functions, system messages, local config files). Out of the box, Tweeki provides a scrolling feature that allows you to keep track of the current position on the page in a sticky table of contents.

Tweeki MediaWiki Skin

Tweeki MediaWiki Skin.

Citizen - Home Grown Grids

A very flexible MediaWiki skin developed as a game wiki, but due to its clean design, it can be used for any general purpose wiki. Citizen features a number of candies like the switch between light and dark mode, adjustable font size and page width. It is worthy to note that the related controls are made available for all users in the skin interface. The skin supports collapsing and expanding article sections. Its table of contents remains accessible anywhere in the article and can follow the current place on the page.

Citizen MediaWiki Skin

Citizen MediaWiki Skin.

Custom MediaWiki Skins

A Media Wiki skin should look great on any device and be easy to customize to match the content of the wiki. For this purpose, we have made the Chameleon skin the standard for installations by WikiTeq: significant design changes can be made relatively easily, at desired depth, and at a lower cost.

This does not mean that we settled on Chameleon. WikiTeq docker image, for example, comes with 8 pre-installed skins of different flavors to cover the most common wiki types:

When starting new MediaWiki projects, we listen to our clients and advise on the best skin option for their use case. If your wiki needs to be unique, WikiTeq can design you a custom skin from scratch.

Latest Stories

Here’s what we've been up to recently.


Get our stories delivered

From us to your inbox weekly.