Es lebe die
Interface
Revolution!

Es lebe responsive Webdesign!

Responsive Webdesign – Die Interface-Revolution

Das Gestaltungskonzept „Responsive Design“ hat in den letzten Jahren das Webdesign von Grund auf revolutioniert und ist mittlerweile der Gestaltungsstandard bei der Neuentwicklung von Webseiten, um diese nachhaltig und zukunftssicher aufzubauen.

Dieser Trend wurde eingeleitet durch die steigende Anzahl unterschiedlicher Endgeräte und Bildschirmauflösungen, insbesondere Touch- und Mobilgeräte. Er hat dafür gesorgt, dass tausende Seiten von Köln bis Kappstadt neu durchdacht und aufgebaut wurden.

Zeiten ändern sich

Diese Zahlen belegen, das geänderte Nutzerverhalten


Mobiler
Datenverkehr

In 2014 waren Mobilgeräte für 32,1% des weltweiten Datenverkehrs verantwortlich.


Mobile
Nutzungszeit

In den USA übertraf im Jahr 2014 die mobile Nutzungszeit (60%) bereits den Anteil an stationärer Nutzung (40%).

Woher kommt Responsive Design?

Die Probleme von Einst

In der Vergangenheit haben Webdesigner neidisch auf die Print-Kollegen mit Ihren präzisen Layouts geschaut und sich darüber beklagt, dass ihr Design mit verschiedenen Auflösungen, Farbprofilen und unter Berücksichtigung verschiedener Nutzungsszenarien funktionieren muss.
Eine totale Kontrolle über das Erscheinungsbild einer Webseite war aufgrund der vielen Einflussfaktoren nahezu unmöglich. Das Ergebnis stellte oft einen unliebsamen starren Kompromiss auf unterschiedlichen Bildschirmgrößen und Auflösungen dar.


Die Lösung von Heute

Der Gestaltungsansatz „Responsive Design“ hat aus dieser Not eine Tugend gemacht. Eine Webseite wird dadurch auf einem großen Display anders dargestellt als auf einem Tablet-Computer / Tablet-PC oder Smartphone.
Responsive Design ist aber kein reines Gestaltungsthema, sondern besteht aus drei unterschiedlichen Dimensionen: Konzept, Gestaltung und Template-Technik.

Flexibles HTML Template

Evolution bedeutet sich anzupassen

Die ständige Weiterentwicklung der Formatsprache (CSS) ermöglicht, dynamische HTML-Templates zu schaffen, die sich den technischen Gegebenheiten (Auflösung, Verbindungsgeschwindigkeit, etc.) des Besuchers anpassen. Dabei werden fluide Raster, skalierbare Bilder / Schriften eingesetzt und Responsive- Stufen mittels Breakpoints* definiert. Sie passen den Aufbau des Templates für verschiedene Endgeräte an: Desktop, Tablet, Mobile / Smartphone.



Responsive Webdesign Breakpoints


Mobile First

Reduktion auf das Wesentliche

Neben dem Einsatz eines intelligenten Templates ist Responsive Design auch als konzeptionelle Herausforderung anzusehen. „Think Mobile“ lautet dabei die Devise.
Dieser Ansatz schreibt vor, alle Inhalte und Informationen neu zu strukturieren, zu hinterfragen und soweit wie möglich zu reduzieren.
Zu Beginn wird im „Mobile First“-Ansatz definiert, welche Informationen in welcher Anordnung in der mobilen Version erscheinen sollen. Alle erweiterten Ansichten orientieren sich danach an dieser Basis.
Aufgrund der akuten Platznot auf mobilen Endgeräten erfolgt unter dieser Zielsetzung „automatisch“ eine Reduktion der Webinhalte auf die wesentlichen Informationen und Funktionen.



Responsive Webdesign Mobilefirst

Vorteile durch Responsive Webdesign

Eine Webseite für alle Ausgabegeräte

  • Nachhaltige & Zukunftsfähige Oberfläche
  • Automatische Erkennung und Anpassung der Oberfläche an das jeweilige Ausgabegerät
  • Optimale Darstellung der Website auf allen Endgerätetypen
  • Niedriger Aufwand bei der Pflege der Inhalte
  • Kostengünstigere Entwicklung im Gegensatz zu einer eigenständigen mobile Webseite
  • Positive Beeinflussung der Suchmaschinenrankings