Webseiten-Elemente für mobile Endgeräte anpassen
Mit dem 2017er Template sind bereits die meisten Elemente nicht nur für die Desktop-Ansicht, sondern ebenso für die Darstellung auf mobilen Endgeräten angepasst.
Hier finden Sie eine kurze Anleitung wie Sie spezielle eigene Elemente Ihrer Webseite für mobile Endgeräte optimieren oder wie Sie bestimmte Inhalte in Abhängigkeit von der Displaygröße anzeigen oder ausblenden können.
CSS-Anpassungen selbst vornehmen
Um eigene Elemente für verschiedene Endgeräte zu optimieren, kopieren Sie untenstehenden Quellcode, fügen ihn in Ihre eigene Style-Datei ein und passen Ihre Styles entsprechend der hier angegebenen Displaygrößen an:
/* Small screen / tablet / 760px to 991px */
@media (max-width: 991px) {
...
}
/* Smaller screen / tablet+phone / 480px to 759px */
@media (max-width: 759px) {
...
}
/* Extra small screen / smartphone / 280px to 479px */
@media (max-width: 479px) {
...
}
Mobile Klassen verwenden
Sie haben außerdem die Möglichkeit über die Klassen "mobile" und "no-mobile" Einfluss auf die Anzeige von Inhalten auf mobilen Endgeräten zu nehmen.
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.
<div class="mobile">
<p>Dieser Inhalt ist nur für mobile Endgeräte sichtbar.</p>
</div>
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.
<div class="no-mobile">
<p>Dieser Inhalt ist nur für Bildschirme ab einer Größe von 992px sichtbar.</p>
</div>
In Kombination mit der Klasse "screenreader"
Sie können die Klassen "mobile" und "no-mobile" auch in Kombination mit "screenreader" verwenden. Für den Betrachter am Bildschirm oder mobilen Endgerät verändert sich dadurch nichts.
Für die Nutzer eines Screenreaders können Sie mit der Verwendung der Klasse "screenreader" jedoch sicher stellen, dass diese Inhalte dort ebenfalls zugänglich sind.
(Inhalte, die mit display:none ausgeblendet werden, sind auch für Screenreader nicht verfügbar)
<div class="mobile screenreader">
<p>Dieser Inhalt ist für mobile Endgeräte und Screenreader sichtbar.</p>
</div>
Anwendungsbeispiel: Mobile Klassen
Wofür braucht man Mobile Klassen überhaupt?
Stellen Sie sich vor, Sie haben zwei längere Listen, die Sie in der Desktop-Version zwar übersichtlich nebeneinander platzieren können, die in der Mobil-Version jedoch untereinander dargestellt werden müssen.
Siehe: Webseite - Beratung & Service
Jemand, der sich nun diese Listen auf dem Smartphone anschaut oder von einem Screenreader vorgelesen bekommt, muss entweder viel scrollen oder sich viel anhören, bevor er oder sie am eigentlichen Ziel ist.
Mit Hilfe der Mobile-Klassen ist es möglich auf unterschiedliche Bildschirmgrößen einzugehen und zusätzliche Inhalte einzufügen oder auch gezielt Inhalte auszublenden.
Im eingangs genannten Anwendungsbeispiel können wir also in der Mobil-Version zusätzlich Skip-Links anzeigen lassen, die es dem Nutzer erleichtern auf der Seite zu navigieren.
Screenshots:Ihnen ist ein Anzeigefehler aufgefallen?
Auf Grund der Vielzahl von Endgeräten und Browsern, die CSS-Styles vielfach unterschiedlich wiedergeben und unterstützen, kann es trotz all unserer Anpassungen zu Darstellungsfehlern führen.
Wenn Sie auf Fehldarstellungen von Standard-Elementen stoßen, teilen Sie uns dies gerne unter Angabe Ihres Browsers und Endgerätes mit. Als Standard-Elemente gelten solche, die in unserem Styleguide aufgeführt sind.
Kontakt
Webredaktion- Dagmar da Silveira Macedo
Redakteurin Webredaktion - Uwe Matull
Mitarbeiter Webredaktion