Responsive Design für Ihre Website – das sollten Sie wissen

08.02.2016 von Redaktion

Zwar ist das Internet kein wirklich junges Medium mehr, doch befindet es sich auch weiterhin in stetem Wandel. In der Vergangenheit waren es vor allem neue Gestaltungsmöglichkeiten durch steigende Bandbreiten, die zunächst für ein Mehr an grafischen und dann auch an Videoinhalten geführt haben. Mit dem großen Erfolg des mobilen Internets und den damit einhergehenden Geräten wie Smartphones und Tablets stehen Inhalte des World Wide Web erneut vor einem grundlegenden Wandel in Sachen Präsentation und Bedienung.

Responsive Design für Ihre Website – das sollten Sie wissen
Der Anteil von Smartphones und Tablets an den Webseitenaufrufen steigt seit Jahren deutlich an. Bei der Gestaltung einer Webseite muss diese potenzielle Leserschaft besonders bedacht werden.

Wischgesten auf einem Smartphone, kleinere aber hochauflösende Bildschirme – all das erfordert besondere Anpassungen an die Webseite. Was bei privaten Inhalten noch zu vernachlässigen ist, wird bei Business-Webseiten schnell zum kritischen Faktor: Lässt sich die Webseite, der Onlineshop oder das Portal auch mit mobilen Browsern auf Smartphones und Tablets sinnvoll nutzen oder springen Kunden wegen fehlender Optimierung ab?

Immer mehr Aufrufe finden über mobile Geräte statt. Neue Besucher einer Webseite geben ihr oft nur eine Chance und rufen eine schlecht für mobile Geräte optimierte Seite nicht auch noch mit dem PC oder Notebook auf.

Responsive Design sorgt für bessere Usability

In der Anfangszeit der mobilen Webaufrufe wurden für mobile und stationäre Systeme häufig unterschiedliche Website-Templates verwendet, um dem Nutzer ein optimiertes Browsererlebnis zu bieten. Wird der Aufruf von einem Mobilbrowser erkannt, liefert der Server die Webseite mit dem Mobil-Template aus, ansonsten wird das Template für Desktop-Browser gewählt.

Auch heute funktioniert diese Vorgehensweise noch, allerdings erzeugt die Pflege zweier teils sehr unterschiedlicher Templates mehr Arbeit und birgt zusätzliche Fehlerquellen im Gegensatz zur Arbeit an nur einer Version der Webseite.

Die Antwort: Responsive Webdesign, „reagierendes Webdesign“ also. Die grafische Aufbereitung erfolgt bei einer solchen Webseite anhand der Anforderungen des abrufenden Gerätes – auch Bedienkonzepte für die Nutzung unterschiedlicher Eingabemethoden (Maus/Tastatur beziehungsweise Touchscreens) werden dynamisch an das Anzeigegerät angepasst. Ermöglicht wird dieses flexible Design durch Webstandards wie HTML5 und CSS3 sowie Javascript. Dabei folgt responsives Webdesign dem Nutzer und nicht andersherum.

Wie mache ich meine Website fit für moderne Anforderungen?

Verabschieden Sie sich von starren Templates für Mobil- und Desktop-Webseiten. Web-Technologien wie HTML5 und die Media Querys von CSS3 geben dem Webdesigner mächtige Werkzeuge für responsive Seiten an die Hand.

Die Seite sollte nach dem Motto „Mobile First“ und auf die kleinste gängige Bildschirmauflösung und Displaygröße hin entwickelt werden, um so eine Ausgangslösung für weitere Auflösungen zu erzielen. Werden Bilder und Videos ebenfalls passend zur genutzten Auflösung dargestellt, lässt sich für den Nutzer zudem Bandbreite und Datenvolumen einsparen – ein durchaus wichtiger Faktor bei mobilen Datenverträgen. Achten Sie beim Erstellen der Webseitenelemente also auf sinnvolle Dateigrößen. Ein viele Megapixel großes Foto sollte auf einem kleinen Smartphone mit geringerer Auflösung ausgeliefert werden. Motivhintergründe sollten bei kleineren Displaygrößen und -auflösungen weggelassen werden, sie stören nur die Lesbarkeit. Inhalte, die bei wechselnden Auflösungen nicht mehr nebeneinander platziert werden können, sollten entsprechend dynamisch untereinander angeordnet werden können.

Eine wichtige Voraussetzung dafür sind die Media Querys von CSS3. Diese erlauben unterschiedliche Designs abhängig von bestimmten Eigenschaften des genutzten Betrachtungsgerätes. Als Kriterien können folgende Eigenschaften herangezogen werden:

  • Höhe und Breite des Browserfensters
  • Displaydiagonale
  • Bildschirmauflösung
  • Hoch- oder Querformat (Orientierung)
  • Eingabemöglichkeiten wie Tastatur/Maus, Touch, Sprache)

Beherrscht der Browser keine Media Querys, so wie ältere Versionen des Internet Explorer (unter Version 9), können ähnliche Ergebnisse auch mit Javascript implementiert werden. Mittlerweile rät aber sogar Microsoft von der Nutzung älterer Versionen des Internet Explorer ab und setzt seit Windows 10 auf den deutlich moderneren und natürlich mit HTML5- und CSS3-Funktionen ausgestatteten Edge Browser.

Für die Umstellung eines klassischen Webdesigns auf responsive Techniken wird zuerst das Stylesheet angepasst. Sie nutzen Ihr altes Stylesheet und erweitern es am Ende um Media Querys für mobile Nutzer. Diese bekommen ihr eigenes, neu angelegtes und gestaltetes Stylesheet. Alternativ kann ein um weitere CSS-Befehle ergänztes universelles Stylesheet genutzt werden. Wichtig für die Nutzbarkeit der Seite ist eine angepasste Navigation. Vor allem bei einer schon zuvor recht komplexen Hauptnavigation sollte für den mobilen Einsatz eine bequem auch per Touch nutzbare Lösung entwickelt werden.

Die Gestaltung einer responsiven Webseite sollte sich nicht nur den unterschiedlichen Bildgrößen und -auflösungen anpassen, sondern auch im Layout die Besonderheiten der jeweiligen Darstellung berücksichtigen. Während auf einem Desktop-Bildschirm ein 4-spaltiges Layout gut funktioniert, sollte auf einem mobilen Display eine Spalte für den primären Content reserviert sein. Weniger Spalten bedeuten dabei oft mehr Übersicht, da zu klein dargestellte Inhalte auf Smartphones Nutzer abschrecken können.

Vorteile für Nutzer und Betreiber

Der Anteil von Smartphones und Tablets an den Webseitenaufrufen steigt seit Jahren deutlich an. Bei der Gestaltung einer Webseite muss diese potenzielle Leserschaft besonders bedacht werden – feststehende Auflösungen in Form von Pixelangaben funktionieren jedoch nur auf den großen Bildschirmen von Notebooks und Desktop-PCs. Mobile Displays erreichen heute bereits höhere Pixeldichten als Desktop-Bildschirme und die Pixelmenge steigt mit jeder Smartphone-Generation weiter an.

Eine Webseite mit starrem Layout müsste daher regelmäßig auf neue Gegebenheiten angepasst werden. Responsive Webseiten erfordern diesen Aufwand nicht, da der Server die Seite für unterschiedliche Geräte stets passend ausliefert – vom Smartphone über das Notebook bis hin zum UHD-Fernseher mit integriertem Browser. Benutzer werden mit responsiven Designs nicht aufgrund eines unpassenden Bedienkonzeptes abgeschreckt. Mobilgeräte nutzen Touchscreens und werden mit dem Finger bedient, winzige Schaltflächen und schmale Drop-down-Elemente sind so nur schwer zu treffen.

Mit den Gestaltungsmöglichkeiten von CSS3 und HTML5 lassen sich diese Elemente dynamisch anpassen, sodass Mobilnutzern größere Schaltflächen angezeigt werden. Zudem spart der mobile Nutzer bei responsiv erzeugten Webseiten Datenvolumen ein. Ein weiteres nicht zu unterschätzendes Argument für responsive Webseiten ist das Google-Ranking.

Die Suchmaschine agiert seit dem 21. April 2015 unter dem Motto „mobile-friendly“ und sortiert Webseiten ohne ein für Mobilgeräte optimiertes Design weiter unten im Ranking ein. Die Seite wird also schlechter gefunden – das Gegenteil dessen, was sich Webseitenbetreiber von einer Listung bei Google erhoffen.

Kategorien

  • Mehr Erfolg im Internet