Categories
English

Making Wiki mobile-ready

Hi together,

I had the problem that the monobook skin of the Wikimedia software is not responsive. This means that it was only displayed poorly on mobile phones and also tablets. Now that Google has also moved to take this into account in its ranking factors and to punish non-responsive sites, google had to remedy the situation. I want to write a little manual on this. The cleanest way is to activate the Mobile Skin of Wikimedia and move it to a url like mobile.wikidomain.de. I looked at this briefly and considered it too expensive for my little wiki. So I had to make Monobook responsive.

For this, it is sufficient to set the viewport in the head of the MonoBook.php and make some small CSS changes with a media query.

Change in MonoBook.php:

<meta name="viewport" content="width=device-width,initial-scale=1">

into the head and simply in a non-PHP part.

In addition, the following CSS changes. I don't know if everyone likes them and fits any wiki. The CSS changes hide the menus on the left and place the logo over the text. This looks similar to Wikipedia's Mobile Skin.

@media only screen and (max-width: 1024px)
#content
font-family: 'Helvetica Neue', Helvetica, 'Nimbus Sans L', Arial, 'Liberation Sans', sans- serif;
font-size: 22px;
line-height: 26.4px;
width: 85%;
margin-left: 0px;
margin-top: 400px;
}
#p-cactions, #p-staff, #p-navigation, #p-search, #p-tb
display: none;
}

#p-logo
zoom: 2.59;
}
}

You can still easily change the pixel data as it fits your wiki. And please do not forget to back up the modified files. I don't want to blame for your wiki smashing. Zoom in the above CSS I would also no longer use because it is deprecated CSS, but it serves its purpose for the time being. And after these changes, Google likes your wiki again 🙂

Regards
Your Till

Leave a Reply