Responsive Webdesign – einfach erklärt

Responsive Webdesign macht Websites fit für alle Bildschirmgrößen. Besonders auch für mobile Endgeräte wie Smartphones oder Tablet-Computer.

Smartphones und Tablet Computer haben längst den Markt und die Herzen junger und älterer Benutzer erobert. Bitcom berichtet im Oktober 2012 zuletzt von „Fast 40 Prozent“ der Deutschen, die bereits ein Smartphone besitzen. Die mobilen Alleskönner verbinden Spiel, Unterhaltung, Arbeit und natürlich den Zugriff aufs World Wide Web von fast überall. Die Experten scheinen sich einig zu sein – dieser Trend wird sich weiter fortsetzen. Ich selbst habe zu Hause vor über einem Jahr meinen letzten Computer entsorgt und nutze dort „nur noch“ ein kleines Tablet (das mit dem Apfel). In meinen Augen ist das nicht nur völlig ausreichend, sondern viel besser als ein Computer. Sofort zugriffsbereit, keine Hitze, kein Lärm, bequem vom Sofa nutzen, mitnehmen usw.

Will man dieser steigenden Zahl der Web-Nutzer mit (im vergleich zum Desktop-Rechnern) relativ kleinen Bildschirmen gerecht werden, ist eine Website die dem Rechnung trägt mittlerweile nicht mehr nur ein nettes Feature sondern eigentlich Pflichtprogramm.

Beim Responsive Webdesign (im Deutschen auch responsives Webdesign) handelt es sich also um die technische Umsetzung eines anpassungsfähigen Website-Layouts. Dieses wird eben nicht nur dem normalen Desktop Computer gerecht, sondern berücksichtigt zusätzlich die Anforderungen anderer Geräte Gattungen.

Unterschiede: Smartphone vs. Desktop Computer:

  • Viel kleinerer Bildschirm
  • Hoch- und querformatig nutzbar
  • wahrscheinlich höhere Pixel Dichte (Retina)
  • Touch Bedienung
  • eventuell weniger Datenrate (von Unterwegs über 3G oder EDGE)
  • direkter Zugriff auf Apps, z.B. Karten-App für Routenbeschreibungen oder Telefon

Wenn auch nicht der einzige, so ist die Bildschirmgröße doch zumindest der offensichtlichste Unterschied bei den verschiedenen Endgeräten.
Bei einer nicht-angepassten Website muss der Benutzer wahrscheinlich reinzoomen um den Text lesen zu können, dass Anklicken eines Links mit dem Finger kann bei so einer Website schon recht abenteuerlich werden.

Negativ-Beispiel: Nun stelle man sich vor man ruft auf der Anreise die Hotel-Website auf (mit dem Smartphone) und will die Rezeption erreichen.
Wenn man wegen der eingeschränkten Datenrate nicht schon am „Intro“ scheitert und schlichtweg nicht weiterkommt, und sich nach x-mal Reinzoomen und Link-Klicken endlich bis zum Impressum durchgeschlagen hat (da auf der Kontaktseite nur ein Formular hinterlegt war) – ist der Ärger spätestens jetzt komplett, da man die Telefonnummer auf dieser Website nicht anklicken kann um direkt den Anruf zu starten, stattdessen: erste Hälfte merken, zur Telefon-App wechseln, eintippen, zurück zur Website, zweite Hälfte merken, zurück zur Telefon-App, Telefonnummer vervollständigen und wählen. Endlich die Rezeption!

Positiv-Beispiel: Man ruft die gleiche Website des Hotels auf (immer noch mit dem Smartphone). Die Website lädt erstaunlich schnell. Gleich auf der Startseite kann man ohne zu zoomen Adresse, E-Mail und Telefonnummer sehen. Man klickt auf die Telefonnummer – das Smartphone wählt: Rezeption!

An diesem Beispiel kann man realistisch nachvollziehen, dass es durchaus Sinn macht sich mit den typischen Nutzungsszenarien auseinanderzusetzen.
Dies ist aber nicht unbedingt nur für spezielle Branchen zutreffend, wer hat nicht schon einmal kurz vor einem Termin nochmal die Website des besuchten Kunden aufgerufen um die genaue Adresse oder Telefonnummer zu finden?

Anderes Beispiel: Gerade vor einigen Tagen sah ich einen Spot im TV, in der das Omega Co-Axial Kaliber beworben wurde – noch bevor der nachfolgende Werbespot so richtig angefangen hatte, war ich schon mit dem iPad auf der Omega Website unterwegs, las Weiteres, schaute ein Image-Video an, klickte mich durch die aktuelle Kollektion. Werber rechnen bereits fest mit der Nutzung des sogenannten Second Screen. Omega war auf mich vorbereitet – die besuchte Seite hieß „OMEGA Uhren: Die Co-Axial Werbekampagne“ und holte mich genau da ab, wo der Werbespot mich abgestellt hatte.

Welche verschiedenen Endgeräte gibt es denn überhaupt?

  • TVs z.B. via Spielkonsole oder Smart-TVs (normalerweise 30″ bis 70″ und mehr)
  • Desktop Computer Monitore (normalerweise 17″ bis 27″ und mehr)
  • Notebooks / Laptops (normalerweise 13″ bis 17″)
  • Subnotebooks (normalerweise ca. 10″ bis 13″)
  • Tablet-Computer (normalerweise 7″ bis 12″) – Hoch- und Querformat
  • Smartphones oder andere Geräte wie z.B. Apple iPod Touch (normalerweise unter 5″) – Hoch- und Querformat

Ist diese Liste zu ausführlich? Wer nutzt nicht mindestens zwei oder drei Geräte aus dieser Liste?

Wie macht man denn nun ein Responsive Design?
Muss man jetzt zwei oder mehr Websites pflegen?

Responsive Webdesign, so geht’s

Die gute, richtige, moderne Art es zu machen ist wie folgt. (mit HTML5 und CSS3.) Man erstellt nicht mehrere Versionen der Website mit einem jeweils unterschiedlichen Aufbau.
Idealerweise hat man den gleichen Inhalt und Aufbau (Content und HTML(5)) und unterscheidet die Darstellung nur Anhand unterschiedlicher Formatierungsbefehle (CSS(3)).
Dazu kann man mittels CSS3 Media Queries (was so viel heißt wie „Abfragen der Medien welche die Website anzeigen“) Formatierungsbefehle auf bestimmten Bildschirmgrößen einschränken.

Bei einem dreispaltigen Layout, lege ich also die Breite der linken, mittleren und rechten Spalte nicht einmalig fest, sondern jeweils entsprechend der verwendeten Bildschirmgröße. Eine Größe für Smartphones, eine Größe für Tablet Computer, eine Größe für Notebooks und eine Weitere für recht große Bildschirme. Da natürlich nicht einmal alle Smartphones einheitliche Größen haben, belasse ich die Breite zwischen diesen „Richt“-Breiten „flexibel“.

Bei einem kleinen Smartphone würde ich nun keine drei Spalten nebeneinander anzeigen – hier zeigen wir die Inhalte untereinander an. Außerdem wird vielleicht eine Box mit der Telefonnummer sichtbar, die auf allen anderen Größen ausgeblendet war – usw. Damit das funktioniert muss man bei der Gestaltung natürlich schon entsprechend „flexibel“ denken.

Das ist im Grunde genommen schon alles.
Haben Sie Interesse Ihre Website „responsive“ zu machen? Sprechen Sie uns an!


Eventuell finden wir, in nicht allzu fernen Zukunft, Zeit einen Artikel zu schreiben, der sich genauer mit der Umsetzung (also technischen Details) beschäftigt.

Wer kurzfristig mehr über das Thema erfahren möchte kann hier weiterlesen (Achtung, nur für Profis):