Responsive Design
Der Begriff „Responsive Design“ wurde 2010 von Ethan Marcotte etabliert und beschreibt eine Technik bzw. Gestaltungsform von Webseiten, die eine einheitliche und nutzerfreundliche Darstellung von Inhalten auf verschiedenen Endgeräten gewährleistet. Um dies reibungslos zu bewerkstelligen, sind verschiedene technische Voraussetzungen notwendig.1. Wortherkunft und Bedeutung
Der Begriff „responsive“ meint ursprünglich „reagierend“ und beschreibt die Reaktion von Inhalten auf die Eigenschaften einer bestimmten Nutzeroberfläche.
1.1 „Responsive Content“
„Responsive Content“ sind Inhalte, welche auf die Nutzeroberfläche reagieren. Zum Beispiel:
- Navigationselemente
- Inhalte wie Bilder und Text
- der strukturelle Aufbau
1.2 Relevante Endgeräte
Beispiele für Oberflächen bzw. Endgeräte sind unter anderem:
- Smartphones
- Tablets
- E-Book-Reader
- Desktop-PCs
- Laptops
Neben den Anpassungen der genannten Inhalte reagiert eine „responsive Website“ auch auf Eingabehilfen wie beispielsweise einen Mausklick oder das Wischen über einen Touchscreen.
2. Relevanz des „Responsive Design“
Die Nutzung von mobilen Endgeräten wie Smartphones oder Tablets wächst stetig. Sie werden verwendet, um z. B. im Internet zu surfen oder einzukaufen. Aus diesem Grund haben die Betreiber von Websites oder Online-Shops großes Interesse daran, dass Besucher auf ihrer Seite, unabhängig vom genutzten Endgerät, das Angebot erkennen, sich durch die Produktpalette klicken, einen Kauf tätigen und möglichst zu einem anderen Zeitpunkt als „returning visitor/customer“ zurückkehren.
Die Aufgabe des „Responsive Design“ ist es, dem Betrachter auf allen Endgeräten alle Funktionen der Website übersichtlich und nutzerfreundlich zu präsentieren. Ein Webdesign dieser Art kommt immer den Bedürfnissen und Anforderungen des Rezipienten nach und ermöglicht ihm einen schnellen Überblick über die Inhalte und Funktionen der Seite.
3. Funktionsweise des „Responsive Design“
Für die Erstellung einer „responsive Website“ werden Größen wie beispielsweise die Breite der Seite prozentual erfasst und dann an das Browserfenster angepasst. Ein Smartphone verfügt über eine geringere Breite als ein Laptop, daher wird diese mit einem geringeren Prozentsatz definiert. Auf diese Art entsteht ein Raster für die Seite, welches auch die Größe von Bildern und Texten anpasst.
Zudem werden bestimmte Funktionen definiert, die festlegen, wie lange z. B. ein Banner neben dem Textblock stehenbleiben kann und wann er darunter springt. Eine Abfrage der Gerätedetails dient als Grundlage für die richtige und nutzerfreundliche Anordnung einzelner Elemente.
4. Bedeutung für das Webdesign
5. Einsatzempfehlungen
Die Entwicklung einer „responsive Website“ ist aufwändig und daher auch teurer (rund 30 – 40 % mehr als bei einer Standard-Website). Viele Unternehmer tun sich schwer damit, sich zu einer solchen Investition durchzuringen. Aber wann lohnen sich die zusätzlichen Kosten? Unternehmer sollten auf „responsive Webdesign“ umsteigen, wenn:
- ein Relaunch geplant ist und ohnehin Kosten anfallen
- die Usability verbessert und die Konversionsrate gesteigert werden soll
- das Suchmaschinenranking verbessert werden soll
- die meisten User von mobilen Endgeräten auf die Seite zugreifen
- ein modernes Image erzeugt werden soll
6. Alternativen zum „Responsive Design“
Mobile und Desktop-Varianten von Websites oder Online-Shops können getrennt voneinander aufgesetzt und gepflegt werden. Dies bedeutet allerdings einen erheblichen Zeitaufwand und erweist sich kaum als praktikabel. Vor allem bei erfolgreichen Unternehmen zeichnet sich klar der Trend zum „Responsive Design“ ab. Branchen, die sich besonders stark um die Optimierung ihres Online-Auftritts auf allen Endgeräten bemühen, sind Online-Shops oder Reiseportale.
Wer sich den veränderten Nutzungsbedingungen anpassen will und User auch auf mobilen Endgeräten erreichen möchte, kommt nicht am Thema „Responsive Design“ vorbei.