Responsive Web-Design für mobile Geräte

Webdesign auf verschiedenen mobilen GerätenWir optimieren Ihre Webseite für unterschiedliche Ausgabegeräte. Das Zauberwort für die Optimierung heißt: Responsive Webdesign.

Responsive Webdesign bezeichnet eine gestalterische und codebasierte Technik zur Erstellung von Webseiten, so dass diese auf das jeweils benutzte Endgerät wie Smartphones oder Tablets reagieren können (englisch responsive → reagierend).

Der grafische Aufbau einer „responsiven“ Webseite ändert sich abhängig von dem Gerät, mit welchem die Webseite betrachtet wird.
Am deutlichsten wird dies meist an der Navigation. Auf dem Bildschirm eines Desktopcomputers ist genug Platz für eine Webseite vorhanden, so dass alle Menüpunkte einer Navigation quer über die gesamte Webseite angezeigt werden können. Auf der viel kleineren Ansicht eines Smartphones wird die Navigation zu einem Symbol: Wird dieses Symbol angetippt, klappen die Menüpunkte nach unten aus. Jeder einzelne Menüpunkt sollte groß genug sein, um ihn bequem mit dem Finger bedienen zu können.
Aber auch die Anordnung und Darstellung anderer Elemente wie Textblöcke oder Seitenspalten können je Ausgabegerät verändert werden. Die Grafik oben rechts skizziert die Unterschiede.

Die technische Basis für responsives Webdesign bilden die neueren Webstandards HTML5, Media Queries in CSS3 und JavaScript. Mit Media Queries werden im CSS die Gestaltungsanweisungen für verschiedene Gerätegrößen unterschieden.

Bereits bei der Ausarbeitung von Struktur, Benutzerführung und Layout einer Webseite müssen die unterschiedlichen mobilen Geräte berücksichtigt werden. Ein gut durchdachtes HTML5 Gerüst und kluger Aufbau der verschiedenen HTML-Elemente sind die Grundlage für stabile, geräteabhängige Gestaltungsanweisungen im CSS, um reaktionsfähige (responsive) Webseiten zu erzeugen.

Warum sollte eine Webseite responsive aufgebaut sein?

Die Antwort ist einfach: weil eine für unterschiedliche Geräte optimierte Webseite z.B. auf dem Smartphone besser zu handhaben und übersichtlicher zu lesen ist. Wird eine Webseite auf einem kleinen Display genau so angezeigt wie auf einem großen Bildschirm, ist die Schrift kaum lesbar, die Navigation zu klein zum Tippen, die Bilder so klein wie Briefmarken. Der Seitenbesucher muss die interessanten Bereiche mit zwei Fingern vergrößern und verschieben, um mühsam an die Inhalte zu kommen. Er wird die Seite schnell wieder verlassen. Dabei hat sich das Surfverhalten heutzutage stark auf Smartphone und Tablet verlagert.

Man kann auch sagen: Responsive Webdesign ist eine gute Strategie, um eine Webseite soweit wie möglich zukunftssicher zu machen, angesichts der immer neuen internetfähigen Geräte von Smartphone bis Fernseher und der zunehmenden Mobile-Nutzung.