Responsive Webdesign – Erklärung und Vorteile

In diesem Artikel möchte ich euch das Responsive Webdesign etwas näher bringen. Zur Zeit ist es in der Web-Branche in aller Munde, jedoch immer noch nicht so recht angekommen. In dem folgenden Beitrag erkläre ich den Begriff Responsive Webdesign und dessen Vorteile. Als Beispiel dient auch unserer Blog.

Das ist Responsive Webdesign

Bei Responsive Webdesign handelt es sich um eine Layout-Struktur, welche sich an die Vielfallt der Auflösungen von Endgeräten anpasst. Sicherlich sind jedem verschiedene 4:3, 16:9 oder 16:10 Formate von herkömmlichen Bildschirmen bekannt. Dabei handelt es sich ausschließlich um Querformate. Durch den rasant angestiegenen Anteil von mobilen Endgeräten wie Smartphones und Tablets kommen hier aber auch weitere Auflösungen in verschiedenen Formaten hinzu. So hat ein Smartphone Beispielsweise meist ein Hochformat mit 320 Pixel Breite. Jedoch ist auch ein Querformat fast immer möglich durch kippen des Gerätes. Ähnlich ist es bei Tablets, hier scheint es kaum ein einheitliches Format zu geben.

Dies hat natürlich auch Auswirkung auf das Layout einer Webseite. Wo oft mehrspaltige Inhalte Sinn machen und oft auch nötig sind, wird das bei den relativ kleinen und schmalen Formaten von Smartphones schon etwas schwierig. Hier muss die Schriftgröße im Verhältnis größer gewählt werden, auch sind mehrspaltige Layouts fast unmöglich, da die benötigte Breite nicht zur Verfügung steht. Es heißt also, die Webseite so anzupassen, um den Bereich zwischen hochauflösenden Breitbild-Formaten und niedrig auflösenden Hochformaten abzudecken.

Bisher fertigte man für mobile Endgeräte spezielle mobile Versionen der Webseite. Diese waren meist einspaltig und der Content untereinander gegliedert. Somit gab es zwei verschiedene Ansichten der Webseite. Bei der Fülle an Auflösungen reicht das jedoch bei weitem nicht aus.

Ein Design mit vielen Layouts

Abhilfe schafft man sich mittels eines Responsive Designs. Dieses erkennt die Auflösung des jeweiligen Endgerätes und zeigt passend dafür das Layout an. Ein tolles Beispiel liefert dieser Blog hier. Verkleinert man den Browser in der Breite, so sieht man die Funktionalität eines responsive Webdesigns. Je nach Breite werden Inhalte umstrukturiert und entweder untereinander oder nebeneinander angeordnet. Bei unserem Blog haben wir 3 Stufen, Smashing Magazine hat dafür sogar 5 verschiedene Layouts.

3-5 Breiten-Stufen sind somit OK, diese sollten jedoch noch separat skalierbar sei. In unserer schmalsten Ansicht sieht man, wie der Inhalt ausschließlich untereinander strukturiert wird und dicke Rahmen-Abstände nicht mehr sichtbar sind. In der mittleren Stufe verschwindet bereits die rechte Spalte komplett. Diese Ansicht richtet sich an Tablets mit größerem Display im Hochformat. Die volle Breite richtet sich dann Monitore und Tablets mit hoher Auflösung und Querformat. Mit 3 skalierbaren Stufen kann man somit bereits alle Auflösungen abdecken.

Beispiel

Im Beispiel oben sieht man die Webseite einer großen Bostoner Zeitung in 3 verschiedenen Versionen. Links die normale Web-Ansicht (3 Spalten), in der Mitte eine schmalere für Tablets (2 Spalten) und rechts eine Version speziell für Smartphones. Dort wird der Inhalt untereinander angeordnet.

Anforderungen und Ziel

Auf folgende Anforderungen muss die Webseite 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.

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. extra mobile Webseite) 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
  • Grundlage für eine gute Corporate Identity
  • Das responsive Frontend strukturiert die Inhalte automatisch

Über Peter

Ich bin seit 2008 selbständiger Web-Entwickler und Inhaber von Design-Insel.de. Ich versorge meine Kunden mit anspruchsvollen und erfolgsorientierten Weblösungen. Dazu zählen mittelständische aber auch größere Unternehmen wie T-Systems und Zalando.

7 Kommentare

Hinterlasse eine Antwort