Responsive Design

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.

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.

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.

Mit der wachsenden Bedeutung mobiler Endgeräte und dem technischen Fortschritt steigt auch die Erwartungshaltung der Besucher von Websites. Webdesigner müssen sich auf diese Veränderungen einstellen, um Kunden zufriedenzustellen. Die starre Gestaltung einer Website ist nicht mehr zeitgemäß ‒will ein Unternehmen auf lange Sicht Erfolg haben, benötigt es zwingend ein „responsive Webdesign“. Um eine Website sowohl am Laptop als auch am Smartphone übersichtlich darzustellen, müssen zahlreiche Aspekte Beachtung finden. So können nebeneinanderstehende Blockelemente nicht einfach nur heruntergestuft bzw. verkleinert werden. Um die Lesbarkeit und Nutzbarkeit der Website zu gewährleisten, bedarf es flexiblen Lösungen, wie z. B. eine veränderte Anordnung der einzelnen Inhalte.

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

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.