Responsive Webdesign erklärt

Wissen Sie, mit welchem Endgerät User auf Ihre Webseite zugreifen? Vermutlich wird es einen ganzen Strauß von Antworten geben. Mobilgeräte haben immer größeren Anteil an der Internet-Nutzung, vom großen Tablet bis zum kleinen Smartphone. Aber auch beim Desktop-PC und Notebook ist die Bildschirmauflösung allein nicht entscheidend. Schließlich wissen Sie nicht, ob der Browser im Vollbildmodus oder als Fenster läuft. Responsives Webdesign beschreibt eine Methode, Webseiten so zu gestalten und zu programmieren, dass sie auf das verwendete Endgerät reagieren (das englische Wort responsive bedeutet reagierend) und sich entsprechend anpassen.

 

Webseite auf einem Laptop und auf einem Smartphone – Pixabay - Public Domain Bilder / Creative Commons CC0 (CC0 1.0)

 

Wesentliche Veränderung der Arbeitsweise

Noch vor kurzer Zeit mussten sich Programmierer mit sogenannten Browserweichen herumärgern und wegen unterschiedlicher Interpretation der Seitenbeschreibung durch Internet Explorer, Chrome, Firefox, Opera usw. jeweils passenden Code bereitstellen. Das ist mittlerweile passé. Aber dafür stehen Webdesigner, Wordpress-Agenturen und verwandte Dienstleister vor ganz neuen Herausforderungen. Während bei Printmedien die Ausgabegröße exakt feststeht und das Layout ebenso exakt darauf abgestimmt sein muss, geht es hier gerade um das Gegenteil: Die Webseite muss auf einem Sechs-Zoll-Smartphone zwar nicht genauso aussehen, aber ebenso funktionieren wie auf einem High-End-Grafikmonitor mit mehr als dreißig Zoll Bilddiagonale. Breakpoints alleine, die wie früher die Browserweiche beim Erkennen eines Mobilgeräts auf eine separate Seite umleiten, reichen dazu nicht, erklären die Experten der Web-Agentur Webtique. Responsives Webdesign erfordert ein ganz anderes Herangehen – übrigens nicht nur den Nutzern zuliebe, sondern auch zur Verbesserung des Rankings in Suchmaschinen. Internet-Auftritte, die nicht für Mobilgeräte geeignet sind, werden nämlich mittlerweile deutlich schlechter bewertet.

 

Elemente unterschiedlich behandeln

Ein Schlüssel zum responsiven Design ist die differenzierte Behandlung einzelner Gestaltungselemente. Ein Bild darf man beispielsweise verkleinern, aber nicht über seine ursprüngliche (native) Auflösung hinaus vergrößern, weil es sonst verpixelt wirkt und an Qualität einbüßt. Ein Text sollte dagegen nur geringfügig verkleinert und auch nicht übermäßig vergrößert werden, weil er sonst nicht mehr lesbar ist. Ideal ist ein Design in Blöcken, die bei Bedarf auch untereinander angeordnet werden können, wenn sie nicht mehr nebeneinander passen. Dazu werden Gestaltungsraster in Abhängigkeit von der Auflösung definiert. Menüs verschwenden dabei viel Platz, deshalb werden sie bei kleinen Displays durch ein Icon ersetzt und nur noch bei Bedarf eingeblendet.

 

12. August 2019     >> Zurück zum Archiv