Effizient, performant und wartbar: Praktische Techniken für Responsive Webdesign

Responsive Webdesign. (Grafik: pringletta)
Bei Responsive Webdesign geht es um eine ganzheitliche Betrachtung aller relevanter Interfaces. Für ein optimales Ergebnis auf allen Geräte stehen verschiedene Techniken zur Verfügung.
Icon Fonts
Mit der Vorstellung von Retina Displays ist die Auflösung von Grafiken zu einer Herausforderung geworden. Ein Lösungungsansatz besteht im Einsatz von mehreren Versionen einer Grafik – abhängig von der Bildschirmauflösung (PPI). Dieser Ansatz ist aber hauptsächlich beim Einbinden von Content-Grafiken mit serverseitigem Handling der Bildformate praktikabel und für die Gestaltung von responsiven User-Interfaces nicht empfehlenswert. Mit Icon-Fonts kann man dieses Problem umschiffen. Sie werden einfach als Schriften eingebunden. Da sie ebenfalls vektorbasiert sind, ist die Darstellung auflösungsunabhängig und der Einsatz im User-Interface entsprechend einfach. Gegenüber Einzelgrafiken haben Icon Fonts den Vorteil, dass der Browser lediglich eine Font-Datei und nicht zahlreiche Einzel-Icons laden muss. Das reduziert den Overhead-Traffic und ermöglicht die verlustfreie Skalierung und einfache Style-Anpassungen.
Focal Cropping
Beim Skalieren von Bildern rutschen manchmal wesentliche Elemente aus dem für den Benutzer sichtbaren Bereich. Das Motiv verliert so jeglichen Sinn. Es gibt verschiedene Ansätze, diese Probleme anzugehen. Focal Point ist einer davon, bei dem mit purem CSS ein für das Bild essenzieller Punkt definiert wird. Sollte das Bild beschnitten werden, fungiert dieser Punkt als Zentrum. Hierfür sucht man den Punkt des Bildes, der fokussiert werden soll, aus und gibt den Offset von der Mitte des Bildes via Klassendefinition an das Element weiter.
HTML
<div class="focal-point right-3 up-3"> <div><img xsrc="guy.jpg" alt=""></div> </div>
Listing 1
Dateigröße gering halten: Compressive Images
Greift ein Webdesigner im Responsive Design nicht auf responsive Images zurück, wird im Zweifel an viele Geräte eine zu große Version der Grafik ausgeliefert. Daher sollte dieser zumindest sicherstellen, dass die Dateigröße möglichst gering ausfällt. Mit jpeg-Mini kann die Dateigröße von Bildern deutlich reduziert werden. TinyPNG bietet denselben Dienst für PNG-Grafiken und liefert optisch verlustfreie PNG-Grafiken mit bis zu 70 Prozent der ursprünglichen Dateigröße zurück.
Conditional Loading
Conditional Loading kann als Erweiterung zum Mobile-First-Ansatz gesehen werden. Das ausgelieferte Grundlayout beschränkt sich hierbei auf das für das Mobilgerät notwendige Markup. Durch eine Abfrage, die analog zu den im Stylesheet definierten Media-Queries erfolgen kann, wird dann zusätzlicher HTML-Code nachgeladen, der nur für das jeweilige Endgerät relevant ist. Richtig angewandt resultiert diese Technik in einer enormen Performance-Steigerung.
HTML/JavaScript
<div> <p>Hier könnte ein Artikeltext stehen, der für alle Geräte dargestellt werden soll.</p> </div> <script type=“text/javascript“> if($(window).width()>=600){ $(‚body’).append(load_site_module(‚friendlist’)); } </script>
Listing 2
Das obige Listing zeigt eine Beispielimplementierung für Conditional Loading, bei der in der Basis-Version der Seite nur ein Artikeltext ausgeliefert und bei entsprechender Bildschirmgröße zusätzlicher nur für diese Größe gedachter Content nachgeladen wird. Auf diese Weise werden nur die benötigten Komponenten für die jeweilige Gerätegröße geladen und müssen nicht im Stylesheet bedacht werden. Auch die zu übertragende Datenmenge und Renderzeit kann so spürbar reduziert werden.
Wie bei jeder Technik, gilt abzuwägen, wann der Einsatz sinnvoll ist. Zu viele nachgeladene Daten resultieren in übermäßigem HTTP-Overhead. Auch das Ausliefern von vollständig unterschiedlichen Inhalten für verschiedene Auflösungen sollte im Hinblick auf User-Experience und SEO mit Bedacht erfolgen.
Conditional CSS
Die Conditional-Loading-Technik funktioniert gut mit Pixelwert-basierten Media-Queries. Diese Abfragen können in einigen Szenarien jedoch ungenau sein, denn einige Browser berechnen den Scrollbalken für die screen-width unterschiedlich, sodass Pixelwerte Probleme bei der Gestaltung der Breakpoints für ein Design bereiten können. Die Lösung besteht im Einsatz von „em“-Werten. Diese lassen sich jedoch nicht ohne weiteres mit JavaScript abfragen, um dann die entsprechenden Inhalte und das Markup für diese Media Query nachzuladen.
Mit Hilfe von Pseudo-Klassen lässt sich allerdings auch dieses Problem umgehen. Wenn Webdesigner dem body-Tag des Dokuments ein Pseudoelement anhängen, können sie mit der content-Eigenschaft einen beliebigen und für JavaScript lesbaren Wert übergeben.
HTML/JavaScript
@media all and (min-width: 45em) { body:after { content: 'widescreen'; display: none; } } var size = window.getComputedStyle(document.body,':after').getPropertyValue('content'); if (size == 'widescreen') { // Load some more content. }
Listing 3
Vertical Media Queries
Vertical Media Queries sind ein weiterer Schritt in Richtung „Mobile First“. Bei diesem Ansatz wird zunächst das gemeinsame Styling definiert und anschließend mit Media Queries um zusätzlichen Eigenschaften ergänzt. Das folgende Listing zeigt, wie man für zwei Breakpoints eines Designs unterschiedliche Überschriften-Styles definieren kann.
CSS
h1 { font-family: Arial, Helvetica, sans-serif; font-weight:normal; } @media screen and (min-width: 700px){ h1{ font-size:18px; line-height:24px; } } @media screen and (max-width:699px){ h1 { font-size:14px; line-height:16px; } }
Listing 4
In vielen Fällen kann das in deutlich kürzerem und übersichtlicherem CSS resultieren – schließlich ist es einfacher, Elemente-Eigenschaften hinzuzufügen, als fertigen Layouts Eigenschaften wegzunehmen. Auch auf die Rendering-Geschwindigkeit dürfte sich diese Technik ab einer gewissen Komplexität des Stylesheets positiv auswirken.

Praktisch für Grafiken: Dienste wie JPEGmini ermöglichen eine deutliche Reduzierung von Bilddateien.
Media Queries Splitting
Die Arbeit mit Responsive Webdesign zwingt Webworker dazu, in vielen Dimensionen gleichzeitig zu denken und diese im CSS festzuhalten. Bei zunehmender Anzahl von Breakpoints und Gestaltungselementen nimmt die Komplexität des Stylesheets exponenziell zu und die Übersicht dementsprechend ab. Um nicht in endloser Suche nach den jeweiligen Code-Fragmenten zu verzweifeln, empfiehlt sich das Aufteilen von Media Queries. Teilt man das Styling für Artikel und Artikelübersicht in verschiedene Media Queries, resultiert das in einem deutlich besser wartbaren Code und mehr Übersicht bei notwendigen Änderungen.
Fazit
Responsive Webdesign ist ein spannender, aber vergleichsweise junger und sich ständig weiterentwickelnder Bereich, der Webworker noch sehr lange Zeit begleiten wird. Die in diesem Artikel beschriebenen Techniken sind erst der Anfang der zu erwartenden Entwicklung, die uns in Zukunft für die Gestaltung von responsiven und performanten Websites zur Verfügung stehen werden: eine notwendige Entwicklung in Anbetracht der sich ständig weiterentwickelnden Medienlandschaft mit verschiedensten Bildschirmgrößen, Formaten, Auflösungen und Endgeräten.
Sehr schöner Beitrag! Responsive Webdesign wird leider immer noch sehr häufig von kleinen bis mittelständigen Unternehmen stark vernachlässigt, und das selbst bei ganz aktuell aufgesetzten Internetseiten. Gerade durch die immer größer werdende Menge an Zugriffen via Smartphone und Tablet, ist das ein nicht zu unterschätzender Wettbewerbsvorteil den man mit RWD relativ günstig realisieren kann. Und gerade deshalb wundere ich mich immer sehr, wenn ich mir eine neue Internetseite anschaue und nix ist es mit Responsive Webdesign :-(
Icon fonts sind so vom vorletztem jahr… Da fehlt eine ganze mengeb im artikel wie bsp svg, grunt mit imagemin, livereload, modernizr usw.
Also gerade JPEGmini hätte ich nicht erwähnt. Das gibt es nur als Bezahldienst und es gibt gleichwertige Alternativen, die nichts kosten. TinyPNG verwende ich selbst gerne, aber gerade beim jpg reduzieren finde ich, verliert man immer Farbinformationen.