Wiki handyfähig machen

Hi zusammen,

ich hatte das Problem, dass das Monobook Skin der Wikimedia Software nicht responsive ist. Das heißt, es wurde nur schlecht auf Handys und auch Tablets angezeigt. Da nun zu allem Überfluß auch noch Google dazu übergegangen ist, das bei seinen Rankingfaktoren zu berücksichtigen und Seiten, die nicht-responsive sind, abzustrafen, musste Abhilfe her. Hierzu will ich kleine Anleitung schreiben. Der sauberste Weg ist, das Mobile Skin von Wikimedia zu aktivieren und auf eine Url wie mobile.wikidomain.de zu verlegen. Das habe ich mir kurz angeguckt und als zu aufwendig für mein kleines Wiki angesehen. Also musste ich Monobook responsive machen.

Hierfür reicht es im head der MonoBook.php den viewport einzustellen und einige kleine CSS Änderungen mit einer Mediaquery vorzunehmen.

Änderung in der MonoBook.php:

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

in den head einfügen und zwar in einfach in einen nicht PHP-Teil.

Dazu kommen folgende CSS Änderungen. Ich weiß nicht, ob sie jedem gefallen und zu jedem Wiki passen. Die CSS Änderungen blenden die Menüs links aus und platzieren das Logo über den Text. Das sieht dann im Ergebnis ähnlich wie die Mobile Skin von Wikipedia aus.

@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-personal, #p-navigation, #p-search, #p-tb {
display: none;
}

#p-logo {
zoom: 2.59;
}
}

Die Pixel Angaben könnt ihr noch leicht verändern wie es für euer Wiki passt. Und vergesst bitte nicht, eine Sicherheitskopie der veränderten Dateien anzulegen. Ich will nicht schuld sein, dass ihr Euer Wiki zerschießt. Zoom in dem obigen CSS würde ich auch nicht mehr verwenden, weil es deprecated CSS ist, aber es erfüllt vorerst seinen Zweck. Und nach diesen Änderungen mag Google auch wieder euer Wiki 🙂

Viele Grüße
Euer Till

Leave a Reply

You must be logged in to post a comment.