Responsives Design

Smartphone, Tablet, Laptop, PC ... Ihr Internetauftritt soll auf allen Geräten eine angenehme, leicht lesbare Darstellung bieten und sich mit Maus oder Finger gleichermaßen gut bedienen lassen.

Erfahren Sie mehr darüber, wie Responsive Design (engl., „anpassungsfähiges Design“) die Nutzung auf verschiedenen Geräten unterstützt und warum Sie bei der technischen Umsetzung Ihres Webauftritts auf professionelle Unterstützung setzen sollten.

• Teil 1: Bildschirmgrößen und Seitengestaltung
• Teil 2: Die Seitenelemente: Schriften, Tabellen, Bilder...

Verschiedene Bildschirmgößen - Wo ist das Problem?

Mit der Vorstellung des ersten iPhones im Jahr 2007, der ersten Android-Version 2008 und dem anschließenden Siegeszug der Smartphones wurde es technisch möglich, vollständige Webseiten auch auf Mobiltelefonen darzustellen. Alle Smartphones verfügten über Browser, die die Darstellung von reuglären html-Seiten übernahmen.

Allerdings gab ein Problem, das die Browser im Rahmen der html-Seiten-Wiedergabe nicht lösen konnten: Inhalte, die auf größeren Bildschirmen ansehnlich und wohl strukturiert dargestellt wurden, erschienen auf den Mobilgeräten so stark verkleinert, dass sie - „im Briefmarkenformat“ - praktisch unbrauchbar wurden. Doch auch im Originalformat, ohne Größenanpassung auf die kleinen Bildschirme, waren die Seiten kaum zu nutzen: Ständig musste der Bildschirminhalt seitwärts oder auf- und abwärts bewegt werden, um z.B. einen Absatz über mehrere Zeilen lesen zu können.

Als Auszeichnungssprache enthält html selbst keine Fomatierungsinformationen. Erst mit Hilfe von Gestaltungsrichtlinien, die mit der Webseite an den Browser ausgeliefert wurden, gelang es, die visuelle Darstellung der Webseiten an die verschiedenen Gerätebildschirme anzupassen.

Professionelle Webdesigner werden Ihnen heute stets die Zusammenstellung der html-Seiten und der Gestaltungsvorlagen zur angepassten Ausgabe auf unterschiedlichen Geräten liefern. Dafür hat sich der Begriff responsive (Web-)Design etabliert. Warum dahinter mehr steckt als die Auswahl des passenden Skalierungsfaktors erfahren Sie in den folgenden Abschnitten.

Verschiedene Geräte - ein Layout?

Das Layout einer Seite kann in der Regel nicht unverändert auf verschiedene Bildschirmgrößen übertragen werden. Ein einfaches Beispiel: Auf Ihrer Seite möge eine Navigationszeile Ihr Logo und vier Menüpunkte enthalten. Die Darstellung aller Elemente auf einem Smartphone wird vermutlich nicht gelingen, ohne dass Benutzer das Sichtfenster seitlich verschieben müssen - ein unerwünschtes Verhalten der Seite!

Vermutlich kennen Sie auch die Lösung dieses Problems: Auf dem Smartphone sind die einzelnen Menüpunkte der Navigationszeile nicht mehr waagerecht, sondern senkrecht angeordnet. Außerdem sind sie zunächst gar nicht sichtbar, stattdessen wird z.B. ein spezielles Symbol anzeigt, dass wegen seiner Form häufig als „Hamburger-Menü“ (...mehrere, übereinander angeordnete waagerechte Linien, ☰ ) bezeichnet wird. Das Hamburger-Menü fungiert als Schalfläche für das Aus- und Einklappen des Navigationsmenüs.

Dieses angepasste Verhalten der Webseite wurde früher durch das Bereitstellen zweier verschiedener Seiten erreicht. Abhängig von der Ausgabegröße wurde entweder die „normale“ Seite oder die Mobil-Seite ausgeliefert. Im responsiven Design übernehmen Gestaltungsvorlagen die Aufgabe, Seitenelemente angepaßt auf dem Bildschirm auszugeben bzw. ein- und auszublenden.