Besser als display: none – Inhalte auf Smartphones richtig ausblenden

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.

10 Kommentare zu “Besser als display: none – Inhalte auf Smartphones richtig ausblenden”

  1. Jochen

    Hallo,

    vielen Dank für die tolle Erklärung. Vielleicht können Sie mir einen kleinen Tipp geben wie ich folgendes umsetzten kann.

    Auf dem Desktop wird ein großes Headerbild angezeigt, auf einem kleinen Handy ist dieses total überflüssig. Wenn ich es nur ausblende wird das Bild dennoch geladen und es entsteht unnötiger Traffic. Kann ich hierfür jetzt die von Ihnen erklärte Technik einsetzten? Ich möchte das Bild allerdings auch nicht auf klick laden können, ein Handyuser sieht es einfach nicht.

    Liebe Grüße aus Köln,
    Jochen

    Antworten
    • Florence

      Hallo Jochen,

      freut mich natürlich erst mal, wenn meine Erklärungen nutzen 🙂

      Zur Frage: Wenn das Header-Bild auf dem Smartphone nicht angezeigt werden soll, so klingt das für mich eher danach, dass es eher dekorativ ist. Das heißt, man könnte es gut als Hintergrundbild per CSS einbinden innerhalb einer Media Query ab einer bestimmten Größe. Und innerhalb einer anderen Media Query kann man zusätzlich sicherheitshalber noch background-image: none; für die kleinen Geräte festlegen.
      Ein Beispiel dazu gibts bei http://timkadlec.com/2012/04/media-query-asset-downloading-results/, es ist der Test Nummer 5.

      LG

      Florence

      Antworten
  2. Christian

    Prima, vielen vielen Dank! Hilft mir sehr weiter, gerade auf Smartphones, da diese zu klein sind.

    Antworten
    • Florence

      freut mich 🙂

      Antworten
  3. Maki

    Hi,

    schöne Anleitung.
    Aber durch das Einbinden weiterer Scripte, erhöht sich doch die Ladezeit und der Server macht noch mehr Abfragen, um die Seite zu laden?
    klingt so bisschen nach „rechte Tasche, linke Tasche“

    Antworten
    • Florence

      Hallo Maki,
      yepp, natürlich muss man berücksichtigen, dass sich zusätzliche Skripte negativ auf die Performance auswirken können … ein wichtiger Punkt! Das muss man abwägen. Aber von der Usability ist es einfach schlecht, wenn du auf kleinen Screens Informationen unzugänglich machst … vielleicht folgt jemand einen Link, den er per E-Mail bekommen hat und die Person, die ihm die Mail geschickt hat, hatte die „Desktop“-Version und schickt die Mail genau wegen der Information, die der Empfänger dann auf seinem Smartphone nicht sehen kann … oder ähnliche Szenarien 🙂

      Antworten
  4. Mike

    Danke für die verständlichen Ausführungen. Das hilft!
    Ich habe nun aber noch das Problem, dass ich DIV’s mit beinhalteten Werbemittels auf kleineren Displays ausblenden muss. Das heisst, der DIV-Inhalt darf erst gar nicht geladen werden, wenn das Display eine gewisse Grösse unterschreitet. Welche Lösung gibt es hierzu? Vielen Dank!

    Antworten
    • Florence

      Mit Werbung ist es natürlich ein Spezialfall, weil Werbung ja nicht unbedingt zu den Inhalten zählt, die jemand vermissen wird 🙂 … d.h. ein Nachteil von display: none fällt schon mal weg. Ansonsten denke ich, kann man das Filamentscript ja auch so nutzen, dass man auf kleinen Screens keinen Link zu den Inhalten anzeigen lässt.

      Antworten
  5. Arno

    Hi, danke für die Erklärung! Ich habe gerade auch ein Problem zu lösen und würde möglichst gerne nach dem Responsive-Ansatz vorgehen. Dabei wird eine Liste von PDF-Dokumenten angezeigt. Bei dem Klick auf eines der Dokumente in der Liste wird dann auf der Desktop-Version der Seite auf der unteren Hälfte eine Vorschau zu diesem Dokument angezeigt, in der man rumscrollen und zoomen kann. Auf der Mobile-Version der Seite soll diese Vorschau entfallen um nicht unnötig Traffic zu verursachen. Ich habe mir überlegt, die Vorschau über einen Button aktivierbar zu machen, welcher dann auf der mobilen Version ausgeblendet wird. Allerdings könnte es für die Desktop-Nutzer der Seite nervig werden, immer wieder den Button aktivieren zu müssen beim Seitenaufruf. Kann man für die Desktop-Nutzer den Button automatisch aktivieren? Vielleicht gibt es ja auch eine bessere Lösung auf die ich gerade nicht komme? Vielen Dank und viele Grüße!

    Antworten
    • Florence

      Hallo Arno,
      wenn ich das richtig verstehe, gibt es in deinem Fall keine andere Lösung als einen Button oder Ähnlich. Denn es wird ja eine Liste von Dokumenten angezeigt und bei Klick auf eines wird die Vorschau dieses einen Dokuments angezeigt. Ohne Button/anklickbaren Link oder was auch immer wäre ja nicht klar, welche Vorschau angezeigt werden soll?
      Beste Grüße
      Florence

      Antworten

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>