Was ist Responsive Webdesign?

Responsives Webdesign „reagierendes Webdesign“, ist eine aktuelle Technik um Websites und Inhalte auf allen Endgeräten, wie Desktop-Computer, Tablet oder Smartphones einheitlich und flexibel darzustellen ohne für mobile Geräte eine zusätzliche mobile Website-Variante anzubieten oder zu erstellen. Der Begriff wurde erstmals von Ethan Marcotte im Mai 2010 in einem Artikel für das Magazin A List Apart verwendet.

Die Inhalte, Navigationselemente, Bilder verhalten sich dabei flexibel und passen sich der jeweiligen Bildschirmauflösung an. Diese Technik beruht auf HTML5 und CSS3 mit Media-Queries und ist in allen modernen Web-Browsern, sowohl auf dem PC, Tablet und dem Handy vorhanden.

Zu beachten sind jedoch nicht nur die Inhaltselemente an sich, sondern auch die unterschiedliche Bedienung zwischen Desktop-PC's und mobilen Geräten mit Touch-Oberfläche. Das Verhalten ist bei beiden Varianten grundverschieden. Auf Desktop-PC's erfolgt die Steuerung der Website über die Maus bzw. der Tastatur, welche bei einem Smartphone oder Tablet, so, nicht vorhanden sind. Daher spielen auch die Aspekte der Bedienung im Responsive Webdesign eine große Rolle.

Folgende Standauflösungen werden in der Regel verwendet:

Desktop-Computer: 1024px+
Tablets: 1024px bis 786px
Smartphones: 480px bis 320px

 

Für responsives Webdesign wesentliche Voraussetzung sind Media-Queries, welche das Design der Website in Abhängigkeit von bestimmten Eigenschaften des genutzten Gerätes verändern.

Folgenden Eigenschaften werden unteranderem dabei berücksichtigt:

  • Breite und Höhe des Browserfensters
  • Größe des Gerätes
  • Bildschirmauflösung
  • Orientierung (Hoch- oder Querformat)
  • Eingabemöglichkeiten (Tastatur, Touch bzw. Sprache)

Warum Responsive Webdesign?

Wenn auf einem mobilen Gerät eine Website aufgerufen wird und diese nicht speziell an Mobilgeräte angepasst ist, wird die Desktopvariante ausgeliefert und angezeigt. Da die Bildschirmgrößen bei mobilen Geräten im Verhältnis zu Desktop-PC's kleiner sind, werden Texte und Inhalte sehr klein und kaum lesbar angezeigt. Der Nutzer kann Navigations-Elemente oder entsprechende Call-To-Action Elemente schlechter auswählen, bzw. muss zoomen und verlässt mitunter schneller die Website.

Responsiv optimierte Websites sind auf allen Endgeräten in einer Variante verfügbar und können durch den Nutzer in allen Auflösungen optimal bedient werden, da Schriftgrößen, Bedienelemente und auch die Steuerung für die entsprechenden Auflösungen automatisch angepasst werden.

Vorteile vom Responsive Webdesign

Bei der strikten Trennung von Mobil- und Desktopvariante besteht meist, mindestens ein, doppelter redaktioneller Pflegeaufwand, je nach Anzahl der einzelnen Varianten muss für jede Variante der Inhalt einzeln gepflegt werden.

Der Vorteil von Responsive Webdesign besteht darin, das die redaktionellen Inhalte nur in Form und Größe flexibel verändert werden, also nicht doppelt gepflegt werden müssen. So wird Beispielsweise ein zweispaltiger Text auf mobilen Geräten einspaltig dargestellt bzw. ein Bild im Textfluss des Inhaltes rutscht aus dem Textfluss raus und wird über dem Text angezeigt.

Sie wollen Ihre Website kostenlos testen?

Nutzen Sie den kostenlosen Responsive Webdesign Tester

Zurück

Anzeige

Das könnte Sie auch interessieren