Responsive Webdesign

  • Geschrieben am: 07.09.2012
  • von: admin

In den letzten Jahren haben sich zwei Trends stark hervorgehoben, die für den 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. Responsive Webdesign versucht nun, 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 eigens auf ein spezifisches Endgerät optimiert zu sein und ohne für jedes Endgerät eine spezifische Webseite bauen zu müssen. So basiert Responsive Webdesign auf fluid Grids und flexiblen Layouts. Das Layout passt sich an die verfügbare Bildschirmauflösung unterschiedlicher Devices (PC, Tablet-PC, Smartphone) 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.


Abb.1 : responsive Webdesign dargestellt auf relevanten Endgeräten

Was ist Responsive Design denn jetzt?
"Responsive Webdesign bezeichnet eine Praxis im Webdesign, bei der der grafische Aufbau, insbesondere die Strukturierung der einzelnen Elemente wie z. B. Navigationen und Texte, von Webseiten dynamisch und unter Berücksichtigung der Anforderungen des betrachtenden Gerätes erfolgt. Technische Basis sind neuste Webstandards wie HTML5 und CSS3."

Was steckt technisch dahinter?
Möglich wurde 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. Auf Basis dieser Informationen kann dem Endgerät spezifischer CSS-Code ausgeliefert werden, der ein Layout erzeugt, das auf die Gegebenheiten abgestimmt ist. Hier mal ein Beispiel für das Abb. 1 entsprechende CSS-Skript:

/* Landscape phones and down */

@media (max-width: 320px) { ... }

/* Landscape phone to portrait tablet */

@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */

@media (min-width: 768px) and (max-width: 1024px) { ... }

/* Large desktop */

@media (min-width: 1200px) { ... }

 

Was muss man bei der Umsetzung beachten?

Der entscheidende Faktor für gut umgesetztes Responsive Webdesign mittels Media Queries ist vor allem die Wiedererkennbarkeit und Konsistenz des Designs. Es ist sinnvoll, dass aufgrund der unterschiedlichen Bildschirmgrößen das Layout und die Anordnung des Contents, von Auflösung zu Auflösung anders dargestellt werden muss. Elemente wie zum Beispiel Logos und Farbwelten sollten aber möglichst konsistent bleiben. Idealerweise findet sich der User im Desktop Interface genauso zurecht, wie in den mobilen Versionen, ohne dabei den Aufbau sowie das Navigations- und Contentschema neu erlernen zu müssen. Wo sind denn noch Unterschiede? 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 Platz gegeben wird. Schließlich navigiert man nicht mit der Maus, sondern zumeist mit dem Finger und man will das Betrachten einer Website nicht als Geschicklichkeits-Übung erleben. Textlinks sollten sich klar vom Text unterscheiden. 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. Wie aufwändig ist die Umsetzung? 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 in möglichst vielen Geräten und Bildschirmauflösungen getestet werden. 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.


Abb. 2: ein konkretes Beispiel für die unterschiedliche Darstellung auf unterschiedlichen Endgeräten

 

Bild-Quellen: adido, designmodo

Text-Quellen: Wikipedia, Twitter Bootstrap, Juergen Liechtenecker