Responsive Webdesign – vom statischen zum dynamischen Webdesign

Webentwickler unterscheiden oftmals zwischen zwei verschiedene Ansätze im Webdesign. Bei einem statischen Ansatz ist der gesamte Webcontent in ein starres Grid-Layout eingebunden, wobei die Inhalte nur innerhalb einer bestimmten Auflösung einwandfrei funktionieren. Bei diesem Ansatz wird eine Website beispielsweise für eine Desktopauflösung entwickelt und zusätzlich noch eine zweite Auflösungsvariante (adaptiver Ansatz) realisiert, welche als mobile Websiteversion für Smartphones dient. So entsteht zunächst ein fixes Grid-Layout, welches mit einer festen Displayskalierung entwickelt wird und sich an der Anzeige im jeweiligen Browser für Smartphone, Tablet und Desktopbildschirm als Darstellungsfenster orientiert.

Wie auch bei den zuvor genannten Ansätzen steht zu Beginn des Responsiven Webdesigns ein bestimmtes Grundgerüst, was jedoch auf einem flexiblen Layout-Grid entsteht. Dieses basiert bei einem dynamischen Ansatz ebenfalls auf einer gängigen Bildschirmauflösung und fester Pixelgröße. Das Verhältnis führt letztendlich dazu, dass im Screendesign oftmals ein Layout mit festen Spalten zum Einsatz kommt. Eine Aufteilung, die schon von kleineren Bildschirmen oftmals nicht mehr ansprechend dargestellt wird. In der Folge muss also eine flexible Anpassung eines dynamischen Grids erfolgen, um die Nutzererfahrung konstant auf hohem Niveau zu halten. Denn jeder Nutzer hat gewisse Ansprüche (User-Experience) in Sachen Aussehen und Bedienbarkeit, was eine funktionsgerechte Darstellung unerlässlich macht. Natürlich möchte jeder Betreiber einer Website auch in der mobilen Version den vollen Inhalts- und Funktionsumfang bieten.

Nehmen wir an, dass zu den Auflösungskategorien im Hochformat nun auch noch eine Darstellung im Querformat möglich sein soll, dann liegt es nahe, für jede Seite eine spezifisch optimierte Version bereitzustellen. Das führt jedoch schnell zu einer überzogen intensiven Pflege und verursacht mitunter extreme Kosten. Aus diesen Gründen ist es sinnvoll ein Responsive Webdesign zu entwickeln, da sich die Darstellung anpassungsfähig an dem jeweiligen Viewport orientiert. Das bedeutet, dass letztendlich alle Inhalte, egal ob Header, Tabellen, Grafiken, Bilder oder auch Texte sich flexibel an die Gegebenheiten anpassen. Gestaltungsraster (Grid), Schriftgrößen und Bild dürfen daher nicht statisch deklariert werden, sondern müssen ab einem gewissen Umbruchpunkt (Pixelverhältnis) anpassungsfähig bleiben.

Das Wort „responsive“ kann wohl am ehesten mit dem Wort reagierend oder auch reaktionsfähig übersetzt werden. Gemeint ist damit die Beschreibung des Responsive Webdesigns als Entwicklungsansatz, welcher in der Lage ist, auf die jeweiligen Gegebenheiten eines Webseitenabrufs zu reagieren. Dabei sollte der Entwickler auch immer eine stückweit von seinem festen Muster abrücken und Kontrolle im Workflow abgeben. Das heißt im Umkehrschluss, dass die Arbeit der beteiligten Webdesigner und Programmierer noch mehr verzahnt werden muss. Denn während eine statische Seite nach dem herkömmlichen Wasserfallmodell umgesetzt wird, bei dem die einzelnen Prozessphasen mehr oder weniger voneinander getrennt bearbeitet werden und aufeinander aufbauen, sind die Entwicklungsschritte beim Responsive Webdesign in weiten Teilen miteinander verwoben. Die lineare Vorgehensweise von einem Schritt zum nächsten funktioniert an dieser Stelle zumeist nicht mehr.

Grundlegend müssen sich die Entwickler davon verabschieden, die volle Kontrolle über alle Darstellungen einer Website zu haben. Das bedeutet im Umkehrschluss, dass auch das Layout-Grid nicht mehr mit starren Pixelgrößen angelegt werden kann, sondern bestimmte Umbruchpunkte vergeben werden, was dazu führt, dass die Darstellung sich ab einem definierten Pixelwert automatisch ändert.

Dieser Automatismus erfolgt über die Medienabfrage im verwendeten Stylesheet (MediaQueries). Im Fall des Responsive Webdesign kommen dabei bestimmte Pixelwerte und deren Relationen zur Gesamtauflösung als Kriterien für eine automatische Darstellungsanpassung infrage. Wird eine neue Website erstellt und konzipiert, gibt es verschiedene Ansätze, die je nach Auswahl der Zielgruppe zu empfehlen sind.

Zum einen kann hier der "mobile-first" Ansatz verfolgt werden, bei dem die Entwicklung ausgehend von der kleinsten Bildschirmauflösung aus erfolgt. Bei diesem „von-unten-nach-oben“ Ansatz werden die wichtigsten Inhaltselemente bestimmt und eben auf diese kleinste Darstellungsgröße hin ausgewählt und angepasst. In der Entwicklung gilt es jedoch darauf zu achten, keine Inhalte wegzulassen oder zu unterschlagen, sondern in dem Fall weniger wichtige Inhalte nach hinten zu rücken. Zum anderen kann die Webentwicklung von oben nach unten umgekehrt erfolgen.

Beispielsweise gibt es Entwicklungsprozesse, die von einer größtmöglichen Bildschirmauflösung (4096 × 2160 Pixel – 4k2k) beginnen und auch eine neue Art der Programmierung mit sich bringen. Des Weiteren ist der sogenannte "content-first" Ansatz zu empfehlen, bei dem die ganzheitliche positive Nutzererfahrung im Vordergrund steht.

Das Design rückt hierbei in den Hintergrund und der Nutzer steht im Fokus. Bei diesem Entwicklungsansatz werden die Inhalte je nach Zielgruppe und Viewport ausgewählt, welche die höchste Priorität für den Nutzer besitzen. Hierbei müssen in der Planungsphase bereits alle Präferenzen der Nutzer mitgedacht werden.

Als zweiter Grundpfeiler müssen im Responsive Webdesign alle Texte und typografischen Elemente ebenfalls anpassungsfähig sein. Denn unlesbare Überschriften oder Textbeiträge führen in der Regel zu schnelleren Absprüngen und weniger Conversions. In der Entwicklung ist also darauf zu achten, dass Schriftgröße, Zeilenabstand und Zeilenlänge flexibel an die verschiedenen Viewports angepasst werden. Wichtige Informationen in Textform sollten auch auf kleinstem Raum schnell zu erfassen sein. Grundlegend passt sich die Zeilenlänge bei einem responsiven Layout an die Breite des Browsers an. Das heißt, je breiter der Browser, desto länger sind die dargestellten Textzeilen. Im Webdesign erfolgt die Orientierung anhand der CSS Schriftgrößeneinheit rem (=root em). Dies sind relative Längeneinheiten für jeden gängigen Browser, wobei 16 Pixel gleich einer rem-Einheit entsprechen. Vorausgesetzt, diese Standardeinstellung wurde zuvor nicht geändert.

Was für Schriftelemente gilt, trifft beim Responsive Webdesign auch auf alle Bilder und Grafiken zu. Hier befinden sich die Entwickler schnell in einer Zwickmühle. Denn im besten Fall müssen Bilder auf der kleinsten Bildschirmgröße entsprechend skaliert und gleichzeitig bei hochauflösenden Endgeräten scharf und knackig dargestellt werden.

Die Auslieferung der passenden Bildgröße kann hier anhand einer Auszeichnungsvergabe („Picture-Tag“) für bestimmte Viewports und Auflösungen realisiert werden. Das Bildmaterial wird entsprechend unter dem „Picture-Tag“ in verschiedenen Auflösungsvarianten bereitgestellt und entsprechend dem Viewport ausgeliefert. Die Performance wird so verbessert, langwierige Ladezeiten werden vermieden und die Nutzererfahrung so nachhaltig verbessert.

Allgemein wird die Performance beim Webdesign oftmals vernachlässigt. Viel wichtiger scheinen zunächst schicke Layouts und schöne Effekte zu sein. Jedoch hilft die spannendste und kreativste Website wenig, wenn die Leistung nicht stimmt und lange Ladezeiten zu schnellen Absprüngen führen. Umstände, die auch im Responsive Webdesign ihre Berechtigung erfahren sollten.

Um die Performance hochzuhalten, muss das abgerufene Datenvolumen also niedrig gehalten werden, was in der Regel am einfachsten mit geringeren Dateigrößen realisiert werden kann. Dies führt letztendlich zu kürzeren Ladezeiten und bezieht sich vor allem auf den mobilen Abruf, da hier Up- und Downloadraten begrenzter sind als bei einem festen Netzwerkzugang. Weiterhin sollte zugunsten einer verbesserten Performance auf großes Bildmaterial verzichtet werden und die Verwendung von JavaScript reduziert werden.

Ausgehend von den aktuellen Entwicklungen führt kaum noch ein Weg am responsiven Webdesign vorbei. Gerade im Hinblick auf den Kundennutzen und eine positive Nutzererfahrung sollte eine Website nicht mehr eindimensional auf ein Endgerät hin entwickelt werden.

Je nach Endgerät empfiehlt es sich jedoch einen gewissen Wiedererkennungswert zu verankern, wobei sowohl der gesamte Inhalt wie auch typografische Elemente an das jeweilige Gerät und die Nutzungssituation anzupassen sind.

Die Nutzer einer Website erwarten letztendlich eine gewisse Bedienfreundlichkeit, Schnelligkeit und Flexibilität, egal, auf welchem Endgerät eine Seite abgerufen wird.