Ertel / Laborenz Responsive Webdesign

Konzepte, Techniken, Praxisbeispiele
3. Auflage 2017
ISBN: 978-3-8362-4580-7
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 6 - ePub Watermark

E-Book, Deutsch, 524 Seiten

Reihe: Rheinwerk Computing

»Responsive« ist heute eine Kernanforderung an jede Website. Doch mit passenden Breakpoints allein ist es nicht getan. Auch Typografie und Navigation müssen auf allen Endgeräten funktionieren. Für Profis heißt das: ständig weiterlernen, optimieren und neue Lösungen finden. Lernen Sie in diesem Praxisbuch, wie Sie anpassungsfähige Websites programmieren und gestalten - von Anfang an und auf dem aktuellsten Stand der Technik. Das Standardwerk in der dritten Auflage.

Aus dem Inhalt:

• Media Queries und Viewports
• Design und Typografie
• Semantik und Barrierefreiheit
• Responsive Layout-Patterns
• Das passende Framework wählen
• Knackpunkt Navigation
• Flexible Inhaltselemente
• Device Testing / CSS-Regression
• Performance-Optimierung

Die Fachpresse zur Vorauflage:
dotnetpro: »Anschaulich und verständlich. Zeigt alle wichtigen Aspekte. Sehr gut!«

Autoren/Hrsg.

Ertel, Andrea

Laborenz, Kai

Inhaltsverzeichnis

Vorwort ... 17  1.  Denken in flexiblen Strukturen ... 21  1.1 ... Responsive Webdesign: Was bedeutet das eigentlich? ... 21  1.2 ... Layouttypen, feste, fluide und flexible ... 29  1.3 ... Flexible Raster -- Gridsysteme ... 31  1.4 ... Layoutumbrüche -- Breakpoints ... 36  1.5 ... Zusammenfassung ... 38  2.  Schnelleinstieg: Responsive Umsetzung eines fixen Layouts ... 39  2.1 ... Die Ausgangslage: Ein grafischer Entwurf mit festen Abmessungen ... 39  2.2 ... Der erste Schritt: Feste Raster in flexible umrechnen ... 43  2.3 ... Der zweite Schritt zu mehr Flexibilität: Anpassungsfähige Inhalte ... 46  2.4 ... Der dritte Schritt: Layouts mit Media Queries umschalten ... 49  2.5 ... Zusammenfassung ... 51  3.  Die Schlüsseltechnologie Media Queries ... 53  3.1 ... Cascading Stylesheets (ein kurzer Rückblick) ... 54  3.2 ... Medientyp (Media Type) ... 55  3.3 ... Medieneigenschaften (Media Features) ... 57  3.4 ... Media Queries schreiben ... 60  3.5 ... Viewports und Pixel ... 63  3.6 ... Media Queries in der Praxis ... 72  3.7 ... Media-Query-Unterstützung mit JavaScript ... 80  3.8 ... Serverseitige Geräte- und Feature-Erkennung ... 83  3.9 ... Zusammenfassung ... 86  4.  Ein responsiver Workflow ... 87  4.1 ... Der alte Prozess ... 87  4.2 ... Phase 1: Moodboards und Inhaltsplan ... 91  4.3 ... Phase 2: Style Tiles und Wireframes ... 94  4.4 ... Phase 3: Design im Browser ... 101  4.5 ... Phase 4: Rinse and Repeat ... 103  4.6 ... Das responsive Team ... 105  4.7 ... Dokumentation responsiver Designs ... 106  4.8 ... Zusammenfassung ... 109  5.  Design und Typografie ... 111  5.1 ... Design follows Content ... 111  5.2 ... Design von innen nach außen -- der Atomic-Design-Ansatz ... 114  5.3 ... Designanforderungen für responsive Sites ... 121  5.4 ... Typografie (anpassungsfähiger Text) ... 134  5.5 ... Zusammenfassung ... 151  6.  Semantik und Barrierefreiheit ... 153  6.1 ... Prinzipien der Zugänglichkeit ... 153  6.2 ... Semantik durch HTML5 ... 161  6.3 ... Semantik durch WAI-ARIA-Rollen ... 167  6.4 ... Zusammenfassung ... 170  7.  Responsive Layout-Patterns ... 171  7.1 ... Mobile First ... 172  7.2 ... Praxisbeispiel: Mobile First ... 174  7.3 ... Auswahl der Breakpoints ... 185  7.4 ... Praxisbeispiel: Ersten Breakpoint setzen (Tablets) ... 189  7.5 ... Layout-Patterns (Darstellungsmuster) für unterschiedliche Ausgabegeräte ... 193  7.6 ... Praxisbeispiel: Weitere Breakpoints setzen (große Screens) ... 202  7.7 ... Flexbox-Layout ... 206  7.8 ... Grid-Layouts (CSS3) ... 211  7.9 ... Zusammenfassung ... 218  8.  Frameworks für responsives Design ... 219  8.1 ... Eigene Vorlage oder fertige Frameworks verwenden? ... 220  8.2 ... Wie wählen Sie das richtige Framework aus? ... 222  8.3 ... Eine kurze Vorstellung responsiver Frameworks ... 223  8.4 ... JavaScript-Bibliotheken ... 237  8.5 ... Elegante Stylesheets mit Präprozessoren: SASS & Co. ... 240  8.6 ... Zusammenfassung ... 247  9.  Navigationskonzepte ... 249  9.1 ... Was macht eine Navigation benutzerfreundlich? ... 249  9.2 ... Benutzerfreundliche Navigation für mobile Geräte ... 250  9.3 ... Wenige Menüpunkte am oberen Rand ... 252  9.4 ... Lange Menüs kompakt anordnen ... 256  9.5 ... Select-Menü ... 260  9.6 ... Navigation per Anker am Ende des Seiteninhalts ... 265  9.7 ... Toggle-Menü ... 269  9.8 ... Off-Canvas-Menü ... 272  9.9 ... Multilevel-Menüs ... 280  9.10 ... Zusammenfassung ... 285

10.  Flexible Bildelemente ... 287  10.1 ... Anpassungsfähige Bilder ... 287  10.2 ... Responsive Hintergrundbilder ... 296  10.3 ... Responsive Icons ... 312  10.4 ... Auflösungsunabhängige Grafiken (SVG) ... 341  10.5 ... Die Syntax für responsive Bilder ... 355  10.6 ... Unterschiedliche Versionen für responsive Bilder erzeugen ... 367  10.7 ... Zusammenfassung ... 377

11.  Mehr flexible Inhalte ... 379  11.1 ... Responsive Slider nicht nur für Bilder ... 380  11.2 ... Responsive Lightboxen ... 389  11.3 ... Responsive Image Maps ... 392  11.4 ... Anpassungsfähige Videos ... 394  11.5 ... Flexible Karteneinbindungen (Maps) ... 403  11.6 ... Flexible Tabellen ... 406  11.7 ... Akkordeons und Inhaltsboxen mit Reitern ... 414  11.8 ... Flexible Formulare ... 418  11.9 ... Inhalte selektiv anzeigen und laden ... 423  11.10 ... Flexible Werbung ... 430  11.11 ... Responsive HTML-E-Mails ... 438  11.12 ... Zusammenfassung ... 442

12.  Testing und Qualitätssicherung ... 443  12.1 ... Validatoren für HTML und CSS ... 443  12.2 ... Breakpoints im Browser testen ... 444  12.3 ... Auf mobilen Geräten testen ... 450  12.4 ... Qualitätssicherung und Wartung ... 461  12.5 ... Zusammenfassung ... 469

13.  Performanceoptimierung ... 471  13.1 ... Das Performancebudget ... 472  13.2 ... Was beeinträchtigt die Performance? ... 473  13.3 ... Skripte, Stylesheets und HTML ... 476  13.4 ... Caching ... 489  13.5 ... Performanceoptimierung für Grafiken und Bilder ... 490  13.6 ... Web-Schriften optimieren ... 492  13.7 ... Gefühlte Performance und Nachladen von Inhalten ... 495  13.8 ... Zusammenfassung ... 507

14.  Fazit ... 509  Anhang ... 511  Index ... 513

Leseproben

1    Denken 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 entscheidend ist und getrennte 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 Layouts, 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.1    Responsive Webdesign: Was bedeutet das eigentlich?

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

Eine responsive Website besteht aus drei »Hauptzutaten«:

• einem fluiden Layoutraster
• anpassungsfähigen Inhalten
• Layoutumbrüchen durch Media Queries

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://alistapart.com/article/responsive-web-design) schon 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 hatte schon ein anderer dieses Thema viel früher erkannt. Cameron Moll (»The Man in Blue«) hatte bereits 2004 (!) ein Experiment veröffentlicht (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.1    Seiner Zeit um Jahre voraus: das auflösungsabhängige Layout von »The Man in Blue« von 2004 (Cameron Moll)

1.1.1    Verä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.2    Alte Site in neuem Browser: Die allererste 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 hin »optimiert« (siehe Abbildung 1.3). 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.

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

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 Desktop-Computer mehr als 1.600 Pixel in der Breite. Zusätzlich gibt es eine große Vielfalt an 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 iPhone (bis zu 1.920 × 1.080 Pixel – 401 ppi! – bei den iPhones 6 und 7 Plus) oder gar beim MacBook Pro (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.

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 (siehe Abbildung 1.4) – also auf, zurück in die Zukunft!

Abbildung 1.4    »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.2    Anpassungsfä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 deutlich (siehe Abbildung 1.5): 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 teilweise trotzdem nicht, was er sucht. Die Umsetzung ist den Machern offenbar auch selbst nicht so ganz geheuer, und sie begrüßen die Nutzer mit einer Auswahlbox, auf der sie sich entscheiden müssen, ob sie zum »mobilen Shop« oder zur »klassischen Website« möchten – was schwer zu entscheiden ist, wenn man nicht weiß, was die Unterschiede der Versionen sind.

Abbildung 1.5    Mobil- und Desktopversion von T-Mobile: Komplett unterschiedliche Strukturen für unterschiedliche Geräte sind verwirrend für die Nutzer (links). Die nur für iPads optimierte »Mobilansicht« wird auf Smartphones unbenutzbar lang (rechts).

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

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. Oder es ist (wie bei der Telekom) umgekehrt: Die mobile Website ist für Tablets optimiert und nur notdürftig an echte Smartphones angepasst. Responsive Websites hingegen haben den Anspruch, auf jedem Gerät gut auszusehen und den verfügbaren Platz optimal zu nutzen.

1.1.3    Beispiele für anpassungsfähige Websites

Ein viel beachteter Relaunch fand 2012 statt, als Microsoft seine Website komplett auf responsives Design umstellte (siehe Abbildung 1.6). Mit dem Relaunch einer so großen Corporate-Website war endgültig klar, dass Responsive...