Telefon: +49 911 1335-1335

Responsive Design

Der richtige Auftritt auf allen Geräten

Die Unternehmens-Homepage muss auf allen Endgeräten optimal angezeigt werden. Wie kommt die Website auf PC, Tablet und Smartphone gleichermaßen gut rüber? Von Christoph Werner; Illustration: Anton Atzenhofer

Das Smartphone wird von 50 Prozent der Internet-Nutzer dazu verwendet, im Internet zu surfen, so eine Erhebung der Beratungsgesellschaft Accenture vom letzten Jahr. Immerhin 17 Prozent der Befragten gehen per Tablet-PC ins Netz. Für Deutschland bedeutet dies, dass sich 30 Mio. Nutzer über mobile Endgeräte im Internet bewegen. Der Anteil der mobilen Internet-Nutzung erhöhte sich damit im vergangenen Jahr von 28 auf 58 Prozent. Traditionell richtet sich das Layout einer Website oder eines Online-Shops aber nach den gängigen Auflösungen von klassischen Computer-Displays. Die Inhalte werden häufig immer noch so gestaltet, dass sie mit einem Blick und in groben Zügen erfassbar sind.

Kleine Displays

Mit dem Aufkommen von Smartphones und Tablets wurde die Ausgabefläche für Internet-Seiten jedoch deutlich kleiner; außerdem funktioniert die Bedienung auf einem kleinen Gerät mit Touchscreen grundlegend anders als mit Maus und Tastatur am Computer. Der Nutzer muss auf mobilen Endgeräten einzelne Bereiche von klassisch gestalteten Auftritten heranzoomen und verliert deshalb schnell den Überblick. Versucht man beispielsweise, einen komplexen Online-Shop in seiner traditionellen Form auf einem Zehntel der normalen Größe darzustellen, wird dieser für den Nutzer meist schwer bedienbar. Der Anteil der potenziellen Kunden, die wegen der unpraktischen Bedienung die Geduld verlieren und abspringen, ist entsprechend hoch. Responsive Design kann dies ändern.

Beim Responsive Design werden Online-Auftritte so gestaltet, dass sie auf das Endgerät reagieren, auf dem sie angezeigt werden. Die Maße von Inhaltselementen werden nicht mehr in Pixeln angegeben, sondern in Prozenten. Dadurch orientiert sich die Breite der Elemente an der Bildschirmrasterung und kann sich diesen Vorgaben entsprechend verändern. Je nachdem wie groß oder hochauflösend das Ausgabe-Display ist, passt sich das Design der Website an.

Faustregel „Mobile First“

Gestaltet wird das Responsive Design mit klassischen Techniken wie HTML, CSS3 und Javascript. Mittels sogenannter „Media Queries“ werden die Eigenschaften des Endgerätes abgefragt, mit dem der Besucher auf die Internet-Seite zugreifen will. Entsprechend diesen Vorgaben wird die Struktur variiert und auf dem Gerät ausgegeben. Das entsprechende Layout kann zum Beispiel eine kleinere Schriftart oder größere Bedienfelder aufweisen als die Originalseite. Dieses Vorgehen erfordert bereits in der Planungsphase intensive Überlegungen darüber, welche Bedürfnisse die Zielgruppe hat und wie der Inhalt gestaltet werden soll. Es muss die Frage geklärt werden, ob wirklich alle Elemente relevant sind oder ob einige zunächst hinter klickbaren Menü-Icons verborgen werden können. Das Layout für kleinere Auflösungen muss sich dem nach teilweise oder komplett ändern bzw. stark vereinfachen. Bereits zu Beginn dieser Überlegungen sollte die kleinste mögliche Auflösung beachtet werden – gemäß der Faustregel „Mobile First“, wonach bei der Planung immer vom kleinen mobilen Gerät ausgegangen wird.

„Mobile First“ bedeutet jedoch auch, die gesamte Seitenlogik zu überdenken, denn die Navigation stellt auf der Website ein Schlüsselelement dar. Besucht ein Nutzer den Online-Auftritt eines Unternehmens, so fällt ihm in der Regel die Navigation als einer der ersten Punkte auf. Je besser der Besucher durch sie angesprochen wird und je leichter sie zu verstehen ist, desto eher bleibt er auf der Seite. Das Resultat dieser Überlegungen sollte stets die optimale Nutzbarkeit (Usability) und ein angenehmes Nutzererlebnis (User Experience) sein.

Grundsätzlich sollte die Navigation folgende Voraussetzungen erfüllen:

  • Das Menü sollte einfach erfassbar und auffindbar sein.
  • Eine begrenzte Anzahl von Ein-Wort-Navigationspunkten erleichtert den Überblick.
  • Die Bedienbarkeit steht über dem Design.
  • Der Nutzer muss stets wissen, wo er sich im Navigationsbaum befindet.
  • Die einheitliche Navigationsgestaltung erleichtert das Verständnis.
  • Die Vermeidung spezieller Web-Formate verringert das Risiko von Anzeigefehlern oder Kompatibilitätsproblemen.
  • Nur relevante Navigationspunkte sollten aufgenommen werden.

Um ein Responsive Design gut umzusetzen, müssen außerdem angepasste Bilder bereit gestellt werden. Eine mögliche Lösung sind „Adaptive Images“, d.h. je nach Auflösung des Ausgabe-Displays werden die Bilder in einer entsprechenden Größe aufgerufen bzw. erzeugt. Dies ist u.a. relevant, wenn Webseiten ein Hintergrundbild oder ganze Galerien aufweisen. Für diese Funktion existieren verschiedenste Open-Source-Lösungen. Sie verkleinern beim erstmaligen Aufruf eines Online-Auftritts – z.B. über ein 480 mal 320 Pixel großes Display – alle Bilder und speichern diese online ab. Die Website hinterlegt sozusagen die Ausgabegröße der Bilder für die spezielle Displaygröße. Der nächste Besucher, der mit dieser Auflösung die Seite besucht, erhält sofort die verkleinerten sowie abgespeicherten Bilder. Dies ermöglicht kleinere Datenmengen und verringert die Ladezeit. Vor allem für Nutzer ohne umfassende Daten-Flatrate bedeutet dies einen großen Vorteil und einen zusätzlichen Anreiz, die Seiten zu besuchen.

Kundenorientierung und Kostenersparnis

Bei allen Vorteilen für den Nutzer muss klar gestellt werden, dass die Entwicklung und technische Umsetzung eines solchen Webseiten-Designs kosten- und zeitintensiver ist als die der klassischen Variante. Aus diesem Grund bietet sich dieser Schritt besonders bei einer geplanten Neugestaltung (Relaunch) des Online-Auftritts an, denn eine von Beginn an konsequente Planung erleichtert die Folgearbeiten und reduziert die Risiken. Durch Responsive Design erreicht die Homepage mehr Nutzer und bindet diese an das Unternehmen. Gleichzeitig werden der Pflegeaufwand und die Betriebskosten reduziert, da jeder Inhalt nur einmalig eingebunden werden muss. Darüber hinaus hat man die Möglichkeit, das Corporate Design noch konsequenter in den eigenen Auftritt einzubinden und den Wiedererkennungswert zu erhöhen. Das Budget kann also optimal verwendet werden und das Unternehmen sichert sich auch auf längere Zeit einen modernen Webauftritt mit zahlreichen Vorteilen. Wer jetzt nicht reagiert, verschenkt womöglich Umsatz und verliert potenzielle Kunden.

Autor/in: 

Christoph Werner ist Geschäftsführer des IT-Dienstleisters Sysfire GmbH mit Sitz in Nürnberg (www.sysfire.de, christoph.werner@sysfire.de).

 

WiM – Wirtschaft in Mittelfranken, Ausgabe 11|2013, Seite 26

 
Device Index

Alle Ansprechpartner/innen auf einen Blick