Search

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, 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 default skin
Vector - Wikipedia's default skin

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 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 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.


Custom MediaWiki Skins

A MediaWiki 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 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.

25 views0 comments