Auf einen Blick. 1 Denken in flexiblen Strukturen Umsetzung eines fixen Designs in ein flexibles Layout... 41

Transkript

1

2 Auf einen Blick Auf einen Blick 1 Denken in flexiblen Strukturen Umsetzung eines fixen Designs in ein flexibles Layout Die Schlüsseltechnologie Media Queries Ein responsiver Workflow Design und Typografie Semantik und Barrierefreiheit Responsive Layout-Patterns Frameworks für responsives Design Navigationskonzepte Flexible Bildelemente Mehr flexible Inhalte Qualitätssicherung und Optimierung Fazit

3 Inhalt Geleitwort des Fachgutachters zur ersten Auflage Vorwort Denken in flexiblen Strukturen Responsive Webdesign: Was bedeutet das eigentlich? Veränderte Anforderungen an die Darstellung von Websites Anpassungsfähige Websites versus Mobilversionen von Websites Beispiele für anpassungsfähige Websites Layouttypen: feste, fluide und flexible Das feste Layout Das fluide und das elastische Layout Das adaptive Layout Das responsive Layout Vom fixen zum flexiblen Raster (»Grid«) Adaptives Layout: festes Layout mit Umbrüchen Gegenüberstellung: adaptives versus fixes Layout Responsives Layout: fluides Layout mit Umbrüchen Gegenüberstellung: responsives versus adaptives Layout Zusammenfassung Umsetzung eines fixen Designs in ein flexibles Layout Die Ausgangslage: ein grafischer Entwurf mit festen Abmessungen Der erste Schritt: feste Raster in flexible umrechnen Der zweite Schritt zu mehr Flexibilität: anpassungsfähige Inhalte Der dritte Schritt: Layouts mit Media Queries umschalten Zusammenfassung

4 3 Die Schlüsseltechnologie Media Queries Cascading Stylesheets (ein kurzer Rückblick) Zuweisung von CSS-Eigenschaften Medientyp (media type) Medienabfrage für den Medientyp setzen Medientypen in der Übersicht Medieneigenschaften (media features) Medieneigenschaften in der Übersicht Media Queries schreiben Komponenten eines Media Querys Viewports und Pixel Der visuelle Viewport Der Layout-Viewport auf mobilen Geräten Gerätepixel und CSS-Pixel: der»virtuelle«visuelle Viewport Das Viewport-Metatag und seine Eigenschaften in CSS Media Queries im Responsive Webdesign Medieneigenschaft width Medieneigenschaft device-width Media Queries in em Medieneigenschaft height vertikale Media Queries Medieneigenschaft orientation Medieneigenschaft aspect-ratio, device-aspect-ratio Medieneigenschaft resolution und device-pixel-ratio Media Queries im HTML-Header oder im Stylesheet Das wichtigste Media Query ist kein Media Query! Media Queries und die alten Internet Explorer Nur Basislayout zuweisen Mittlere Layoutstufen mit Conditional Comments zuweisen Media-Query-Unterstützung mit JavaScript nachrüsten User-Agent-Sniffing und serverseitige Erkennung WURFL & Co Zusammenfassung

5 4 Ein responsiver Workflow Der alte Prozess Phase 1: Moodboards und Inhaltsplan Moodboards Inhalte strukturieren und hierarchisieren Content-Prototypen Phase 2: Style Tiles und Wireframes Style Tiles Mockups Phase 3: Design im Browser Online-Editoren Komponenten, Patterns und Atomic Design Phase 4: Rinse and Repeat Beziehen Sie Ihre Kunden in den Gesamtprozess mit ein Das responsive Team Dokumentation responsiver Designs Style-Dokumentation mit Evernote Dexy Zusammenfassung Design und Typografie Design follows Content You cannot not communicate kein Design ist auch ein Design Design von innen nach außen der Atomic-Design-Ansatz Atomic Design anwenden mit Pattern Lab Designanforderungen für responsive Sites Does size matter was machen Nutzer mit ihren Geräten? Geräteübergreifendes Surfen Size matters: Ziele für Touch-Events Es gibt kein Hover auf Hawaii Inaktives :active auf ios Handpositionen Layoutwechsel bei Änderung der Orientierung

6 5.3.8 Schreiben ist mühsam: Formulare auf Smartphones Mobile Inspiration und Best Pratice Typografie (anpassungsfähiger Text) Die Auswahl der Schriftart Angaben für die Schriftgröße Schriftgrößenwahrnehmung auf kleinen und großen Bildschirmen Zeilenlänge und Durchschuss Skalierbare seitenbreite Texte Zusammenfassung Semantik und Barrierefreiheit Prinzipien der Zugänglichkeit Wahrnehmbarkeit Bedienbarkeit Verständlichkeit Robustheit Semantik durch HTML section article nav aside header footer HTML5-Formularattribute für mehr Semantik Neue Eingabeelemente Semantik durch WAI-ARIA-Rollen Zusammenfassung Responsive Layout-Patterns Mobile First Reduktion auf das Wesentliche ist die Devise Mobile First Progressive Enhancement fürs Layout

7 7.1.3 Mobile First bedeutet auch Content First Fallbacklayout: Was ist die»notfallansicht«? Praxisbeispiel: Mobile First Mobile First los geht s! Mockups für das Layout Basisversion: Smartphone-Ansicht Setzen des Viewport-Metatags Auswahl der Breakpoints Haupt-Breakpoints Anpassungs-Breakpoints Vertikale Breakpoints Praxisbeispiel: ersten Breakpoint setzen (Tablets) Layout-Patterns (Darstellungsmuster) für unterschiedliche Ausgabegeräte Tiny Tweaks (kleine Optimierungen) Mostly Fluid (großteils fließend) Column Drop (abgesenkte Spalten) Layout Shifter (Layoutverdreher) Off-Canvas-Layout (außerhalb des Bildschirms) Footer-Navigation und Off-Canvas-Marginalie Top-Off-Canvas-Menü und Off-Canvas-Marginalie Vertikale und horizontale Off-Canvas-Panels Zusammengefasste Elemente Off-Canvas Off-Canvas-Lösungen aus der Schublade Praxisbeispiel: weitere Breakpoints setzen (große Screens) Kleine Desktopversion nach dem Konzept Layout Shifter Große Desktopversion Breakpoint-Tools Breakpoints testen mit Browsertools Gridpak zum Erstellen von Rastern mit Media Queries CSS3-Layouttechniken für responsive Layouts Flexbox-Layout Grid-Layout (CSS3) Zusammenfassung

8 8 Frameworks für responsives Design Eigene Vorlage oder fertige Frameworks verwenden? Wie wählen Sie das richtige Framework aus? Eine kurze Vorstellung responsiver Frameworks YAML Foundation Bootstrap PureCSS JavaScript-Bibliotheken und andere Helfer jquery Modernizr Elegante Stylesheets mit Präprozessoren: SASS Zusammenfassung Navigationskonzepte Was macht eine Navigation benutzerfreundlich? Benutzerfreundliche Navigation für mobile Geräte Freier Blick auf die Website Ausreichend große Klickflächen für Touchbedienung Umgang mit Menüs mit mehreren Ebenen Navigationstypen für mobile Geräte mit Touchscreen Wenige Menüpunkte am oberen Rand Lange Menüs am oberen Rand Select-Menü Navigation per Anker am Ende des Seiteninhalts Toggle-Menü Off-Canvas-Menü Multilevel-Menüs Die native Einbindung von Multilevel-Menüs auf ios und Android Andere Lösungen für Multilevel-Menüs Zusammenfassung

9 10 Flexible Bildelemente Anpassungsfähige Bilder Praxisbeispiel: anpassungsfähiges Headerbild Bilder ausschnittweise anzeigen Praxisbeispiel: nur Bildausschnitt für die Basisversion Flexible Bilder, die nicht über die ganze Rasterbreite gehen Praxisbeispiel: flexible Teaser-Boxen mit Bild und Text Responsive Hintergrundbilder Gekachelte Hintergrundmuster Großflächige Hintergrundbilder Praxisbeispiel: vollflächige Hintergrundbilder Hintergrundgrafiken als Icons CSS-Sprites für Hintergrundbilder Praxisbeispiel: CSS-Sprites für hochauflösende Hintergrundgrafiken Auflösungsunabhängige Grafiken (SVG) Das Scalable-Vector-Graphics-Format Praxisbeispiel: Icons als SVG-Sprite Praxisbeispiel: SVG-Infografik versus GIF-Infografik Einbindung von SVG-Grafiken Praxisbeispiel: responsive SVG-Einbindung Die responsive SVG-Einbindung Browsersupport und Fallback Icon-Fonts Praxisbeispiel: Icon-Fonts mit Font Awesome Icon-Fonts mit Ligaturen Bilder für unterschiedliche Auflösungen Wie ordne ich die richtigen Bilder im HTML-Code zu? Beschnitt mit automatischer Berücksichtigung des Bildschwerpunkts Und wer erstellt die ganzen Bilder? Zusammenfassung

10 11 Mehr flexible Inhalte Responsive Bildergalerien Praxisbeispiel: flexible Slideshow mit ResponsiveSlides Praxisbeispiel: responsive Bildergalerien mit Flexslider Andere Bildergalerietools Responsive Lightboxen Responsive Image Maps Praxisbeispiel: jquery-rwdimagemaps.js Anpassungsfähige Videos Praxisbeispiel: HTML5-Videos Responsive Embedding von YouTube & Co: Videos im iframe Automatische Anpassung für unterschiedliche Video- Seitenverhältnisse durch FitVids.js und FluidVids.js HTML5-Videoplayer mit video.js Adobe Flash Flexible Karteneinbindungen (Google Maps) Flexible Tabellen Tabelleninhalte deaktivieren (hide on mobile) Die Tabelle mit CSS umstrukturieren Anpassungsfähige Tabellen mit FooTable Mehr responsive Tabellen Akkordeons und Inhaltsboxen mit Reitern Flexible Formulare Anwendungsbeispiel: Formular Inhalte selektiv anzeigen und laden Inhalte entfernen oder ergänzen wann und wie? Inhalte per CSS ausblenden (display: none) Inhalte per CSS hinzufügen Conditional Loading Content via JavaScript (und CSS) Flexible Werbung Bewusstsein schaffen Alte und neue Bannerkonzepte Bannererstellung und -auslieferung Fixe Spalte und nur ein Rectangle-Format Gezieltes Laden von Bannergrößenformaten mit Lazy-Ads ZURB-Playground: Responsive Ads

11 Google AdSense Ads im responsiven Design ausliefern Werbeblöcke zwischen Inhalte schieben mit CSS-Regions (Polyfill) Inhalte dynamisch verschieben Responsive HTML- s Zusammenfassung Qualitätssicherung und Optimierung Testing Validatoren für HTML und CSS Breakpoints testen Auf dem Gerät testen Adobe Edge Inspect, SDKs Performance testen und Optimierung Das Performance-Budget Was beeinträchtigt die Performance? Skripte und HTML Caching Performanceoptimierung für Grafiken und Bilder Schriften optimieren Lazy Loading Aus den Augen, aus dem Sinn? Zusammenfassung Fazit 471 Anhang 473 A.1 Website zum Buch A.2 Quellennachweise der verwendeten Bilder Index

12 1 Denken in flexiblen Strukturen Kapitel 1 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.1 Responsive 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. 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«( im Mai Er beschreibt dort die Grundzüge der Technik, die wir in diesem Buch ausführlich erklären, und wirbt für ein 21

13 1 Denken in flexiblen Strukturen 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 ( 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«(Cameron Moll) 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). 22

14 1 Responsive Webdesign: Was bedeutet das eigentlich? Abbildung 1.2 Alte 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 hatte der erste Macintosh-Computer eine Monitorauflösung von Pixeln. Anfang der 90er-Jahre (des letzten Jahrhunderts) kamen 17-Zoll-Displays mit einer Auflösung von Pixeln auf den Markt. Heute haben viele Laptops und Desktopcomputer-Geräte mehr als 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 Pixel 401 ppi! beim iphone 6 Plus) oder gar beim MacBook Pro Retina ( Pixel). Was schon früher nicht wirklich funktionierte, ist heute angesichts dieser unzähligen Geräteklassen erst recht nicht mehr praktikabel. 23

15 1 Denken in flexiblen Strukturen Abbildung 1.3 Mal 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 px px Abbildung 1.4 Retina-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 24

16 1 Responsive Webdesign: Was bedeutet das eigentlich? 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/ @n07, zur Verfügung gestellt.) 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 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 25