Choosing a Responsive MediaWiki Skin
- Kirill Klimov
- Oct 29, 2022
- 4 min read
Updated: Feb 19, 2023
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.
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.
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.
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.
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.
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.
Commenti