Mobiles Webdesign ist heutzutage in aller Munde. Aus eigener Erfahrung weiß ich jedoch, dass viele, völlig egal ob Entscheider, Gestalter oder Entwickler, die wichtigsten Begrifflichkeiten durcheinanderbringen oder nicht wissen, was diese bedeuten.
Grund genug, um mit den Mythen aufzuräumen.
Daoismus ist eine Philosophie, wie der Buddhismus, eine Weise des Lebens, des Seins in der Welt, die aus einem Text der großen Antike stammt, das Tao Te Ching. Dessen 81 "Kapitel" befassen sich auf rätselhafte Weise mit der menschlichen Erfahrung, aber mit einem wichtigen gemeinsamen Thema, der Harmonie.
John Allsopp stellte im Jahr 2000 fest, dass die bekannten Regeln des Buchdrucks nicht auf das Web übertragbar sind. Damit meinte er, dass Webdesigner nicht die gewünschte Kontrolle über die Darstellung einer Webseite haben und auch nicht versuchen sollten, diese zu erlangen. Prägnante Stichworte sind hierbei "pixelgenaues Design" oder "CSS ist DPI fürs Web"?
2010 beschrieb Ethan Marcotte erstmals den Begriff Responsive Web Design. Damit lieferte er die Idee und das Konzept, um das von John Allsopp 2000 beschriebene Problem zu lösen - das flexible und auf Rastern basierende Grid. Dabei werden mit Hilfe von Media-Queries, beschrieben in CSS3, Bilder und andere Media-Dateien flexibel dargestellt.
Viewport != Browser Fenster
Fälschlicherweise wird oft der Viewport mit dem Browserfenster gleichgestellt. Dem ist aber nicht so. Der Viewport ist vielmehr der sichtbare Bereich einer Webseite innerhalb des Browserfensters. Dieser wird begrenzt durch den "Fold", den man mit dem Bruch bzw. der Faltung eines Buches oder einer Zeitung vergleichen kann.
Der Viewport kann in Portrait- und Landscape-Modus unterschieden werden und kann von Meta-Tags (z.B. bei iOS) beeinflusst werden. Das bietet jedoch keinen 100%-igenVerlass auf die Viewport-Größe und die Auflösung eines Ausgabegerätes.
Fixed Design
Das "fixed Design" bildet den Anfang der Webdesign-Entwicklung. Es besitzt ein festes starres Layout und ist sehr unflexibel.
Vorteile
Zu den Vorteilen gehören die einfache Planung, Gestaltung und Umsetzung sowie eine unkomplizierte Informationsdarstellung.
Nachteile
Die Nachteile liegen auf der Hand: das "fixed Design" bietet keine Usability-Optimierung für etwaige Ausgabemedien,? wie Desktop, Tablet, Smartphone etc. Es existiert demnach nur eine optimierte Ausgabe für alle Ausgabegeräte. Außerdem sind Darstellungsfehler nicht auszuschließen.
Fluid Design
Die Basis für das "fluid Design" ist die Angabe von Breiten in Prozent. Dadurch ist es auf eine Mindest- und Maximalbreite beschränkt und liefert innerhalb dieser Einschränkung stets das gleiche Layout. Bei sehr kleinen Auflösungen kann im schlimmsten Fall nur noch ein Wort pro Zeile dargestellt werden. Dafür nutzt es aber den vollständigen Viewport aus.
Vorteile
Laut Marcotte ist Responsive Web Design also möglich. Es nutzt den vollständigen Viewport, also bis zu 100% aus. Es lässt sich relativ einfach planen und umsetzen. Jedoch bedarf es einer komplexeren Gestaltung. Auch die Darstellung der Informationen erweist sich als schwierig, da bei einer Verkleinerung des Viewports immer mehr Inhalt unter dem "Fold" verschwindet.
Nachteile
Elastic Design
Das Hauptmerkmal von "elastic Design" ist die proportionale Skalierung. Das heißt, Media-Dateien wie Bilder behalten stets ihre Proportionen. Theoretisch ist somit eine Webseite bis ins Unendliche vergrößerbar. Gleiches gilt aber auch bei einer Verkleinerung des Viewports. Um zu kleine Schriften abzufangen, werden Media-Queries eingesetzt.
Vorteile
Der Platz, den der Viewport bietet, wird optimal ausgenutzt. Informationen werden immer gleich dargestellt, da sich auch der "Fold" verändert. Die Planung einer Webseite wird dadurch einfacher.
Nachteile
Das Skalieren der Webseite mit seinen Inhalten kann für den Nutzer ungewöhnlich sein. Die Umsetzung wird komplexer, insbesondere bei flexiblen Media-Dateien.
Adaptive Design
Responsive Webdesign ist nicht gleich Adaptive Webdesign! Beim "Adaptive Webdesign" werden verschiedene Layouts für verschiedene Viewports genutzt. Praktisch lässt sich das an einem "springenden Layout" erkennen, wenn der Viewport verkleinert wird. Es existieren also mehrere starre Layouts. Webseiten mit "Adaptive Webdesign" werden für bestimmte Viewport-Größen optimiert.
Vorteile
Das Designen wird einfacher. Es entsteht jedoch ein Mehraufwand, da Layouts für mehrere Auflösungen erstellt werden müssen. Die Umsetzung ist einfach und die Informationsdarstellung unkompliziert. Dabei steht die darzustellende Information im Vordergrund.
Nachteile
Der Viewport wird hierbei nicht mehr optimal genutzt, da das Layout "getriggert" wird ("springende Layouts"). Auch die Planung wird dadurch komplexer.
Responsive Design
"Responsive Design" ist die Summe aus flexiblen Rastern, flexiblen Bildern und Media-Dateien, umgesetzt mit Media-Queries. Dabei wird auf fluide Layouts gesetzt. Es ist fast immer optimal für alle Auflösungen und der Schwerpunkt liegt in der Darstellung der Informationen. Verschiedene Informationsblöcke können einzeln gestaltet und an verschiedenen Positionen im DOM angezeigt werden.
Vorteile
"Responsive Design" bietet eine optimale Nutzung des Viewports und die Darstellung der Informationen steht immer im Vordergrund.
Nachteile
Die Planung, Gestaltung und Umsetzung ist komplexer. Auch das Informationenmanagement sollte überdacht werden, da Media-Dateien keine festen Größen mehr haben können.
Usability und Responsive Web Design
Und warum nun der ganze Aufwand?
Es existieren immer mehr Ausgabegeräte, welche berücksichtigt werden müssen: Desktops, Smartphones, Tablets, TVs und Spielekonsolen sind nur einige davon.
Aber auch wegen der Barrierefreiheit. Die Bedienbarkeit und Zugänglichkeit einer Webseite sollte möglichst auf verschiedenen Ausgabegeräten gewährleistet sein.
Graceful Degradation
"Graceful Degradation" ist das Quasi-Gegenteil zu "Progressive Enhancement". Hierbei wird eine Webseite in erster Linie für moderne Browser entwickelt. Sollte nun ein älterer Browser genutzt werden, wird geringe Anwendererfahrung in Kauf genommen. Ein moderner Browser beispielsweise erzeugt das Menü mittels Javascript, ein älterer greift jedoch auf das <noscript>-Tag zurück. Sie erinnern sich an den Satz am Ende einer Webseite in den 90-ern? - "Bestimmt für Internet Explorer 6 mit einer Auflösung von 1024x768"? Das gilt heute allerdings nicht mehr als zeitgemäß.
Progressive Enhancement
Der hauptsächliche Gedanke von "Progressive Enhancement" ist die Trennung des Markups vom CSS, des Inhalts vom Design, des Javascripts von Markup und CSS und sogar die Trennung von CSS selbst. Die Anzeigbarkeit des Inhalts und die Erhaltung der Kernfunktionalität, unabhängig von aktivem Javascript oder Eignung von CSS (z.B. Papier), sind oberstes Ziel. Der Fokus liegt dabei auf dem Inhalt und nicht auf der Darstellung - die Gestaltung beginnt mit Inhalt. Ein wichtiger Bestandteil ist von "Progressive Enhancement" ist die Abfrage vorhandener Browser-Funktionen (Feature Detection).
"Mobile First" ist ganz im Sinne von "Progressive Enhancement". Es ist aber eher als Denkmuster für "vom Kleinen ins Große" zu verstehen. Die Entwicklung beginnt bei der kleinsten möglichen Auflösung. Dabei muss entschieden werden, welcher Inhalt initial angezeigt wird und wie der Informationsgehalt bei einer Vergrößerung des Viewports mitwächst. Es ist stark mit der Informationsarchitektur bzw. der Content-Strategie verknüpft und eher ein Denkansatz als ein technisches Design-Pattern.
Daraus ergeben sich neue Herausforderungen für Gestalter und Entwickler. Es erfordert ein Umdenken und das Lösen von bestehenden Paradigmen, wie z.B. Inhalte sind wichtiger als deren Darstellung.
Quellen: alistapart.com/article/dao, alistapart.com/article/responsive-web-design
