Immer mehr Menschen gelangen via Smartphones oder Tablets ins Netz: 2011 nutzen 1,4 Mio Schweizer täglich oder fast täglich ein Smartphone, um im Web zu surfen. Ist Ihre Website bereit dafür?
Die Nutzerzahlen im mobilen Web explodieren. Zu den Smartphone-Surfern kommen noch die Tablet-Nutzer dazu. Ihre Zahl hat sich 2011 auf 300’000 verfünffacht. Für Unternehmen wird es deshalb immer wichtiger, die eigene Webseite für die neuen Endgeräte zu optimieren.
Responsive Design ist eine Entwicklung, die diesem Trend Rechnung trägt. Damit lassen sich Websites bauen, die auf jedem Endgerät optimal aussehen. Eine Browserweiche, die das jeweilige Endgerät erkennt und unterschiedliche HTML-Anweisungen ausliefert, ist nicht mehr nötig. Der Nachteil: Ältere Browser wie der Internet Explorer 7 und 8 kommen nicht mit Responsive Design zurecht.
Für Carpathia, ein Beratungsunternehmen, haben wir vor kurzem eine neue Website in Responsive Design realisiert.
Für die technische Umsetzung war Blogwerk, für das responsive Design Karin Christen verantwortlich.
Wenn Sie beim Betrachten der Carpathia-Website die Grösse Ihres Browserfensters verändern, erkennen Sie die verschiedenen Darstellungen.
Wie funktioniert Responsive Design?
Responsive Design basiert auf Technologien wie HTML5 und CSS. Das Endgerät wird von der Website erkannt und die Darstellung der einzelnen Elemente passt sich automatisch an. Auch Portrait- oder Landscape-Modi bei einem Smartphone werden erkannt. Sieht man sich den Code einer Website in Responsive Design an, erkennt man die Anweisungen für die verschiedenen Bildschirmgrössen. Hier zuerst das Smartphone:
Hier wird die minimale (320px) und maximale (480px) Breite (width) des Gerätes (device) abgefragt und gegebenenfalles geladen. Für ein Tablet wird das CSS entsprechend ergänzt:
Eine sehr grosse Vielzahl an möglichen Geräte-Breiten sind bei css-tricks.com abgedeckt.
Alternativen zu Responsive Design
Nach wie vor funktioniert die Lösung, ein Mobile CSS und ein für den Desktop optimiertes CSS zur Verfügung zu stellen. Bei dieser Variante wird nicht darauf geachtet, welche Bildschirmgrösse ein Endgerät hat, sondern serverseitig überprüft, was für ein Endgerät es ist. Je nachdem wird dann erst ein entsprechendes Mobile CSS geladen oder eben die ganz normalen CSS Definitionen für den Desktop.
Die richtige Lösung für die mobile Website
Die Entscheidung, ob man mit einer Browserweiche oder mit Responsive Design arbeiten will, hängt von den Usern Ihrer Website ab: Wenn Ihre Website auch für Internet Explorer 7 und 8-Nutzer optimal dargestellt werden soll, empfehlen wir die Lösung mit einer Browserweiche.
Wenn Sie allerdings keinen grossen Wert darauf legen, wie Ihre Webseite im Internet Explorer 7 und 8 aussieht, dann empfehlen wir, eine Responsive Design-Lösung zu realisieren. Der Grund ist einfach: Man spart Zeit, da kein zusätzliches mobiles CSS geschrieben werden muss. Auch Google empfiehlt inzwischen Websites mit Responsive Design zu realisieren.
Meine Favoriten: Responsive Design at its best
teixido.co ist durch und durch responsive gestaltet. Wenn man den Browser verkleinert, kann man sehen, wie einige Elemente verschwinden und andere zum Vorschein kommen.
Power of one war eine Konferenz für Programmierer, welche im letzten Jahr abgehalten wurde. Auch sie ist responsive gestaltet und auch hier kann man beim Vergrössern und Verkleinern des Browsers erkennen, wie sich einzelne Grafiken je nach Grösse des Fensters verändern.
Google haftete lange das Image an, keine schönen Designs zu machen. Mit Google+ und der Produkteseite des Chromebooks hat Google eindrücklich das Gegenteil bewiesen. Und es zeigt: Der Suchgigant setzt in Zukunft auf responsives Webdesign.
Love & Luxe vereint wieder alles. Hübsche Typografie, gut überlegtes Design und responsive.
Diese Liste liesse sich um viele weitere responsive Designs erweitern – von der Website des Präsidenten der Vereinigten Staaten, Barack Obama, über “The Boston Globe“, bis hin zum bekannten Online-Magazin, “Smashing Magazine“. Und wer jetzt vor lauter responsive Design immer noch nicht genug hat, dem kann ich mediaqueri.es sehr ans Herz legen.
Schreiben im Web – ein praktischer Leitfaden für internetgerechtes Texten. Das kostenlose E-Book finden Sie hier 
Whitepaper und Wissenskarten zu Online Kommunikation und Social Media – 
Auch wenn er das Thema nur am Rande anschneidet, ist es doch eine gelungener Beitrag mit guten Beispielen.
Wenn ich die Carpathia Webseite auf dem iPhone betrachte stört mich die etwas zu präsente Navigation welche ca. 90% des Bildschirms einnimmt.
Hier gäbe es aus meiner Sicht optimalere Lösungen wie bei Twitter’s Bootstrap oder mittels DropDown Menü.
Anbei noch ein Link mit welchem sich RWD Webseiten einfach testen lassen: http://responsive.is
Hallo Marcel
vielen Dank für dein Feedback. Natürlich hätte man das Thema noch ausführlicher behandeln können.
Wer responsive Design aber von Grund auf lernen möchte, dem kann ich das Buch “Responsive Webdesign” von Ethan Marcotte sehr empfehlen.
Super artikel,responsive ist auf jeden fall die zukunft und meiner meinung nach die bessere lösung als eine mobile weiche.
Gruss frederik
Kurz und bündig mit den wichtigsten Infos – vielen Dank. Auch die Beispiele sind wirklich gelungen.
RWD kommt auch mit Internet Explorer 7 und 8 zurecht. Scott Jehl hat dafür ein Polyfill geschrieben https://github.com/scottjehl/Respond
@Frederik: eine bestehende Webseite noch auf Responsive umzustellen braucht meines Erachtens einiges mehr als Zeit, als eine Browserweiche und ein separates CSS zu nutzen. Responsive mache ich viel lieber von Grund auf, dann weiss ich, was ich habe.
@Vedran: Vielen Dank für den Input, habe es fürs gelegentliche Lesen gebookmarkt.
Responsive von Grund auf – das ist auch meiner Meinung nach der einfachste und saubere Weg für zugänglichen Webseiten. Ich verwende den von @Vendran genannten Polyfill mittlweile nicht mehr bzw. gar keine polyfills für mediaqueries mehr – zuviel Nebeneffekte und zuviel Arbeit für zweifelhafte Vorteile.
Hier noch ein Test-Tool mit dem man auch einfache Viewport Einstellungen simulieren (für seiten mit fixer Breite sehr praktisch) – siehe Slider unterm iPhone:
http://www.responsimulator.com
Wichtig ist aber auch, dass die Kommunikationsagentur oder Werbeagentur das Responsive Design immer wieder testet. Das Webdesign und das Grafik Design kann am Computer und in der Theorie oft perfekt aussehen, dann aber am Smartphone dafür das Gegenteil. Ebenso ist SEO und die Erstellung und Implementierung von Flash Banner zu überdenken. Suchmaschinenoptimierung wird mittlerweile von sehr vielen Unternehmen angeboten.