Responsive Webdesign

Responsive Webdesign macht Websites für alle Bildschirmgrößen fit, 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 Nutzer erobert. Bitkom 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: 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 nutzbar, mitnehmbar und so weiter.

Willst du der steigenden Zahl der Web-Nutzer mit (im Vergleich zu Desktop-Rechnern) relativ kleinen Bildschirmen gerecht werden, ist eine Website, die dem Rechnung trägt, mittlerweile nicht mehr nur ein nettes Feature, sondern Pflichtprogramm.

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

Unterschiede: Smartphone gegen Desktop-Computer

• viel kleinerer Bildschirm
• im Hoch- und Querformat nutzbar
• wahrscheinlich höhere Pixeldichte (Retina)
• Touch-Bedienung
• eventuell weniger Datenrate (von unterwegs über 3G oder EDGE)
• direkter Zugriff auf Apps, etwa die Karten-App für Routen oder das Telefon

Wenn auch nicht der einzige, so ist die Bildschirmgröße doch der offensichtlichste Unterschied zwischen den Geräten. Bei einer nicht angepassten Website musst du wahrscheinlich hineinzoomen, um den Text zu lesen. Das Anklicken eines Links mit dem Finger wird dann recht abenteuerlich.

Negativ-Beispiel: Stell dir vor, du rufst auf der Anreise die Hotel-Website auf (mit dem Smartphone) und willst die Rezeption erreichen. Wenn du wegen der eingeschränkten Datenrate nicht schon am Intro scheiterst und dich nach mehrmaligem Zoomen und Klicken endlich bis zum Impressum durchgeschlagen hast (weil auf der Kontaktseite nur ein Formular lag), ist der Ärger spätestens dann komplett: Die Telefonnummer lässt sich nicht antippen, um direkt anzurufen. Stattdessen: erste Hälfte merken, zur Telefon-App wechseln, eintippen, zurück zur Website, zweite Hälfte merken, zurück zur Telefon-App, Nummer vervollständigen und wählen. Endlich die Rezeption.

Positiv-Beispiel: Du rufst dieselbe Hotel-Website auf (immer noch mit dem Smartphone). Sie lädt erstaunlich schnell. Gleich auf der Startseite siehst du ohne Zoomen Adresse, E-Mail und Telefonnummer. Du tippst auf die Telefonnummer, das Smartphone wählt: Rezeption.

An diesem Beispiel lässt sich nachvollziehen, dass es Sinn ergibt, sich mit den typischen Nutzungsszenarien auseinanderzusetzen. Und das gilt nicht nur für spezielle Branchen: Wer hat nicht schon kurz vor einem Termin die Website des Kunden geöffnet, um die genaue Adresse oder Telefonnummer zu finden?

Anderes Beispiel: Vor einigen Tagen sah ich einen TV-Spot, in dem das Omega Co-Axial Kaliber beworben wurde. Noch bevor der nächste Werbespot richtig angefangen hatte, war ich schon mit dem iPad auf der Omega-Website unterwegs, las weiter, schaute ein Image-Video und klickte mich durch die aktuelle Kollektion. Werber rechnen längst mit der Nutzung des sogenannten Second Screen. Omega war auf mich vorbereitet: Die Seite hieß „OMEGA Uhren: Die Co-Axial Werbekampagne" und holte mich genau da ab, wo der Spot mich abgestellt hatte.

Welche Endgeräte gibt es überhaupt?

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

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

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

Responsive Webdesign, so geht es

Die gute, richtige, moderne Art (mit HTML5 und CSS3) ist diese: Man erstellt nicht mehrere Versionen der Website mit jeweils unterschiedlichem Aufbau. Idealerweise hat man den gleichen Inhalt und Aufbau (Content und HTML) und unterscheidet die Darstellung nur über unterschiedliche Formatierungsbefehle (CSS). Dazu schränkst du mit CSS3-Media-Queries (also Abfragen der Medien, die die Website anzeigen) Formatierungen auf bestimmte Bildschirmgrößen ein.

Bei einem dreispaltigen Layout lege ich die Breite der linken, mittleren und rechten Spalte nicht einmalig fest, sondern jeweils entsprechend der Bildschirmgröße: eine Größe für Smartphones, eine für Tablets, eine für Notebooks und eine weitere für große Bildschirme. Da nicht einmal alle Smartphones einheitliche Größen haben, belasse ich die Breite zwischen diesen Richt-Breiten flexibel.

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

Das ist im Grunde schon alles. Hast du Interesse, deine Website responsive zu machen? Sprich uns an.

Vielleicht finden wir in nicht allzu ferner Zukunft Zeit, einen Artikel zu schreiben, der sich genauer mit der Umsetzung, also den technischen Details, beschäftigt.

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

• Bootstrap
• Font Awesome
• retina.js
• jQuery