Was ist Responsive Webdesign?

Definition, Entstehung, Technik

02.11.2016

Responsive Webdesign bezeichnet die Technik, die es gängigen HTML5- und CSS3-Webseiten ermöglicht, sich automatisch an die Größe und Art des Ausgabegeräts, also Desktop, Tablet oder Smartphone, anzupassen.

Das Layout einer Webseite wird hier so flexibel gestaltet, dass es auf jedem Gerät eine optimale Benutzerfreundlichkeit bietet und keine Einbußen in Funktionalität oder Design entstehen. Der Unterschied zum statischen oder Fixed-Grid Design ist, dass es zwar zum Beispiel auch auf Smartphones angezeigt wird, sich dort jedoch verhält, wie auf einem Computer-Desktop und sehr umständlich navigiert werden muss.

Wieso responsives Webdesign?

Bevor Tablets und Smartphones auf den Markt kamen, gab es keine Notwendigkeit ein Design zu erstellen, dass sich vom normalen Desktop-Layout unterschied. Es machte keinen Sinn, andere Auflösungen als 800 x 600 und 1024 x 768 Pixel bereit zu stellen, 1280 x 1024 Pixel galt schon als exotisch.

Natürlich gab es kleinere und größere Bildschirmauflösungen, aber das Prinzip war immer dasselbe und somit reichte auch ein Standard-Design der Webseite. Wer doch mal einen größeren Monitor hatte, musste sich eben mit Whitespace an den Seiten zufriedengeben. Erst später wurde mit immer unterschiedlicheren Endgeräten und Auflösungen das Bedürfnis geschaffen, mit responsivem Webdesign mehrere Layouts miteinander zu verbinden.

Die Einführung responsiver Websites

Mit der Einführung von Smartphones und den späteren Tablets entstand ein Problem. Das erfolgreiche und bewährte Desktop-Design reichte nicht mehr aus. Touch Displays waren schließlich kleiner, variierten in der Größe und stellten mit der Berührungs-Bedienung auch ganz andere Anforderungen an das Design.

Wer schon einmal am Smartphone versucht hat, einen Link auf einer Webseite zu klicken, die sich nicht an die Größe von Smartphone-Displays anpasst, kennt das Problem der Abstinenz eines responsiven Designs. Die logische Konsequenz war die Optimierung der Webseiten auf mobile Geräte. Doch wer verwaltet gerne 4, 5 oder mehr Webseitenlayouts unabhängig voneinander? Alleine die Tatsache, die Webinhalte in jede der unterschiedlichen Layout-Versionen einzeln einzufügen, treibt jeden Designer in den Wahnsinn.

Die Lösung war, ein einheitliches Layout zu entwerfen, das sich automatisch an die Displaygröße anpasst und die Elemente in variablen Größen und Designs darstellt – ein responsives Layout.

Die Vorteile im Überblick:

  • Angenehmer für den Benutzer
  • Geringerer Verwaltungsaufwand
  • Effizienteres Content Management
  • Keine weißen Balken trotz variierender Bildschirmgrößen
  • Positive Bewertung von Suchmaschinen
  • Keine unterschiedlichen URLs notwendig (keine Gefahr von doppeltem Content)

Die Technik

Begonnen bei der Schriftgröße, bis hin zu den verschiedenen Objekten, gibt es keine festen Größen, bzw. keine sogenannten fixen Layout-Grids mehr. Anstatt dessen werden Schriftgrößen, Zeilenhöhe, etc. in prozentualer Abhängigkeit der verschiedenen Elemente zueinander definiert. So können auch minimale Veränderungen der Bildschirmhöhe oder -breite ohne Whitespace dargestellt und in das Responsive Design integriert werden.

Doch es gibt schließlich auch unterschiedliche Eingabegeräte und je nach Bedienoberfläche muss das Design verändert werden. Geräte mit Touch-Oberfläche brauchen beispielsweise größere Buttons und Links mit größeren Entfernungen zueinander, um sich nicht aus Versehen zu verklicken.

In der Regel wird hier mit drei unterschiedlichen Größen gearbeitet, die sich im Layout teils erheblich unterscheiden können und anhand derer sich relativ zuverlässige Aussagen treffen lassen, welche Art von Gerät gerade verwendet wird. Man spricht hier von sogenannten „Media Queries“.

Die Standard-Auflösungen sind hier:

  • Smartphones: 320 – 560px
  • Tablets: 768 – 1024px
  • Desktop-PCs: 1024px oder mehr

Wer auf einer responsiven Webseite sein Browserfenster am Desktop manuell mit der Maus in der Größe verändert, bemerkt ab einem bestimmten Punkt einen Seitenumbruch, an dem sich das Layout deutlich verändert, auch wenn sich bereits davor Text und Bilder leicht angepasst hatten. Für eine moderne Internetpräsenz führt heute kein Weg mehr an Responsive Webdesign vorbei.

Sie haben noch Fragen zum Thema Responsive Webdesign oder benötigen ein responsives Layout für Ihre eigene Webseite?

Konnten wir
Ihr Interesse wecken?

Nehmen Sie jetzt Kontakt mit uns auf

Kontakt aufnehmen

oder

089 / 201 711 - 0

rufen Sie uns einfach an