Responsive Webdesign - die Basics

Responsive Webdesign zählt definitiv zu den heißesten und spannendsten Themen des Jahres 2011. In diesem Artikel habe ich ein paar Gedanken, Denkanstöße und Erfahrungswerte für euch zusammen gefasst.

Was bedeutet Responsive Webdesign eigentlich?

Responsive Webdesign basiert auf fluid Grids und flexiblen Layouts (Dazu später). Das Layout passt sich an die verfügbare Bildschirmauflösung an, positioniert den Content dementsprechend und skaliert Texte, Bilder, Slider und Videos mit. Das Webdesign reagiert also auf die Gegebenheiten des Endgeräts und liefert ein dementsprechend angepasstes Layout aus. Richtig eingeschlagen hat das Thema erst durch die Implementierung und Unterstützung von CSS3 Media Queries. Mit Hilfe von Media Queries können Parameter wie zum Beispiel die Auflösung des Endgeräts oder dessen Orientierung bestimmt (mehr zu den Features von Media Queries) werden. Auf Basis dieser Informationen kann dem Endgerät spezifischer CSS-Code ausgeliefert werden, der ein Layout erzeugt, das auf die Gegebenheiten abgestimmt ist.

Gelungene Beispiele für Responsive Webdesign

Und warum das Ganze?

In den letzten Jahren haben sich zwei Trends stark hervorgehoben, die für uns Webdesigner immer wieder neue Herausforderungen darstellen. Zum Einen werden die Auflösungen der Desktop Monitore immer größer, sodass wir in einigen Fällen schon mit einer Content-Breite von 1280px arbeiten. Andererseits nimmt aber auch die Internetnutzung auf mobilen Endgeräten sowie die Vielfalt der Bildschirmauflösungen zu. Alleine bei mobilen Endgeräten reicht die Bandbreite möglicher Bildschirmauflösungen von 240 x 320 Pixel bis 1024 x 600 (oder 768) Pixel. Es liegt also auf der Hand, dass eine Website auf einem 1920 x 1080 Pixel Monitor anders aussehen wird, als auf einem älteren 240 x 320 Pixel Endgerät oder einem iPad 2, das mit einer Auflösung von 1024 x 768 Pixel arbeitet. Ein Begriff, der mir dabei immer wieder in den Sinn kommt: Chaos! Responsive Webdesign versucht, Ordnung in das Konvolut aus Geräten und Bildschirmauflösungen zu bringen, ohne eine Website dabei auf bestimmte Geräte zu optimieren. So könnten hochauflösende Desktop Monitore beispielsweise mit einem 4-spaltigen Content-Layout bedient werden, während der Content für mobile Endgeräte in 1- oder 2-spaltige Layouts verpackt wird. Idealerweise wird damit eine Website für möglichst viele Endgeräte zugänglich gemacht und vermittelt das Gefühl einer nativen Applikation, ohne eigenes auf ein spezifisches Endgerät optimiert zu sein. Klingt sinnvoll, oder?

Worauf ist bei der Umsetzung von Responsive Webdesigns zu achten?

Konsistenz – schlüssiges Design, das sich durch alle Auflösungen durchzieht

Ein entscheidender Faktor für gut umgesetztes Responsive Webdesign mittels Media Queries ist vor allem die Wiedererkennbarkeit und Konsistenz des Designs. Es liegt auf der Hand, dass aufgrund der unterschiedlichen Bildschirmgrößen das Layout und die Anordnung des Contents, von Auflösung zu Auflösung anders dargestellt werden muss. Zentrale Elemente wie zum Beispiel Logos und Farbwelten sollten aber möglichst konsistent bleiben. Idealerweise findet sich der User im Desktop Interface genauso zurecht, wie auch in den mobilen Versionen, ohne dabei den Aufbau sowie das Navigations- und Contentschema neu erlernen zu müssen.

Mobile und Portable Endgeräte verhalten sich anders

Anders als bei Desktop Interfaces gibt es bei mobilen und portablen Versionen einer Website keinen Maus-Cursor, keine Hover-States und auch keine Dropdown-Submenüs. Was bedeutet das für das Interface Design? Navigationselemente, sollten sehr gut als solche erkennbar sein und auch wirklich als Schaltflächen verstanden werden. Wichtig ist hier, dass die Textgröße hinauf skaliert wird, die Größe der Schaltfläche großzügig bemessen ist und dem gesamten Element genug Space gegeben wird. Schließlich navigieren wir ja nicht mit der Maus, sondern zumeist mit dem Finger und wollen das Betrachten einer Website nicht als Geschicklichkeits-Übung erleben. Textlinks sollten sich klar vom Text unterscheiden.

Navigationsdesign

Der Erfolg einer Website steht und fällt oftmals mit dem Navigationskonzept und –design. Dies gilt natürlich auch für den Responsive Webdesign Ansatz. Allerdings werden wir hier vor zusätzliche Herausforderungen gestellt, denn auf mobilen und portablen Endgeräten ist das Userverhalten nunmal anders, als am Desktop. Wie können Navigationen vom Desktop Interfaces auf mobile Interfaces übertragen werden? Wie werden Elemente der Hauptnavigation angeordnet, wie geht man mit Navigationselementen auf 2. oder 3.Ebene um? Wie bildet man Dropdown-Navigationen ab? Fragen, die gut überlegt sein müssen und nicht selten ausgeklügelte Lösungen erfordern. Ellen hat sich speziell dem Thema „Webseiten Navigationen im responsive Webdesign“ gewidmet, diesen Artikel kann ich euch nur empfehlen.

Bei Five Simple Steps wurde die Navigation so gelöst, dass mobilen Usern bei geringerer Bildschirmauflösung eine Dropdown Box zur Verfügung gestellt wird.

Datenmenge

Gerade bei mobilen und portablen Endgeräten zählt oftmals jedes KB an Datenmenge, das geladen werden muss. Aus dem Grund sollte man einmal mehr auf einen schlanken, semantischen Quellcode achten. Wer glaubt, bei mobilen Varianten die Menge der geladenen Daten mit Display: none zu reduzieren, der sollte aufpassen. Mit Display: none werden divs und andere Elemente zwar ausgeblendet, allerdings werden die dahinter liegenden Daten trotzdem geladen.

Zusätzlicher Aufwand

Responsive Webdesign bietet zahlreiche Vorteile und Möglichkeiten vor allem in Hinblick auf die wachsende mobile Internetnutzung. Mit einem Webdesign, das responsive reagiert, müssen User, die mobil surfen nicht mehr abgefangen und auf eigene Domains umgeleitet werden. Fakt ist aber auch, dass es zusätzlichen Aufwand bedeutet, eine Website responsive zu gestalten. Der Zusatzaufwand zieht sich durch alle Bereiche und Stadien der Entstehung einer Website. Konzeptionell muss angedacht werden, wie Desktop und mobile Versionen aussehen und funktionieren werden. Mockups werden erstellt; davon abgeleitet wird ein Design entwickelt, das wie oben beschrieben, unterschiedlichen Anforderungen standhalten muss. Im nächsten Schritt findet das CSS-Coding und HTML-Templating statt. Auch hier muss mit zusätzlichem CSS-Coding Aufwand gerechnet werden. Schlussendlich muss das Design natürlich getestet werden. Auch hier ist mit zusätzlichem Zeitaufwand zu rechnen, da das Design und Verhalten in möglichst vielen Geräten und Bildschirmauflösungen untersucht werden sollte. Eine Website lässt sich also nicht im Spaziergang responsive machen. Zu Beginn eines Projekts sollte daher gut abgewogen werden, ob der Responsive Webdesign Ansatz für dieses spezifische Projekt Sinn macht und die richtige Kosten-Nutzen-Lösung darstellt.

Tools & Plugins, die das Arbeiten mit Responsive Webdesign erleichtern

Grids

Mit dem Golden Grid System lassen sich flexible Grids für Auflösungen von 240 Pixel bis 2560 Pixel erzeugen.

Tiny Fluid Grid ist ein hilfreiches Framework, mit dem ihr ebenfalls flexible Grids erzeugen könnt.

Text & Tabellen

Um Textinhalte flexibel zu halten, empfiehlt es sich, die Schriftgröße nicht in absoluten Pixelwerten, sondern in relativen EM Angaben festzulegen. Für die Umrechung von Pixel in EM gibt es hier einen hilfreichen EM Converter. Chris Coyier beschäftigt sich intensiver mit Tabellen und Datensheets und liefert Lösungsvorschläge für die tabellarische Darstellung von Daten im responsive Webdesign.
Das FitText jQuery Plugin aus dem Hause Paravel passt die Schriftgröße von Überschriften flexible an die gegebene Bildschirmauflösung an. Dieses Plugin ist für die Skalierung von Headlines gedacht und sollte auch wirklich nur dafür genutzt werden.

Bilder, Videos, Slider

Im Responsive Webdesign wird natürlich auch die optimale Skalierung und Auslieferung von Bildern ganz groß geschrieben. Responsive Images bietet eine schöne Möglichkeit, Bilder via JavaScript an die entsprechende Bildschirmauflösung anzupassen und für das Endgerät optimiert auszuliefern. Auch für flexible Videos gibt es auf der Web Designer Wall einen Beitrag, der uns zeigt, wie nicht nur HTML5 Videos, sondern auch Iframe Embedded Videos mit Hilfe von CSS elastisch gemacht werden können.
Slider sind momentan aus dem Webdesign kaum noch wegzudenken. Auch für Responsive Webdesign gibt es hier mit dem Flexslider jQuery Plugin eine sehr schöne, semantische Lösung, um Slider und Sliderinhalte mitzuskalieren und an die gegebene Bildschirmauflösung anzupassen.

Testing

Beim Testen von Responsive Webdesigns in unterschiedlichen Bildschirmauflösungen kann ein Tool wie Screenfly unter die Arme greifen.

Fazit

Eine Website responsive zu gestalten ist definitiv ein Trend, der langsam aber sicher auch in unseren Breitengraden aufgegriffen und angenommen wird. Schön, wie ich finde. Nachdem ich täglich auf mobilen Endgeräten Websites ansurfe, habe ich den Komfort und die Eleganz von gutem Responsive Design sehr schnell zu schätzen gelernt. In Hinblick auf Accessability, Usability und Reichweite hat der Responsive Webdesign Ansatz großes Potential, muss aber gut überlegt, durchdacht und abgewogen werden. Responsive Webdesign ist zwar seit einiger Zeit ein heißbegehrtes Thema, muss aber nicht automatisch der richtige Lösungsansatz für jedes Projekt sein.
Wie sind eure Erfahrungen mit Responsive Webdesign? Kennt ihr schöne Beispiele, vielleicht sogar aus Österreich?