Responsiv(es Webdesign)

Aus SELFHTML-Wiki
(Weitergeleitet von RWD)
Wechseln zu: Navigation, Suche
Unter responsivem Webdesign versteht man, dass das Layout einer Webseite für das Ausgabemedium angepasst wird. Übersetzt wird das englische Adjektiv „responsive“ etwa mit „ansprechbar“, „empfänglich“, „zugänglich“ oder „antwortend“, was auf den ersten Blick nicht sehr viel mit dem Internet zu tun hat.

Brad Frost zeigt in Responsive Web Design: Missing the Point[1], dass es nicht darum geht, neben einer Desktop-Version noch eine oder mehrere mobile Layoutvarianten zu erstellen, sondern Seiten zu erstellen, die möglichst geräteunabhängig schnell laden und überall gut aussehen.[2]


This is not the web! Ansicht verschiedener Ausgabemedien vom intelligenten Kühlschrank bis zur Großbildleinwand

Empfehlung: Sie sollten das Layout nicht an eine bestimmte Viewportgröße koppeln, sondern es tatsächlich nach Ihren Inhalten ausrichten.

Mobile first

Da die meisten Webseiten schon in irgendeiner Form vorhanden sind, liegt es nahe, dieses Layout an bestimmten Breakpoints mittels Media Queries an kleinere Viewports anzupassen. Dabei stand man vor dem Problem, dass Dekorationen und Grafiken nicht auf die kleineren Monitore passen. Trotz der Bandbreitenbegrenzungen vieler Mobilfunk-Verträge wurden diese aber mitübertragen und geladen, dann aber ausgeblendet.

Luke Wroblewski hatte in seinem Buch „Mobile First!“[3] die Idee, den Prozess umzudrehen und mit einer abgespeckten, mobilen Version zu beginnen. Dies sollte aber kein Selbstzweck sein, sondern den Fokus wieder auf die ältere, aber immer noch gültige Maxime „Inhalt über Design“ und andere Usability-Grundsätze legen.

Mobile First baut auf folgenden Tatsachen auf:

  • Inhalte im Layout für kleine Bildschirme werden meist untereinander dargestellt.
  • Dies ist auch das Verhalten eines jeden Browsers bei einem HTML-Dokument ohne jegliches CSS.
  • Die Inhalte für einen großen Viewport werden oft nebeneinander angeordnet.

Es ist also zweckmäßig, als erstes die allgemein gültigen Definitionen und die für kleine Bildschirme ins CSS zu schreiben und dann erst in einer Media Query das CSS für große Bildschirme. Ansonsten bräuchte man entweder zwei komplett unterschiedliche Stylesheets oder würde erst alles für große Bildschirme in Spalten anordnen und dies dann für Geräte mit kleinem Bildschirm alles wieder rückgängig machen.

Mobile First sollte folglich nicht bedeuten, dass mobile Endgeräte bevorzugt werden, sondern, dass das Layout für mobile Geräte aus praktischen Gründen vor den Anpassungen für den Desktop in der CSS-Datei liegt.

Device-agnostic

Agnostizismus (altgriechisch ἀγνοεῖν a-gnoein „Unwissen“) ist die philosophische Ansicht, dass Annahmen – insbesondere theologische, die die Existenz oder Nichtexistenz einer höheren Instanz, beispielsweise eines Gottes, betreffen – entweder ungeklärt oder grundsätzlich nicht klärbar sind.[4]

Trent Walton bevorzugt anstelle des Begriffs Responsive Webdesign den des Device-Agnostic.[5] Damit will er betonen, dass Webdesigner nicht ahnen können, welche Geräte mit welchen Fähigkeiten Benutzer einsetzen werden und daher möglichst geräteunabhängig gearbeitet werden soll. Dabei geht seiner Meinung nach die Betonung weg von der Responsiviät mittels Media queries und hin zu Techniken, die geringe Übertragungsraten in mobilen Netzen und Besonderheiten der Toucheingabe genauso berücksichtigen.

Tastaturen, Mäuse und Touchgeräte

Viele JavaScript-Interaktionen und CSS-Hovereffekte funktionieren auf Touchgeräten nicht, da es kein mouseover und kein :hover gibt. Zum Teil versuchen die Browser dieses Verhalten nachzuahmen, besser ist es jedoch bereits bei der Programmierung Touch-Events zu implementieren.

Webseiten im Fullscreen-Modus können mit ESC wieder in die klassische Ansicht zurückgesetzt werden, nur nicht auf Touch-Geräten, da es dort keine Tasten gibt. Auch der Klammergriff ( strg + alt + entf ) ist auf Touchgeräten nicht möglich.

Beachten Sie: Schließen Sie bei media queries auf keinen Fall von kleinen Viewport-Größen auf das Vorhandensein von Touch-Geräten. Manch kleines Mobilgerät hat eine Tastatur, während es schon 30-Zoll-Touch-Screens gibt.

Performance-Optimierung

Scott Jehl legte in seinem Artikel „Planning for Performance“[6] das Augenmerk auf die sich immer weiter steigernde Datenmengen, die heutige Webseiten ausliefern. Während die durchschnittliche Webseite 1,7 MB groß ist, haben manche responsive Seiten wie disney.com, die für jeden Browser die passenden Frameworks, Grafiken und Skripte ausliefern, über 5 MB, teilweise sogar über 100 MB!

Gerade angesichts der Tatsache, dass Benutzer mobiler Geräte nicht nur über WLAN, sondern auch über 3G surfen, sollten Webseiten nicht nur responsiv, sondern auch schlank sein. Das Surfen im Mobilnetz bewirkt eine zeitliche Verzögerung von 2 Sekunden beim Seitenaufbau, da der Datenstrom vom Server zusätzlich noch den Funksender des Mobilfunknetzes passieren muss.

Auch wenn LTE und 4G diese Antwortzeiten verringert haben, ist mobiles Surfen an sich langsamer als Surfen mit WLAN oder in Kabelnetzen. Deshalb sollten Sie versuchen, die Anzahl der http-Requests so gering wie möglich zu halten. Normalerweise blocken externe CSS-Dateien und JS-Skripte im Unterschied zu Grafiken das Rendering einer Seite. Durch das Nachladen von Stylesheets mit Hilfe von Skripten und nachträglichem Einfügen mittels document.write wird der schon gerenderte Seiteninhalt wieder verändert.

Empfehlung: Vermeiden Sie ein Laden der Seite, bevor die Stylesheets geladen sind. Dieses FOUC (Flash of unstyled Content) ist extrem ärgerlich und verzögert den Seitenaufbau.

Quellen

  1. ↑ Brad Frost: Responsive Web Design: Missing the Point
  2. ↑ Brad Frost: This is the web
  3. ↑ Luke Wroblewski: „Mobile First!“
  4. ↑ Wikipedia: Agnostizismus
  5. ↑ Trent Walton: Device-Agnostic
  6. ↑ alistapart.com: „Planning for Performance“ von Scott Jehl
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Responsiv(es_Webdesign)&oldid=95041“