Mobile First: Die eigenen CSS-Styles für mobile Endgeräte anpassen

Google macht Schluss mit Desktop-Ansichten. Seit September gibt es nur noch Mobile First. Bei der Mobile First-Indexierung nutzt Google vor allem die mobile Version der Inhalte für die Indexierung und das Ranking. Wer hier also noch keine Arbeit investiert hat, sollte sich jetzt schnell darum kümmern die eigenen CSS-Styles für mobile Endgeräte anzupassen.

In Einzelfällen kann es vorkommen, dass ältere WordPress-Templates dies noch nicht zu 100% erfüllen. Oft, so wie in meinem Fall, gibt es nur noch selten oder keine Updates mehr für das verwendete Blogtheme. Da in den Jahren doch vieles angepasst wurde, werde ich so schnell nicht auf ein neues Theme wechseln und dann hunderte Blogposts prüfen, ob diese „noch gut aussehen“. Aus dem Grund kann es helfen, das eigene Theme selbst anzupassen.

CSS-Anpassungen selbst vornehmen

Über das Backend erreichen wir den Bereich über DESIGN > CSS BEARBEITEN
Im Frontend klicken wir oben auf den „CUSTOMIZER“-Button und können dann in einem zweigeteilten Schirm CSS bearbeiten und das Resultat recht live beobachten. In der Regel hat jeder Blogger eine Menge eigene Elemente, die man gerne für die mobile Version optimieren möchte.

So sehen die Anweisungen für die verschiedenen Auflösungen aus

Kopiere den untenstehenden Quellcode und füge ihn in Deine eigenen Styles ein. Dann nur die Styles entsprechend der Displaygrößen anpassen bzw um Anweisungen erweitern:


/* Desktopscreen 992px to ... */
@media screen and (min-width: 992px){
.mobile {display: none !important;}
.no-mobile {display: block !important;}

/* Extra small screen / smartphone / 280px to 479px */
@media (max-width: 479px) {
.mobile {display: block !important;}
.no-mobile {display: none !important;}
...
}


Zusätzliche mobile Klassen
Wie oben bereits eingefügt hat man zusätzlich gleich die Möglichkeit über die Klassen „mobile“ und „no-mobile“ Einfluss auf die Anzeige von Elementen zu nehmen. So gibt es manchmal Webinhalte, die nicht auf Mobile umsetzbar sind und so leicht abgeschaltet werden können.

mobile
Alle Elemente, welche die Klasse „mobile“ besitzen, werden bis zu einer Bildschirmgröße von 991px mit display:block angezeigt. Ab 992px werden diese Elemente mit display:none versteckt.

no-mobile
Alle Elemente, welche die Klasse „no-mobile“ besitzen, werden bis zu einer Bildschirmgröße von 991px mit display:none versteckt. Ab 992px werden diese Elemente mit display:block angezeigt.