Taking a Look at the Best Responsive MediaWiki Skins


Last updated on 2020-09-21. Written by Karsten Hoffmeyer


Are you looking for a mobile and responsive skin for your wiki? I got you covered with a comparison of the best skins.

I believe that your wiki should naturally serve mobile and responsive devices from the start, but it can be difficult to find a skin to fit this purpose. Do these mobile friendly skins even exist? Let’s find out and take a look at our best picks for MediaWiki you should consider.

Overview

Even today, there are not many choices when it comes to a mobile and responsive skin. I’ve done the research for you and in this blog post, I will look at the available alternatives serving the content of your wiki best for mobile devices.

All of the mobile and responsive skins to MediaWiki I will mention in this blog post both integrate with Semantic MediaWiki and VisualEditor. According to my opinion these two requirements need to be met. In addition, these skins are under active development, meaning that support for new major releases of MediaWiki is added within a short period of time. The latter is good to know if you would like the next major upgrade of your MediaWiki instance to be smooth when it comes to the skin used.

Let us now look at the selection of mobile and responsive skins for MediaWiki I made for you.

Chameleon

The Chameleon comes by default with a layout offering two navigation bars enclosing the wiki’s content at the top and bottom, with the first holding the menu for actions on the right and the latter holding the tool menu. This is different to what you are accustomed to by the classical wiki skins for MediaWiki but I do not think this is bad.

It is the most versatile and flexible skin when it comes to customizing the look and feel of your wiki. Moreover it can easily be extened with further features from the Bootstrap framework. If you are into creating an unique impression of your wiki then this skin is your choice.

Chameleon skin

Foreground

The Foreground skin serves a fixed layout providing one navigation bar at the top above the wiki’s content which also holds the tool menu. The menu for actions is located at the top right of the content area.

It is one of the skins with a clear and straigt appearance and serves by default the features provided by the Foundation framwork. If you are happy with the layout and just want to do a couple of changes to the CSS then you should pick this skin.

Foreground skin

Pivot

The Pivot skin serves a fixed layout resembling that of the well-known classic Vector and Monobook skins with a sidebar on the left of the screen. The user menu is toggled in and out on the right side of the screen. The menu for actions is located at the top right of the content area.

This is a mobile and responsive skin offering the classic wiki appearance and serves by default the features provided by the Foundation framwork. If you are into the classic wiki layout and just want to do a couple of changes to the CSS then this skin is your pick.

Pivot skin

Tweeki

The Tweeki skin serves a flexible layout by default providing one navigation bar at the top above the wiki’s content which also holds the menu for tools as well as for actions. The latter with the exception of the action for editing which is placed as a button on the top right of the content area.

It is a skin with a clean aesthetic layout by default bringing the features provided by the Bootstrap framwork. If you like the layout provided by the Tweeki skin and you just want to do a couple of changes to the CSS, then this skin is definitely something for you. If you would like to build intensely upon the skin, it is also a very nice choice.

Tweeki skin

Adoption

Let us now look at the basic data like usage numbers, web framework used, and other information:

Skin Usage Since Framework Demo site
Chameleon 215 2013 Bootstrap 4
Foreground 208 2014 Foundation 5
Tweeki 68 2016 Bootstrap 3
Pivot 38 2017 Foundation 5

The data was sourced from WikiApiary.com, MediaWiki.org and GitHub.

The usage numbers of these mobile and responsive MediaWiki skins do not convey a relevant volume of serious adoption. However, we need to remember that private wiki instances running MediaWiki are not covered at all. From experience, these are much more likely using one of the skins mentioned here. Thus, these numbers do, indeed, provide a pretty good overview of how usages compare by skin. Moreover, their overall adoption is steadily increasing since their inception.

Interestingly, but not surprisingly, none of the mobile and responsive skins mentioned here is deployed on wikis run by the Wikimedia Foundation, the organization behind Wikipedia. One reason for that is due to the skins’ focus on being mobile and responsive, they provide features that may break content on Wikipedia. Moreover these features are even unwanted within the scope of Wikipedia. Think of features like accordions, carousels or tabs here. Another reason is that they were not developed by the Wikimedia Foundation, thus not assuring direct control over their code base and release process, which is also an important factor for Wikipedia and related projects.

This leads to the questions: Which mobile skin is used for Wikipedia, and why wasn’t it considered in this blog post? Well, the skin is called Minerva Neue, which is best used with the MobileFrontend extension. They piggy-back on the classic MediaWiki skins we all know - Vector and MonoBook. In my experience, this solution to a mobile skin for MediaWiki is generally viewed by users with a resigned acceptance. Also it lacks the possibility for adaptation to individual wiki’s requirements.

Conclusion

All mobile and responsive skins for MediaWiki I have covered in this blog post are recommended and can cheerfully be used for your wiki.

In the end your decision will not just depend on your individual use case for running a wiki but also on which kind of changes you would like to have for the skin and on either your personal technical skill level or on how much you would like to get involved yourself in doing these.

All of these skins can be used out of the box with you probably wanting to make only a few necessary adaptations regarding the visual appearance. Two of the skins, Chameleon and Tweeki allow for more or less invasive changes to the layout and visual appearance and require a medium to high level of technical skills to do them. The other two, Foreground and Pivot are fixed in their layout however still can be changed regarding their visual appearance. The skills needed here can be made by people with a low to medium high level of technical skills.

I hope you enjoyed reading this blog post and got something out of it. Please have a look at the follow-up blog posts covering the mobile and responsive skins mentioned here.

Hosting and Support

All of Professional.Wiki’s hosting plans offer the mobile and responsive skins for MediaWiki covered by this blog post. Also professional support is available to help you get the most out of your wiki. We will be very happy to assist you and make a difference for you!

Further reading


Enjoyed our article? We don't have like buttons but you can follow Professional Wiki on Twitter or subscribe to our newsletter!