Der ultimative Einstieg in Responsive Webdesign

Dieser Artikel soll einen Einblick in diese Technik geben, ohne dabei zu technisch zu werden, um Online-Verantwortlichen, Designern und auch Entwicklern einen Überblick zu verschaffen. Was ist Responsive? Unter Responsive Webdesign versteht man sowohl den Ansatz, wie Seiten entworfen und umgesetzt werden, als auch wie aktuelle technische Möglichkeiten im Rahmen von HTML5 und CSS3 kombiniert werden. Wenn man das Wort „responsive“ ins Deutsche übersetzt, erhalten wir die Bedeutung „reagierend“, „reaktionsfähig“ oder „bedarfsgesteuert“. Im Wesentlichen erklären diese Wörter schon die Kernaussage von „Responsive Webdesign“ (im weiteren Verlauf mit RWD abgekürzt). Dieser Ansatz ermöglicht es also, auf die verschiedenen Geräte, genauer auf deren technische Bedingungen, zu reagieren und reaktionsfähig zu bleiben, ohne auf eine separate Seite wechseln zu müssen. Technisch gesehen wird hauptsächlich auf die zur Verfügung stehende Bildschirmgröße bzw. –auflösung „reagiert“. CSS3 Mediaqueries Wie kann nun auf die Auflösung des jeweiligen Endgerätes reagiert werden? Dafür stehen in der aktuellen Version der Cascading Style Sheets (Level 3) die sogenannten „Media Queries“ zur Verfügung: In diesem Beispiel wird einem HTML-Element die Farbe Rot zugewiesen. Diese Eigenschaft wird jedoch für alle Geräte, die eine Bildschirmgröße bis 480 Pixel habenaufgehoben und durch die Farbe Blau überschrieben. Weitere „Mediaqueries“ sowie die Möglichkeit, diese miteinander zu kombinieren, werden hier beschrieben: wiki.selfhtml.org/wiki/CSS/Media_Queries Mithilfe der Mediaqueries lassen sich Vorgaben bezüglich Größe, Position, Fluss und anderer Eigenschaften von Elementen im HTML machen, die speziell für bestimmte Klassen von Auflösungen gelten: Smartphones: 320px bis 480px Tablets: 768px bis 1024px Computer-Desktop: 1024px+ Der durch HTML ausgezeichnete Inhalt bleibt damit erst einmal für alle Geräte gleich, denn es wird ein und dasselbe HTML-Markup an den Client Browser gesendet, egal auf welchem Device er sich befindet. Raster als Grundlage Mit diesem technischen Hilfsmittel an der Hand haben wir die Grundlage, um Seiten responsive umzusetzen. Wie einleitend erwähnt, hat RWD nicht nur einen technischer Aspekt, sondern ist auch gestalterisch zu verstehen. „Form follows function“ gilt auch in diesem Fall und so sollte gerade beim kreativen Prozess der responsive Ansatz eine wichtige Rolle spielen. Eine wesentliche Hilfe dabei bieten sogenannte „Grids“ (Gestaltungsraster), in welche sich das Design einteilen lässt. Gestalten mit Grids Diese Raster dienen der Aufteilung von Inhalten wie Text , Bild und Navigation in Spalten und Grundlinien mit gleichen Maßen. Solche Gestaltungsraster haben zwar ihren Ursprung im klassichen Print-Medium, aber lassen sich ebenso auch auf die Welt der Pixel anwenden. Im Web ist es inzwischen sehr verbreitet, ein Gridsystem mit 12 Spalten zu benutzen, da 12 durch 2, 3, 4 und 6 teilbar ist, so dass Bereiche auf der Seite entstehen können, die eine gewisse Anzahl an Spalten, eben diese Quotienten, nutzen. Durch ein flexibles Grid ist es möglich, die Elemente einheitlich und harmonisch zu positionieren. Progressive Enhancement Eine weitere Orientierungshilfe bringt der Gedanke des „Progressive Enhancement“. Dabei wird das Layout und der Inhalt soweit festgelegt, dass die Seite auf dem Gerät mit den kleinsten technischen Voraussetzungen gut anzeigbar ist. Hier spielen Aspekte wie Auflösung und Bildschirmgröße eine Rolle, aber auch HTML5/CSS3 und Javascript-Fähigkeit sollten bedacht werden. Es ist empfehlenswert den Prozess in drei Schichten einzuteilen, um sicherzustellen, dass mindestens der eigentliche Inhalt auf Geräten mit eingeschränkter technischer Möglichkeit angezeigt wird: 1) Inhalt und semantische Auszeichnung durch HTML 2) CSS für Aussehen: Layout, Farben und Typographie 3) Javascript: Extra Funktionalität und Benutzerkomfort Diese Einteilung bedeutet nicht, dass man auf „State of the Art“-Techniken verzichten sollte und die Webseite langweilig sein muss. Es bedeutet nur, dass man mit dem kleinsten gemeinsamen Nenner anfangen sollte, nämlich mit Inhalt und Auszeichnung, und dann darauf basierend aufbauen kann. Mobile First Die logische Konsequenz aus „Progressive Enhancement“ ist der Ansatz “Mobile First”. In diesem Sinne entwirft und konzipiert man die Webseite für schmale Bildschirmgrößen zuerst und erst im weiteren Verlauf werden diese für größere Auflösungen optimiert. Es ist deutlich einfacher, ein kleineres Layout zu entwickeln und es nachträglich zu erweitern bzw. zu vergrößernals umgekehrt. Hier spielen, wie in meinem Beitrag „Mythos Mobile“ bereits verdeutlicht wurde, die Bedürfnisse des Benutzers eine maßgebliche Rolle. Man wird bei dem „Mobile First“-Ansatz quasi durch den verringerten Platz dazu gezwungen, sich auf das Wesentliche zu konzentrieren: Relevanter Inhalt, eine leicht zu bedienende Navigation und so wenig Ablenkung vom Wesentlichen wie möglich. Ziel ist immer eine exzellente User Expirience. Darauf aufbauend wird es einem leichter fallen, diese User Experience beizubehalten, wenn man durch größere Auflösungen „mehr Platz“ zur Verfügung hat. Layout, Typographie und Bilder Die konkrete Umsetzung des Responsive Designs beinhaltet natürlich mehr als das bisher Angeführte. In dem Moment, wo mehr Pixel in der Breite zur Verfügung stehen, ändern die Inhalts-Blöcke durch geschicktes Benutzen von Textflussänderungen und anderen Positionierungsmöglichkeiten ihre Position. Auch in der Typographie gilt es einiges zu beachten, damit der Text leserlich bleibt: So sollten Schriftgrößen nicht mehr absolut definiert werden, sondern mit elastischen Maßeinheiten (z.B. em) versehen werden, die sich dann an einer Basisgröße relativ berechnen. Wie sieht es mit Bildern aus? Die Größe der Bilder dynamisch zu skalieren, ist mit den heutigen technischen Möglichkeiten kein Problem mehr, aber es wäre verkehrt, dies auf dem Client-Browser durchzuführen. Denn dies hätte zur Folge, dass immer das Bild mit maximaler Größe geladen und nachträglich skaliert wird. Auch gilt es, Ladezeiten durch geringe Bandbreite im mobilen Netz und ein eingeschränktes Datenvolumen geschickt zu beachten. Die Lösung: Adaptive Images. „Die Lösung von Adaptive Images fügt sich dabei nahtlos in die Ansprüche des Responsive Webdesigns ein und verspricht Bilder in ihrer Größe automatisiert an unterschiedliche Browser anzupassen. Adaptive Images setzen dabei auf JavaScript und PHP. Ein kleines JavaScript-File identifiziert den Browser des Besuchers, während PHP daraufhin das Bild auf der Website entsprechend anpasst. Eine .htaccess-Regel leitet alle Anfragen für jpgs, pngs und gifs an das PHP Image Processor File weiter. Adaptive Images ist eine Ressource, die sich einfach in jede PHP-Website per Plug and Play integrieren lässt.“