Responsive Webdesign für mehr Usability

Nicht selten kommt es vor, dass man beim Besuch bestimmter Seiten vom Smartphone aus deren Inhalt kaum oder nur sehr schwer lesen kann und dieser auch keineswegs optisch ansprechend gestaltet ist. Wenn man nun gerade keine Zeit oder keine Lust dazu hat, die für einen interessanten Bereiche mühselig mit zwei Fingern zu vergrößern und zu verschieben, um sich den Text oder die Grafik ansehen zu können, schließt man den Browser rasch wieder oder wechselt die Seite. Diese Nutzerunfreundlichkeit aufgrund der Tatsache, dass vor allem mobile Seiten nur rudimentär umgesetzt sind und die nötigsten Funktionen äußerst spartanisch angeboten werden, kann das daher durchaus dazu führen, dass den jeweiligen Seitenbetreibern ein Geschäft durch die Lappen geht.

Das responsive Webdesign, das sich dynamisch dem Endgerät anpasst, sorgt nun für mehr Usability auf diesem Sektor.

Was ist responsive Webdesign?

Responsive heißt in diesem Zusammenhang so viel wie reaktionsfähig, weshalb es sich in der Praxis um ein Webdesign handelt, bei welchem der grafische Aufbau von Webseiten unter Berücksichtigung der jeweiligen Anforderungen des Endgeräts wie Rechner oder Smartphone dynamisch erfolgt. Zu diesem grafischen Aufbau zählt in erster Linie die Strukturierung der vorkommenden Einzelelemente wie unter anderem Text und Navigation. Technische Basis des responsive Webdesigns sind die neuesten Webstandards wie CSS3 und HTML5.
Da Auflösung und Bildschirmgröße des Displays von Endgeräten wie PC, Tablet-Computer, Laptop, Smartphone oder Fernseher erheblich variieren, sind auch Erscheinungsbild und Bedienung von Webseiten unterschiedlich und von den jeweiligen Gegebenheiten abhängig. Werden die Seiten nun mit responsive Webdesign bereitgestellt, berücksichtigen diese die jeweiligen Anforderungen des Endgeräts und optimieren daher automatisch deren Darstellung und Navigationselemente. Einzig wichtiges Kriterium für die Anpassung ist üblicherweise die Pixelanzahl, die in der Breite vom Browser genutzt werden kann.

Voraussetzungen für das responsive Webdesign

Eine wesentliche Voraussetzung für das responsive Webdesign, also für die flexible Anpassung an die technischen Gegebenheiten des Endgeräts zugunsten einer größeren Benutzerfreundlichkeit, sind die sogenannten Media Queries, wobei es sich um ein CSS3-Konzept handelt, das in Abhängigkeit von ganz bestimmten Eigenschaften des jeweiligen Ausgabemediums unterschiedlichste Designs erlaubt. Solche Kriterien sind zum Beispiel neben der Bildschirmauflösung die Größe des Endgeräts und des Displays, Eingabemöglichkeiten wie etwa Touch, Sprache oder Tastatur, außerdem ob es sich um ein Hoch- oder um ein Querformat handelt.

Innerhalb der Ressourcenbandbreite können die Programmierer des responsive Webdesigns nun die speziellen Anpassungen für die entsprechenden Geräte vornehmen.

Die drei wichtigsten Punkte bei der Programmierung

• keine fixen Layout-Grids
  Es werden Pixelwerte nur prozentual und nicht in fest vorgegebener Anzahl verwendet,
  damit sich die jeweilige Seite den Gegebenheiten anpassen und auf den Nutzer reagieren
  kann.
• keine fixen Schriftgrößen
  Auch hier wird nur mit prozentualen Werten gearbeitet, wobei bestimmte Plugins
  eigenständig die Größen von Headlines skalieren.
• keine fixen Bildgrößen
  Die Grafik wird flexibel an die Bildschirmauflösung angepasst, damit lange Ladezeiten
  vermieden werden.

Abschließend ist zu sagen, dass das responsive Webdesign definitiv als zukunftsweisender Trend angesehen werden kann – für jene, die ihre Seite auch allen mobilen Plattformen bequem und ohne Punkteabzüge für etwa lange Wartzeiten beim Laden oder schlechte Grafiken zugänglich machen wollen, und natürlich auch für alle Nutzer, die sich damit an der optimalen Umsetzung von den Darstellungen und der Bedienung erfreuen können.