Eine Seite für alle – Responsive Webdesign

Ob per PC, Smartphone oder Tablet, das Internet ist permanent verfügbar und E-Commerce aus dem Alltag nicht mehr wegzudenken Konzertkarten bestellen, ein Rezept suchen oder Schuhe shoppen – kein Problem während der Wartezeit auf den Bus oder in der Mittagspause. Und egal welches Gerät der Kunde nutzt: Er möchte eine ansprechende Website sehen, die er komfortabel bedienen kann.

Mobile Webseiten – jedem das Seine

Technisch gesehen ist das eine kleine Herausforderung, denn die Größe und somit die Auflösung der Bildschirme ist ein entscheidender Faktor beim Design einer Website. Besucht man mit dem Smartphone eine herkömmliche Website, so wird diese extrem klein angezeigt und ohne ständiges Zoomen und Scrollen ist es unmöglich sie zu betrachten. Bisher gebräuchlich waren mobile Versionen von Webseiten. Besuchte der Nutzer eine Seite mit einem Smartphone, so wurde er auf eine andere Seite weitergeleitet, deren Layout für die Darstellung auf kleinen Bildschirmen optimiert war. Typischerweise waren diese Seiten daran erkennbar, dass ihre Adressen statt www.beispiel.de nun www.m.beispiel.de lauteten. Diese mobile Seite konnte auf kleinen Bildschirmen angenehm bedient werden, andere Funktionen bieten und bei Bedarf sogar komplett andere Inhalte. Was will man mehr?

Diese Herangehensweise bringt einige Nachteile mit sich, sowohl für den Kunden als auch für den Anbieter:

  • Der Kunde erkennt die Seite nicht wieder. Je nachdem wie die mobile Version der Website aufgebaut ist, kann sie sich gravierend von der Version unterscheiden, die der Nutzer von seinem Desktop Rechner kennt. Typischerweise besucht ein Kunde dieselbe Seite mal vom Smartphone und mal vom heimischen Rechner aus und möchte nicht zweimal ergründen müssen, hinter welchem Menüpunkt sich welche Funktion oder Information befindet.

  • Der Kunde findet eine gewünschte Funktion nicht – weil sie nicht existiert. Immer wieder wurde beim Design von mobilen Seiten der Trugschluss gezogen, dass der Umfang der Seite nicht identisch sein muss mit dem der Desktop Version. Das spart Implementierungsaufwand. Aber nur weil ein Nutzer ein Smartphone verwendet bedeutet das nicht, dass er weniger Funktionen nutzen möchte – im Zweifelsfall fehlt genau diese eine Funktion, die er gerade gerne hätte und von der Desktop Version kennt. Nicht umsonst wird bei mobilen Seiten gerne ein Link hinterlegt, mit dem der Nutzer manuell auf die Desktop-Version der Seite wechseln kann. Diese ist dann allerdings nur sehr umständlich zu bedienen.

  • Es müssen zwei Seiten gepflegt werden. Ist die dahinterliegende Verwaltung geschickt aufgebaut, so können die Inhalte zumindest zentral gepflegt werden. Aber Technik ändert sich und immer wieder sind Anpassungen nötig oder Umgestaltungen gewünscht. Diese müssen nun an der Desktop- und zusätzlich an der mobilen Version vorgenommen werden – ein beträchtlicher Zeit- und Kostenfaktor.

  • Es müssen zunehmend mehr Displaygrößen bedient werden. Ein weiterer Punkt macht das Konzept der mobilen Seiten immer weniger praktikabel: die Tablets, deren Verbreitung in den letzten Jahren extrem zugenommen hat. Zwischen Smartphone-Displays mit einer Auflösung von 320 x 480 Pixel und riesigen Desktop-Bildschirmen mit über 2500 Pixeln Breite ist mittlerweile jede Größe vertreten. Um den Kunden ansprechende Webseiten zu bieten, müsste man mindestens drei Versionen der Website erstellen, die jeweils auf andere Auflösungen optimiert sind. Aber wo zieht man die Grenzen und wie pflegt man die verschiedenen Versionen ohne erheblichen Mehraufwand?

Responsive Design – eine für alle

Responsive Webdesign verfolgt einen völlig anderen Ansatz: Es gibt nur eine Website. Deren Layout ist so gestaltet, dass sie sich selbst dynamisch an die Bildschirmgröße anpasst. Auch die Ladezeiten müssen selbst bei einer langsamen Mobilfunkverbindung in einem akzeptablen Bereich liegen und Schrift und Bedienelemente auch für Touch-Bedienung passende Größen haben. Derselbe Inhalt, dieselben Funktionen, dieselbe Struktur und ein sehr ähnliches Design sorgen für weniger Administrationsaufwand und bieten dem Kunden Wiedererkennungswert.

 

Die Umsetzung erfordert Wissen und Erfahrung. Die Website wird so aufgebaut, dass sich gewisse Elemente abhängig vom verfügbaren Platz unterschiedlich anordnen und den zur Verfügung stehenden Platz optimal nutzen – beispielsweise wandert die Navigation, wenn der Bildschirm zu schmal wird, vom linken Rand an den Kopf der Seite und befindet sich nun über dem Inhalt. Ordnen sich die enthaltenen Menüpunkte nun noch platzsparend als kleine Kacheln an, so wandelt sich die klassische Navigation von selbst zu einer typischen Smartphone-Navigation. Möglich wird ein solches Verhalten durch die Verwendung von neuen Technologien und Software-Architekturen. Dadurch lasen sich beispielsweise Layouts realisieren, die sich „fließend“ an die Seitengröße anpassen, sowie proportionale Größenangaben für Schriften, Bereiche und Abstände. Auch Media Queries bieten eine Möglichkeit, die jeweils verfügbare Displaygröße optimal zu nutzen.

Fluid Layouts

Elegant und praktisch sind mehrspaltige Layouts, deren Spalten je nach Bildschirmgröße ihre Breite ändern und sich gegebenenfalls umsortieren. Wenn möglich werden sie nebeneinander angezeigt. Ist der Platz nicht ausreichend, so wird stattdessen nach und nach jeweils eine der Spalten unten angefügt, bis zuletzt in der schmalsten Darstellung alle Spalten untereinander angezeigt werden. Die Spalte mit dem wichtigsten Hauptinhalt steht dabei an der Spitze.

Ob eine Website derartige „Fluid Layouts“ verwendet, lässt sich einfach testen: Man öffnet die Seite auf einem Desktop-Rechner und verkleinert nach und nach manuell das Browserfenster. Erscheinen keine horizontalen Scrollbalken, sondern passt sich die Website automatisch durch Anordnen ihrer Inhalte an, so liegt ihr ein Fluid Layout zugrunde. Auf ähnliche Art können zum Beispiel auch Tabellen ihre Orientierung ändern oder sich in Text oder sogar in Diagramme verwandeln. Die Navigation kann Ort und Anordnung wechseln und wenn nötig zu einem Dropdown werden, Bilder können stufenlos ihre Größe anpassen.

Media Queries

Stößt man mit Fluid Layouts an die Grenzen des Machbaren, oder sind diese zu aufwändig für das entsprechende Projekt, so kann man unterstützend oder alternativ Media Queries einsetzen. Mit Media Querieslassen sich gewisse Eigenschaften des Anzeigegeräts abfragen, etwa die Bildschirmbreite. Davon abhängig können CSS-Dateien eingebunden werden, die direkt das Layout der Seite ändern. Somit lässt sich die Website auf spezifische Gegebenheiten des Anzeigegeräts anpassen, ohne dass der Inhalt verändert wird.

Responsive Design macht es möglich, eine einzelne Website bereitzustellen, die auf jedem Endgerät gut bedienbar ist. Einmalig muss ein gewisser Aufwand investiert werden, aber man spart die Konzeption und Erstellung einer zweiten Website ein und mittelfristig reduziert sich der Administrations- und Wartungsaufwand erheblich.

Weiterführende Links

Beispiel für Responsive Design www.csszengarden.com

Einführung und Designprozess "Mobile First" davidwalsh.name