Ist dies Ihr erster Besuch auf auctores.de? Dann empfehlen wir Ihnen unsere Website-Tour. Ja, Tour beginnen.  |  Nein, ich navigiere allein.

Responsive Design

Eine Website für alle Geräte

Jeder Nutzer ist anders – sein Browser auch: Deshalb passt sich eine Website im Idealfall dem Betrachter und seiner technischen Ausstattung an. Wichtig ist der Inhalt, dem sich grafischer Aufbau und andere Elemente unterordnen. „Responsive Design“ setzt dieses Konzept in den Mobilbereich fort.

Schon auf einem herkömmlichen PC- oder Laptop-Monitor ist ein Website-Design oft nur ein Vorschlag, denn Größe des Browserfensters oder System-Schriftgröße liegen im Ermessen des Nutzers. Mit der zunehmenden Verbreitung mobiler Web-Geräte verschärft sich dieses Problem: Smartphones und Tablets haben unterschiedliche Bildschirmauflösungen, die zudem meist kleiner sind als bei stationären Geräten. Eine Website muss heute auch unter solchen Bedingungen alle Inhalte zeigen und vor allem bedienbar bleiben.

„Responsive Design“ macht genau dies möglich – ohne zusätzlichen Aufwand für den Betreiber der Website: Die Darstellung passt sich automatisch an das jeweilige Endgerät an und berücksichtigt sogar, ob etwa ein Smartphone horizontal oder vertikal gehalten wird. Dabei ordnen sich zum einen die Inhalte je nach dem vorhandenen Platz nebeneinander oder untereinander an. Auf kleineren Displays werden zum anderen Navigationselemente größer dargestellt, um sie besser sichtbar und per Touchscreen bedienbar zu machen. 

Die Website passt sich automatisch an das Endgerät anDie Website muss dabei nicht mehrfach vorgehalten werden, was einerseits die Pflege erschweren würde und andererseits durch „Duplicate Content“ beim Suchmaschinenranking Nachteile hätte. Stattdessen erlaubt die Trennung von Inhalt und Präsentation auf Basis aktueller Webstandards, dass der gleiche Inhalt im optimal an das jeweilige Gerät angepasstem Layout erscheint, ohne dass der Benutzer etwa eine spezifische Mobilvariante auswählen muss. 

Ein weiterer Aspekt des Responsive Designs ist der Verzicht auf Flash für interaktive und multimediale Inhalte, da dies ressourcenintensiv ist und vor allem auf Mobilgeräten gar nicht mehr unterstützt wird. Slider-Elemente, Bildergalerien etc. sind stattdessen mit Hilfe von CSS und Javascript-Bibliotheken wie jQuery webkonform, flexibel und suchmaschinenfreundlich umgesetzt.

Bereits heute gehen rund 50 Prozent der Internetnutzer zumindest gelegentlich mit Mobilgeräten ins Netz. Schon in wenigen Jahren wird der größte Teil der Onlinenutzung auch zuhause über Mobilgeräte erfolgen. Wer die „Always-On“-Nutzer nicht verlieren will, muss dies im Blick behalten – responsive Weblayouts sind die richtige Antwort.

Vorteile

Ein großer Vorteil von Responsive Webdesign ist, dass alle Inhalte einer Seite verschiedensten Endgeräten bequem zugänglich gemacht werden können, ohne weitere Systeme (z.B. eine separate mobile Website) aufsetzen zu müssen. Zudem müssen Inhalte nicht unnötig entfernt, sondern nur umstrukturiert werden.

Vorteile im Überblick
  • Eine Webseite deckt mit verschiedenen Layouts alle Endgeräte ab
  • Kein zusätzlicher Aufwand durch Erstellung und Wartung separater Seiten (z. B. mobile Webseite)
  • Perfekte Grundlage für Barrierefreies Webdesign
  • Das responsive Frontend strukturiert die Inhalte automatisch

Anforderungen und Ziele 

Auf folgende Anforderungen muss die Website bei Endgeräten reagieren können:

  • Maße des Displays
  • Auflösung
  • Format bzw. Betrachtungswinkel (Hochformat bzw. Querformat)
  • Eingabemöglichkeiten wie Tastatur, Maus, Finger und Sprache
  • Ziel sollte es sein, dass alle Inhalte der Webseite passend zum Gerät wiedergegeben werden und lesbar sind.