Responsive Webdesign

Date:  |  Author: Matthias Pommranz

Icon Responsive DesignFür welche Bildschirm-Auflösung soll eine Website angelegt sein? Vor einigen Jahren war eine Breite von 1024 Pixel Standard; auf größeren Bildschirmen sah die Website eben etwas kleiner aus, das war in Ordnung. Fertig. Inzwischen müssen viele unterschiedliche Endgeräte berücksichtigt werden.

Das mobile Surfen im Web auf Smartphones und Tablet-PCs mit ihren kleinen Bildschirmen ist dabei, die klassische Nutzung auf Desktop-Rechnern und Laptops zu überrunden. Auf der anderen Seite des Spektrums stehen immer mehr hochauflösende Desktop-Monitore sowie HDTV-Fernsehgeräte. Zusätzliche Heraus­forderungen stellen Touchscreens: Bisher waren auch kleine Buttons über die Maus problemlos zu erreichen, nun wird mit dem Finger navigiert.

Einige Websites, z. B. Newsportale, bieten deshalb neben der klassischen Darstellung eine zusätzliche, für mobile Geräte optimierte Website. Diese Lösung kommt Smartphone-Nutzern entgegen, bedeutet für den Betreiber jedoch einen nicht unerheblichen Mehraufwand. Mit den aktuellen Webtechniken hat sich daher eine andere Lösung durchgesetzt, das sogenannte Responsive Webdesign.

Angepasste Darstellung je nach Bildschirmgröße

Beim Responsive Webdesign wird eine einzige Seitenversion für alle Geräte angeboten, deren Design sich jedoch beim Lesen an die jeweilige Browsergröße anpasst. Technische Grundlage dafür sind Media Queries: Über Weichen im CSS-Stylesheet wird die Breite des Sichtfensters abfragt und je nach Größe unterschiedliche Darstellungsregeln anwendet.

Die Vorteile

  • Vereinfacht die Website-Pflege: Neue Seiten werden nur einmal angelegt
  • Volle Funktionalität: Gleiche Inhalte für alle Endgeräte
  • Einfache Anwendung: Die Bildschirmanpassung geschieht beim Benutzer automatisch; sie arbeitet mit Standard-Technologien (HTML, CSS) und erfordert keine serverseitigen Skripte oder Anpassungen
  • Suchmaschinenfreundlich: Nur eine URL-Seitenadresse – gut für die Benutzer der Website und Suchmaschinen (und die Platzierung bei den Suchergebnissen)
  • Endlos viele Devices: Die Website ist geräteunabhängig zu nutzen, auch auf zukünftigen neuen Endgeräten

Responsive Webdesign ist Best Practice für mobile Endgeräte und wird u.a. von Google empfohlen.

Studio2 Beispiel Responsive Webdesign

Beispiel: So passt sich die Website des CHW e.V. an verschiedene Endgeräte an. Ihre eigene Website können Sie hier testen: http://ami.responsivedesign.is/

Umsetzung

Wie oben zu sehen ist, können breite Seiten nicht einfach verkleinert werden. Damit die Seiten auf Mobilgeräten noch gut zu lesen und zu bedienen sind, brauchen sie dort ein eigenes Layout, nebeneinander stehende Blöcke werden untereinander angeordnet oder ganz ausgeblendet. Die Darstellung von Texten und Bildern muss angepasst werden. Auch für Menüs und den Fußbereich ist oft eine eigene Lösung erforderlich.

Nachteile / Herausforderungen

  • Mehraufwand beim Webdesign: Beim Erstellen des Designschemas (Theme) müssen die verschiedenen Darstellungsgrößen eingerichtet und getestet werden
  • Menüführung: auf kurze Bezeichnungen achten; Navigationselemente müssen auf Smartphones groß genug für die Touchscreen-Bedienung sein, dürfen andererseits nicht zuviel Platz verdecken
  • Lange Texte (auch auf Übersichtsseiten) bedeuten auf Smartphones viel Scrollen/ Wischen, dabei geht schnell der Überblick verloren
  • Evtl. unnötige Ladezeiten durch ausgeblendete Inhalte und verkleinert dargestellte Bilder; meist minimal, wirkt sich jedoch bei Handynutzern mit langsamen Funkverbindungen aus und u.U. negativ auf das Google-Ranking
  • Probleme mit Internet Explorer: die alten Versionen IE 6 bis 8 verarbeiten keine Media Queries; es ist darauf zu achten, dass sie trotzdem eine funktionierende Darstellung bieten

Darstellungsgrößen

  • bis 320 Pixel: z.B. für iPhone (320 x 480 px)
  • bis 480 Pixel: z.B. für kleine Tablet-PCs
  • bis 768 Pixel: z.B. für Tablet-PCs im Hochformat (iPad 768 x 1024 px, Kindle 600 x 1024 px)
  • bis 1024 Pixel: für Desktop-Monitore, Netbooks, Tablet-PCs im Querformat
  • darüber: evtl. zusätzliche Stufe für große PC-Monitore, Laptops und Fernsehgeräte

Wie eine Website mit Responsive Design reagiert können Sie beobachten, wenn Sie den Rahmen Ihres Browserfensters anfassen und verkleinern. Bei einem flüssigen Webdesign passen sich die Spalten/Blöcke mit ihren Inhalten kontinuierlich an die jeweilige Fenstergröße an, bei einem fixen Design springt die Seite stufenweise in die nächste Darstellungsgröße. Ohne Responsive Design bleibt das Layout unverändert.

Empfehlung

  • Nicht jede Website braucht ein Responsive Design. Business-Websites, die in der Regel auf Firmenrechnern angeschaut werden, fahren gut mit einer festen Darstellungsgröße für Desktoprechner und Laptops.
  • Sinnvoll bei mobiler Nutzung: Der Mehraufwand eines Responsive Designs lohnt sich für Websites, die auch wirklich von Smartphones genutzt werden, z.B. um aktuelle News, Termine, Messages etc. abzufragen
  • Mobile first-Ansatz: Bei häufig oder gar überwiegend mobil genutzten Seiten wird das reduzierte Design für Mobilgeräte als Standard gesetzt, das für größere Darstellungsgrößen entsprechend abgewandelt wird

 

.