Responsive Webdesign - Probleme und Lösungen

Webdesigner, Webentwickler oder Webworker sind heutzutage immer häufiger darauf angewiesen, Ihre Projekte von Anfang an für verschiedene Bildschirmgrößen und Endgeräte zu konzipieren. Es ist nicht absehbar, ob ein Besucher die Website mit einem Desktop PC, einem Fernseher oder einem mobilen Endgerät (Smartphone, Tablet, Wearable) betrachten wird. Dank CSS3, Media Queries und der notwendigen Portion Javascript kann der Anforderung, Inhalte dynamisch und adaptiv auszugeben, entsprochen werden, so dass dem Endgerät die entsprechenden, unterschiedlichen Designs und Inhalte geliefert werden.

Unnötige Inhalte und zu große Bilder

Responsive Webdesign bietet klare Vorteile, doch die Nachteile liegen auf der Hand:

1. Unnötige Inhalte: Die mobile Version einer Website lädt in der Regel zuviele, weil unnötige Daten. Es existiert zwar die Möglichkeit, sekundäre Inhalte per Stylesheet-Angabe auszuschalten, trotzdem werden diese zunächst einmal geladen.
2. Zu große Bilder: Ein für die Darstellung auf einem hochauflösenden Monitor gedachtes Bild läßt sich zwar problemlos per CSS verkleinern, besitzt aber nach wie vor die gleiche Dateigröße. Die Bandbreite wird also auf einem mobilen Endgerät genauso gefordert, wie bei einem Desktop PC. Es wäre also weitaus geschickter, verschiedene Bildgrößen zur Verfügung zu stellen, abhängig vom Display oder der Bandbreite. 

Auf das Notwendigste beschränken: Conditional Delayed Loading

Betrachten wir die Problemstellung einmal im Beispiel eines Online-Magazins. Stellen wir uns vor, dass neben dem üblichen Hauptartikel ein oder mehrere Seitenspalten dargestellt werden, in denen beispielsweise die am häufigsten kommentierten Artikel aufgelistet sind. In einer regulären, responsiven Umsetzung würde die Seitenspalte auch auf Smartphones geladen werden, aber mittels

display:none;

verborgen.

Viel geschickter funktioniert das Ganze mit ein wenig Javascript-Unterstützung, beispielsweise wie auf 24ways.org beschrieben. Grundsätzlich sollte Respsonsive Webdesign nach dem Konzept "mobile-first" bzw. "content-first" erfolgen. Das bedeutet nichts anderes, als das man sich im ersten Schritt um die Definition der Inhalte für die mobilen Endgeräte kümmert. Diese Inhalte haben die höchste Relevanz; alle weiteren Inhalte sind so gesehen sekundär, und werden in der Darstellung auch entsprechend behandelt.

Im oben genannten Beispiel besitzt der Hauptartikel, der in der Hauptspale dargestellt wird, die höchste Relevanz. Dieser Inhalt wird ganz normal ausgeliefert. Das Javascript überprüft genau an dieser Stelle die Breite des Bildschirms, und lädt die weiteren Inhalte nur dann nach, wenn genug Raum vorhanden sein sollte. Auf diese Weise wird die den mobilen Endgeräten zur Verfügung stehende Bandbreite geschickt geschont. Damit Nutzer mit geringen Bildschirmauflösungen nicht gezwungen sind, komplett auf diese Nebeninformatioenn zu verzichten, wäre eine Möglichkeit, Links zum Nachladen der Inhalte nach dem Hauptartikel zu integrieren.

Adaptive Images: Bilder serverseitig ausliefern

Diese Technik setzt auf eine Kombination von PHP und .htaccess Anweisungen (Link: adaptive-images.com).

Und so funktioniert es:

1. Ein Javascript-Snippet sorgt beim laden des DOM dafür, dass die Bildschirmgröße des Benutzers ausgelesen, und in einem Session Cookie gespeichert wird.
2. Sobald der Browser einen <img .. />-Request an den Server sendet, schaltet sich die .htaccess dazwischen, und leitet die Umfrage an einen speziellen .PHP-Skript weiter.
3. Dieser Skript liest den im Cookie gespeicherten Wert der Bildschirmgröße aus. Je nach Definition soll jetzt das für geeignete Bild ausgeliefert werden, beispielsweise in 800x600px.
4. Nun prüft das Skript, ob das Bild in der angeforderten Auflösung auf dem Server vorliegt, z.B. in einem separaten Verzeichnis /ai-cache/800. Falls dem so ist, wird es an den Client ausgeliefert.
5. Sollte das Bild nicht vorhanden sein, gibt es verschiedene Fallback-Szenarien. Beispielsweise könnte geprüft werden, ob das Bild in der nächst kleineren Version vorliegt, also z.b. in /ai-ache/400

Das Skript ist natürlich weitaus komplexer. So können Zeitstempel der Bilder verglichen werden, so dass Bilder nur dann neu erzeugt werden, wenn das Original ausgetauscht wurde. Die Offsets für die Weiten der Bilder sind frei definierbar, und nicht etwa auf "groß" und "klein" beschränkt. Die Komprimierungsstufe der JPGs läßt sich ebenso definieren wie der Pfad der erzeugten Bilder.

Die Nachteile: Serverseitig muss zunächst PHP 5.X undGD Library unterstützt werden, außerdem funktioniert diese Lösung nicht in Kombination mit Content Delivery Networks. Außerdem läßt sich, gerade mit den entsprechenden, heutzutage in der Regel installierten, Browser-Addons, nicht mit Sicherheit sagen, dass ein Cooke hinterlegt wird. Immerhin kann man für diesen Fall definieren, ob stets das größte oder das kleinste Bild ausgeliefert werden soll.

Fazit

Keine der vorgestellten Lösungen ist die wahre, denn jede muss mit dem ein oder anderen Nachteil leben. Früher oder später wird es aber auch für responsive Images eine zufriedenstellende Lösung geben. Bis dahin wird man sich weiterhin mit Hacks, Kniffen und Workarounds begnügen müssen. Doch mal ehrlich: Daran hat man sich doch längst gewöhnt.. ;-)

Noch nicht das Ende ...

Schön sind die vorgestellten Ansätze alle nicht, denn Sie müssen immer mit dem einen oder anderen Nachteil leben. Es ist offenkundig, dass hier eine echte lösung gebraucht wird. Sinnvoll wäre zum Beispiel eine konkrete anweisung im Markup. Doch wie könnte die aussehen? Ein Vorschlag von Bruce Lawson nutzt ein <picture>-Element:

<picture alt="angry pirate">
	<source src="hires.png" media="minwidth:800px">
	<source src="midres.png" media="minwidth:480px">
	<source src="lores.png">
	<!-- fallback for browsers without support -->
	<img src="midres.png" alt="angry pirate" />
</picture>

Je nach Bildschirmbreite würde der Browser dann die entsprechende Quelle für das Bild aussuchen und nur ein Bild laden. Vielleicht wäre es an der Stelle geschickter, den Media Queries im Head-Bereich einen eindeutigen Namen mitzugeben und das Media-Attribut dann als Einschränkung zu nutzen.

<img src="midres.png" media="normal" />
<img src="hires.png" media="wide" />

In dem Fall hätten Sie im Kopf drei Media Queries vorgesehen und ihnen die Namen „small”, „normal” und „wide” gegeben.

Das Bild midres.png aus dem Code-Beispiel wird nur geladen, wenn die Bedingungen für „normal” zutreffen; hires.png wird nur geladen, wenn die Bedingungen für „wide” greifen. Das ist zumindest kürzer, und Sie könnten den Code einfacher auf andere Breiten umstellen.

Früher oder später wird es auch für responsive images eine zufriedenstellende lösung geben. Bis dahin werden Sie mit dem einen oder anderen Hack leben müssen. Nichts Neues für Webworker.