Immer mehr Webseiten-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. Beispielsweise wenn die Anordnung und Darstellung einzelner Elemente, wie Navigationen, Seitenspalten und Texte, aber auch die Nutzung unterschiedlicher Eingabemethoden etwa via Tipp- und Wischgesten über den Touchscreen nicht optimal ans jeweilige Gerät angepasst ist.

Responsive Design sorgt für bessere Usability

In der Anfangszeit der mobilen Webaufrufe wurden für mobile und stationäre Systeme häufig unterschiedliche Format-Vorlagen für die Webseite („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.

Responsive Webdesign, „reagierendes Webdesign“ ermöglicht die grafische Aufbereitung bei einer solchen Webseite anhand der Anforderungen des abrufenden Gerätes. Dabei werden auch Bedienkonzepte für die Nutzung unterschiedlicher Eingabemethoden (Maus/Tastatur beziehungsweise Touchscreens) 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 machen Sie Ihre Webeite 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. Dabei sollte die Seite 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.

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.

Weiterführende Links zum Thema

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