1Denken in flexiblen Strukturen

»There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web. Thank you.«
Stephen Hay auf Twitter

In unserem ersten Kapitel geht es darum, was Responsive Webdesign ausmacht – nämlich das Denken in flexiblen Strukturen. Wir schauen uns an, was sich verändert hat zwischen dem Web von gestern und heute, und zeigen Ihnen, warum die Anpassungsfähigkeit im Web zukünftig immer wichtiger sein wird und die getrennten Mobile- und Desktopversionen out sind. Wir stellen Ihnen ein paar responsive Websites vor und zeigen Ihnen, wo Sie sich inspirieren lassen können, um richtig einzusteigen. Wir erklären Ihnen die Unterschiede zwischen fixen, fluiden, adaptiven und responsiven Layouttypen, und wir verraten Ihnen, wie Sie jedes feste Layoutraster ganz einfach in ein fluides umrechnen können und welche Tools Sie dabei unterstützen. Des Weiteren werden Sie, wenn Sie dieses Kapitel gelesen haben, auch die drei Hauptzutaten für responsive Websites kennengelernt haben.

1.1Responsive Webdesign: Was bedeutet das eigentlich?

Unter Responsive Webdesign verstehen wir ein Bündel von Maßnahmen (im Wesentlichen auf der Clientseite), mit dem Websites so angelegt werden, dass sie sich unterschiedlichen visuellen Ausgabegeräten möglichst optimal anpassen.

Geprägt hat den Begriff Responsive Design der Bostoner Designer und Entwickler Ethan Marcotte in einem Artikel für das Webmagazin »A List Apart« (http://alist-apart.com/article/responsive-web-design) im Mai 2010. Er beschreibt dort die Grundzüge der Technik, die wir in diesem Buch ausführlich erklären, und wirbt für ein neues Verständnis von Webdesign im Angesicht der Zunahme mobiler Geräte. Der Artikel stieß auf riesige Resonanz, weil er ein Problem behandelt, das vielen Entwicklern bewusst war, für das sie aber selbst noch keine Lösung gefunden hatten: Das Web entwickelt sich in immer schnellerem Tempo weg von einem »Computermedium«, das am traditionellen PC, Mac oder Laptop genutzt wird, hin zu einem »Überallmedium«, das überall und auf einer unüberschaubaren Vielzahl von Geräten stattfindet. Immer unklarer wird, unter welchen Bedingungen ein Nutzer eine Website wahrnimmt; andererseits steigen die Anforderungen an Usability und Performance.

Tatsächlich hat schon ein anderer dieses Thema viel früher erkannt. Cameron Moll (»The Man in Blue«) hatte bereits 2004 (!) ein Experiment veröffentlicht (http://www.themaninblue.com/experiment/ResolutionLayout), das ein voll funktionsfähiges responsives Layout zeigte (siehe Abbildung 1.1). Aufgrund der Tatsache, dass damals noch JavaScript zwingend benötigt wurde und mobile Geräte noch eher exotisch waren (das erste iPhone wurde ja erst 2007 vorgestellt), blieb der Ansatz jedoch weitgehend unbeachtet.

Abbildung 1.1Seiner Zeit um Jahre voraus: das auflösungsabhängige Layout von »The Man in Blue« (Cameron Moll)

1.1.1Veränderte Anforderungen an die Darstellung von Websites

Das Web verändert sich. Im Grunde waren die ersten Websites bereits perfekt an unterschiedliche Bildschirmgrößen angepasst; durch Verzicht auf Breitenangaben floss ihr Inhalt in jedem Ausgabegerät, wie es passte. So war das World Wide Web konzipiert – flexibel und anpassungsfähig (siehe Abbildung 1.2).

Abbildung 1.2Alte Site in neuem Browser: Die erste Website musste sich um das Design noch keine Sorgen machen.

Im Laufe der Zeit ging die Flexibilität immer mehr verloren. Zugunsten eines komplexeren, an Printprodukte angelehnten Layouts wurden immer mehr Websites auf feste Größen »optimiert«. Insbesondere die Frage nach der üblichen Bildschirmbreite war lange Zeit für viele Webdesigner (oder deren Kunden) eine der wichtigsten Fragen. Aber selbst in der Höhe wurden die Layouts auf fixe Maße angepasst. »Gelungen« ist das durch die Verwendung fester Größen für alle Layoutbestandteile. Bis zum Jahr 2000 wurde dies hauptsächlich mithilfe von Tabellen- und Frame-Layouts erreicht, später dann als CSS-Layouts (Cascading Stylesheets) mit festen Pixelmaßen realisiert.

1984 hatte der erste Macintosh-Computer eine Monitorauflösung von 512 × 342 Pixeln. Anfang der 90er-Jahre (des letzten Jahrhunderts) kamen 17-Zoll-Displays mit einer Auflösung von 1.024 × 768 Pixeln auf den Markt. Heute haben viele Laptops und Desktopcomputer-Geräte mehr als 1.600 Pixel in der Breite. Zusätzlich gibt es eine große Vielfalt von mobilen Geräten wie Smartphones und Tablets in sehr unterschiedlichen Größen. Hinzu kommen neue Werte für die Pixeldichte wie beim Retina-Display des iPhones (bis zu 1.920 × 1.080 Pixel – 401 ppi! – beim iPhone 6 Plus) oder gar beim MacBook Pro Retina (2.880 × 1.800 Pixel). Was schon früher nicht wirklich funktionierte, ist heute angesichts dieser unzähligen Geräteklassen erst recht nicht mehr praktikabel.

Abbildung 1.3Mal zu groß und mal zu klein: Das feste Layout der 90er-Jahre passt selbst auf traditionellen Monitoren nur selten so richtig gut, geschweige denn auf dem Smartphone.

Abbildung 1.4Retina-Display versus iPhone 3: Kein normales Layout kann diese Unterschiede abdecken.

Das Layout muss wieder flexibel werden. Gleichzeitig wollen wir aber auch nicht mehr zurück in das letzte Jahrhundert und auf Gestaltung größtenteils verzichten. Heute sollen unsere Websites sowohl mit mobilen Geräten als auch mit großen Desktopmonitoren harmonisch dargestellt werden. Das Design muss nicht nur auf der heutigen Gerätegeneration funktionieren, sondern auch mit neuen Produkten, deren genaue Spezifikationen wir noch gar nicht kennen. Wir benötigen flexible kontrollierbare Layouts, eigentlich genau das, was Tim Berners-Lee für das Web vorschwebte – also auf, zurück in die Zukunft!

Abbildung 1.5»The web is for everyone«, sagte auch Sir Tim Berners-Lee. Und der muss es ja wissen – schließlich hat er’s erfunden! (Das Bild wurde freundlicherweise von Ferenc Domsodi, flickr.com/photos/55350999@N07, zur Verfügung gestellt.)

1.1.2Anpassungsfähige Websites versus Mobilversionen von Websites

Responsive Design grenzt sich bewusst von der Mobilversion einer Website ab. Die Unterschiede liegen einerseits darin, dass eine responsive Website ein und dieselbe Basis an Inhalten hat – im Gegensatz zu den meisten Mobilversionen, die nur einen kleinen Teil der Inhalte und Funktionen der »großen Website« abbilden.

Bei der Website von T-Mobile sieht man den Unterschied sehr deutlich (siehe Abbildung 1.6): Mobil- und Desktopversion haben größtenteils völlig unterschiedliche Inhalte (auch das lästige Kleingedruckte wird dem mobilen Kunden erspart). Wer von seinem Desktoprechner kommend eine Recherche auf seinem Smartphone vollenden will, muss sich erst einmal neu orientieren und findet dann aufgrund der fehlenden Inhalte trotzdem nicht, was er sucht. Die Umsetzung ist den Machern offenbar auch selbst nicht so ganz geheuer, und sie spendieren einen Link zur »klassischen Website«.

»Responsive« versus »Mobile« ist nicht nur eine technische Unterscheidung, sondern resultiert aus einem neuen Verständnis, wie und wann Websites (mit mobilen Geräten) genutzt werden Wir gehen darauf in Kapitel 5, »Design und Typografie«, noch weiter ein.

Abbildung 1.6Mobil- und Desktopversion von T-Mobile: Komplett unterschiedliche Strukturen für unterschiedliche Geräte sind verwirrend für die Nutzer.

Außerdem sind mobile Websites in der Regel für traditionelle Smartphones (oft sogar nur für das iPhone) optimiert. Auf Tablets oder anderen Geräten (auch solchen, die heute noch gar nicht existieren) sehen die »Minidesigns« oft nicht gut aus. Responsive Websites hingegen haben den Anspruch, auf jedem Gerät gut auszusehen und den verfügbaren Platz optimal zu nutzen.

1.1.3Beispiele für anpassungsfähige Websites

Ein viel beachteter Relaunch fand 2012 statt, als Microsoft seine Website komplett auf responsives Design umstellte (siehe Abbildung 1.7).

Mit dem Relaunch einer so großen Corporate-Website war endgültig klar, dass Responsive Webdesign nicht nur ein Thema für kleine Blogs oder übermotivierte Webentwickler mit zu viel Zeit ist, sondern ein belastbarer neuer Ansatz. Inte-ressante Einblicke in die...