Florence Maurice

Webthemen

Besser als display: none - Inhalte auf Smartphones richtig ausblenden

Geschrieben am:

Beim responsiven Webdesign geht man üblicherweise von einer HTML-Basis aus, die Anpassungen an die unterschiedlichen Viewportbreiten finden über Media Queries, d.h. über CSS statt. Das Problem dabei ist, dass auf einem klassischen Desktop-Monitor wesentlich mehr Platz zur Verfügung steht, als bei einem klassischen kleinen Smartphone-Screen.

Wenn Inhalte auf einem Smartphone einfach keinen Platz finden, greift man gerne zu display: none, um Inhalte gezielt auf einzelnen Endgerätegruppen auszublenden. Das hat jedoch so seine Nachteile. Wer sagt beispielsweise, dass Nutzer von kleinen Screens bestimmte Informationen nicht brauchen?

Aber von Anfang an. Das Ausblenden ist mitunter sehr praktisch. Das beliebte Framework Bootstrap bietet beispielsweise dafür eine Reihe von responsiven Helferklassen wie hidden-xs, hidden-sm, hidden-md oder hidden-lg.

Das Ausblenden von Inhalten auf Smartphones wird etwa durch den folgenden Code realisiert:

@media (max-width: 767px) { 
.hidden-xs {
display: none !important;
}
}

display: none ist natürlich recht praktisch, aber es können zwei Probleme auftreten: das eine betrifft die Performance, das andere, dass es sein kann, dass Inhalte dadurch nicht mehr erreichbar sind.

Performance

Inhalte, die über display: none ausgeblendet werden, werden trotzdem heruntergeladen. Wenn man beispielsweise schreibt:

.bildgr { display: none; }

dann wird das Element mit der Klasse bildgr geladen. Das ist besonders schmerzlich, wenn auf diese Art große Ressourcen wie Bilder auf dem Smartphone ausgeblendet werden. Falls jemand dann wirklich mobil unterwegs ist, ist zum einen die Latenzzeit größer und zum anderen die Verbindung schlechter ... das würde schon per se zu einer längeren Wartezeit führen ... wenn aber dann auch noch Ressourcen heruntergeladen werden müssen, die nicht benötigt/nicht angezeigt werden, ist das natürlich kontraproduktiv.

Für Smartphone-Nutzer nicht mehr verfügbare Inhalte

Teilweise wird display: none aber auch bei kleineren Textelementen/Komponenten eingesetzt, was sich aus Performance-Gründen kaum negativ auswirkt. Hier kann aber das Problem auftreten, dass damit eine Information, die augenscheinlich wichtig genug ist, um sie Desktop-Nutzern zu präsentieren, auf Smartphones nicht erreichbar ist. Ein Beispiel hierfür ist mir beim mobilen BR-Wetter (http://www.br.de/wettervorhersage/wetter-bayern/bayern) begegnet: Anscheinend brauchen Nutzer die Informationen über die Windstärke nicht.

Die folgende Ansicht präsentiert sich Nutzern von Tablets oder Geräten mit mehr Platz - man beachte die Angabe zum Wind rechts.

br-wetter mit Information zur Windstärke

Bei weniger verfügbarem Platz gibts hingegen keine Infos mehr über den Wind:

BR-Wetter auf einem Smartphone ohne Informationen zum Wind

Es gibt die verschiedensten Gründe, warum man sich über den Wind informieren möchte; und es leuchtet mir nicht ein, dass ein Smartphone-Nutzer diese Information weniger benötigt als ein Nutzer eines Tablets oder anderen Geräts.

Besser als display: none

Was ist aber die Alternative zu display: none, wenn der Platz einfach nicht ausreicht? Eine überzeugender Ansatz besteht darin, ausgewählte Inhalte erst einmal nicht anzuzeigen, aber sie auf Anforderung durch den Nutzer (d.h. Klick) einblenden zu lassen. Bei mehr verfügbarem Platz sind die Inhalte hingegen sofort sichtbar.

Ajax-Include-Pattern

Links: bei kleinem Viewport wird der Inhalt nicht angezeigt, lässt sich aber per Klick anfordern. Rechts: Bei großem Viewport steht der Inhalt direkt zur Verfügung.

Eine fertige Lösung dafür gibt es von der filamentgroup unter http://www.filamentgroup.com/lab/ajax-includes-modular-content.html

Und so verwendet man das Skript: Zuerst einmal müssen die benötigten JavaScript-Dateien eingebunden werden:

<script src="../../libs/jquery/jquery.js"></script> 
<script src="../../libs/matchMedia/matchMedia.js"></script>
<script src="../../libs/matchMedia/matchMedia.addListener.js">
</script> <script src="../../src/ajaxInclude.js"></script>

In einem weiteren JavaScript-Teil wird die Funktionalität über ajaxInclude() ausgelöst:

<script> $("[data-after]").ajaxInclude(); </script>

Im Beispiel wirkt das Plugin bei Elementen mit den Attributen data-after. Bei einzelnen Elementen kann man nun über das data-Attribute angeben, dass zusätzliche Inhalte erst ab einer bestimmten Breite geladen werden sollen. Im folgenden Beispiel wird der Inhalt von zusaetze.html ab einer Breite von 40em direkt angezeigt – bei kleineren Bildschirmen kann dieser Inhalt über einen Link angefordert werden:

<div> 
<h2 data-after="zusaetze.html" data-media="(min-width: 40em)">
<a href="zusaetze.html">Ergänzende Inhalte</a></h2>
</div>

Die beiden data-Attribute steuern das Ganze. Hinter data-after steht der Verweis auf eine Datei an, deren Inhalt geladen werden soll; mit data-media gibt man an, ab welcher Größe der Inhalt direkt erscheinen soll. Ein sehr einfaches Beispiel zeigt das Grundprinzip des ajaxInclude-Beispiels. Das Beispiel lässt sich natürlich an vielen Stellen noch verbessern. Mehr dazu und den weiteren Möglichkeiten gibt es auf der Webseite des Projekts https://github.com/filamentgroup/Ajax-Include-Pattern/

Fazit: Inhalte bei kleinen Screens nur auf Anforderung und bei großem Screens sofort zu laden ist eine weitaus bessere Strategie als das Ausblenden per display: none.