Responsive Design Skizze

Sorgenkind: Responsive Images

Responsive Web Design, aktuell vielleicht der Trend schlecht hin, entwickelt sich zu einem soliden Bestandteil bei der Gestaltung von Webseiten.
HTML5 befindet sich im Last Call1 und Media Queries werden in den aktuellen Browsern bereits vollends unterstützt. Gute Voraussetzung also für einen praxisgerechten Einsatz.

Das umfängliche Verständnis von Responsive Web Design beschränkt sich nicht nur auf das Layout einer Webseite, sondern gilt auch für die inhaltlichen Bestandteile. Die Optimierung von textuellen Inhalten, hinsichtlich der unterschiedlichen Gerätearten und -größen, lässt sich problemlos und zielgerichtet mit Hilfe von CSS erzielen. Komplexer gestaltet sich die Situation bei multimedialen Elementen, wie Grafiken bzw. Bildern, Videos oder auch Soundfiles. Zwar lassen sich Bild- und Grafikelemente per CSS skalieren, die übertragene Datenmenge bei einem HTTP-Request ist jedoch immer dieselbe. Besonders für mobile Endgeräte wäre es wünschenswert, Inhalte nur in der Größe und Qualität auszuliefern, in der diese auch tatsächlich dargestellt werden können. Dadurch ließe sich die Ladezeit, speziell bei schlechter Funkverbindung, erheblich verbessern.

Status Quo

Es existieren einige Lösungsansätze, um dem Problem Abhilfe zu schaffen. Diese basieren zu meist auf einer Kombination unterschiedlicher Technologien und verhalten sich nicht in jedem Fall zuverlässig. Ein Beispiel dafür ist Responsive Images2 der filament group. Durch den Einsatz von fiktiven HTML-Attributen, JavaScript und einem HTTP-Redirect via htaccess-Datei wird das passende Bild, entsprechend der Display- bzw. Viewportgröße, ausgeliefert. Allein die Voraussetzung einer client-seitigen Scriptsprache schränkt die Zuverlässigkeit dieses Lösungsansatzes stark ein. Durch Implementation einer geeigneten Fall-Back-Lösung ließe sich dieser Umstand korrigieren, jedoch läge das Ergebnis nicht im Rahmen des Optimums.

Flexible Theorie und statische Wirklichkeit

Die bekannten Lösungsansätze sind Komplex und beweisen wenig Praxistauglichkeit. Für eine zuverlässige Verbesserung des Zustandes könnte, lediglich eine Verankerung eines entsprechenden Elements im W3C-Standard sorgen. Interessant ist an dieser Stelle, dass ein solches HTML-Element bereits für Video-Inhalte vorgesehen ist3. Über die native HTML Implementierung lassen sich unterschiedliche Quelldateien für verschiedene Voraussetzungen festlegen und ausliefern. Vorschläge für ein ähnliches Element in Bezug auf Bilddateien wurden bereits mehrfach diskutiert aber bislang nicht durchgesetzt4 5. Angesichts des Statuses von HTML5 und der Historie des Vorschlagsmanagements scheint es nahezu unwahrscheinlich, ein entsprechendes Element noch im finalen Standard implementieren zu können.