How To Make MediaWiki Responsive And Mobile Friendly?

Default MediaWiki installation is not programmed to go responsive on many mobile devices  (i.e. smartphones and tablets). It is not mobile optimized and hence you will have to use additional skins or extensions to make a responsive MediaWiki website.

Otherwise your website may be difficult to view, with menus, layouts and media, not appearing in the best place on small screen devices.

In this lesson you will learn about completely optimizing your MediaWiki website for mobile devices, implementing a responsive layout to make it look good on all screen types.

Extension:MobileFrontend (requires: Extension:Mantle) (1.23+)  are best MediaWiki extensions that comes bundled with mobile responsive skin providing your website a mobile-friendly view.

The extensions are developed officially by Wikimedia, and used by Wikipedia itself. Installing and activating these two extensions will make your Mediawiki website mobile-friendly.

Start by downloading ‘Mobile Frontend’ and ‘Mantle’ extension. Then upload them to your website’s root /extensions folder, extract files and make sure the files are located in /MobileFrontend and /Mantle directories in your /extensions folder.

Now open LocalSettings.php file (located in your website’s root directory) and add these lines:

require_once "$IP/extensions/Mantle/Mantle.php";
require_once "$IP/extensions/MobileFrontend/MobileFrontend.php";
$wgMFAutodetectMobileView = true;

That’s it. Now either open your website on a smartphone/tablet or you may test it on your laptop too by clicking new ‘Mobile View’ link on the footer of your MediaWiki website.

Main purpose of Mantle extension is to implement compilation into JavaScript of templates sent the server to the client by ResourceLoader, while the HTML templating language RFC is implemented. Whereas MobileFrontend extension provides MediaWiki a mobile-friendly view.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.