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;}
...
}
/* Small screen / tablet / 760px to 991px */
@media (max-width: 991px) {
.mobile {display: block !important;}
.no-mobile {display: none !important;}
...
}
/* Smaller screen / tablet+phone / 480px to 759px */
@media (max-width: 759px) {
.mobile {display: block !important;}
.no-mobile {display: none !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.
Dieser Inhalt ist nur für mobile Endgeräte sichtbar.
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.
Dieser Inhalt ist nur für Bildschirme ab einer Größe von 992px sichtbar.
Sie suchen in Ihrer Firma derzeit einen Mediendesigner oder
einen Experten im Bereich Online-Marketing? Ich bin äußerst begeistert von Technologie, E-Commerce, Print, 3D Grafik und Shopdesign, und ich würde mich freuen, meine Fähigkeiten und meine Begeisterung in Ihr Unternehmen einzubringen.
Als Mediendesigner brenne ich nicht nur für meinen Beruf, sondern verfüge auch über eine besondere Magie, die ich gerne in meiner Arbeit einsetze. Auf meiner Website Medi2go.de können Sie einen schnellen Einblick in meine Leistungen und Arbeitsproben aus meiner Selbstständigkeit erhalten. Dort können Sie auch mein umfangreiches Know-how erkennen. In den letzten zehn Jahren konnte ich als E-Commerce Manager und Mediengestalter bei Möbel-Ideal.de noch viel mehr Erfahrung sammeln, wo ich derzeit noch tätig bin. Dieses Unternehmen wird leider aufgegeben.
Ich würde mich freuen, wenn Sie sich die Zeit nehmen würden, mein Portfolio anzuschauen und zu sehen, wie meine Fähigkeiten und Erfahrungen zu Ihrer offenen Stelle passen. Vielleicht können wir gemeinsam etwas Großartiges erreichen!
Bitte nehmen Sie Kontakt mit mir auf, um weitere Einzelheiten zu besprechen. Ich freue mich darauf, von Ihnen zu hören und mehr über Ihre Firma zu erfahren.
Mit freundlichen Grüßen aus Wiesmoor,
Jürgen Jester
