Mit sem kostenlo E-Book
Zillgens Responsive Webdesign Bleiben Sie auf dem Laufenden! Der Hanser Computerbuch-Newsletter informiert Sie regelmäßig über neue Bücher und Termine aus den verschiedenen Bereichen der IT. Profitieren Sie auch von Gewinnspielen und exklusiven Leseproben. Gleich anmelden unter www.hanser-fachbuch.de/newsletter
Christoph Zillgens Responsive Webdesign Reaktionsfähige Websites gestalten und umsetzen
Der Autor: Christoph Zillgens, Gangelt Kontakt: cz@zillgensdesign.de, www.twitter.com/czillgens und www.zillgensdesign.de Alle in diesem Buch enthaltenen Informationen, Verfahren und Darstellungen wurden nach bestem Wissen zusammengestellt und mit Sorgfalt getestet. Dennoch sind Fehler nicht ganz auszuschließen. Aus diesem Grund sind die im vorliegenden Buch enthaltenen Informationen mit keiner Verpflichtung oder Garantie irgendeiner Art verbunden. Autor und Verlag übernehmen infolgedessen keine juristische Verantwortung und werden keine daraus folgende oder sonstige Haftung übernehmen, die auf irgendeine Art aus der Benutzung dieser Informationen oder Teilen davon entsteht. Ebenso übernehmen Autor und Verlag keine Gewähr dafür, dass beschriebene Verfahren usw. frei von Schutzrechten Dritter sind. Die Wiedergabe von Gebrauchsnamen, Handelsnamen, Warenbezeich nungen usw. in diesem Buch berechtigt deshalb auch ohne besondere Kennzeichnung nicht zu der Annahme, dass solche Namen im Sinne der Warenzeichen- und Markenschutz-Gesetz gebung als frei zu betrachten wären und daher von jedermann benutzt werden dürften. Bibliografische Information der Deutschen Nationalbibliothek: Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbiblio grafie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar. Dieses Werk ist urheberrechtlich geschützt. Alle Rechte, auch die der Übersetzung, des Nachdruckes und der Vervielfältigung des Buches, oder Teilen daraus, vorbehalten. Kein Teil des Werkes darf ohne schriftliche Genehmigung des Verlages in irgendeiner Form (Fotokopie, Mikrofilm oder ein anderes Verfahren) auch nicht für Zwecke der Unterrichtsgestaltung reproduziert oder unter Verwendung elektronischer Systeme verarbeitet, vervielfältigt oder verbreitet werden. 2013 Carl Hanser Verlag München, www.hanser-fachbuch.de Lektorat: Brigitte Bauer-Schiewek Fachlektorat: Christian Schäfer Copy editing: Petra Kienle, Fürstenfeldbruck Herstellung: Irene Weilhart Satz: Mi43 Werbeagentur, www.mi43.de, Heinsberg Umschlagdesign: Marc Müller-Bremer, www.rebranding.de, München Umschlagrealisation, Titelgestaltung und Layout: Christoph Zillgens Gesamtherstellung: Kösel, Krugzell Ausstattung patentrechtlich geschützt. Kösel FD 351, Patent-Nr. 0748702 Printed in Germany print-isbn: 978-3-446-43015-0 e-book-isbn: 978-3-446-43120-1
V Inhalt Vorwort... XIII Kapitel 1 Zeit, dass sich was bewegt...1 Kapitel 2 Was ist Responsive Webdesign?...7 2.1 Rückbesinnung auf Flexibilität...8 2.2 Unglückliche Begriffe... 10 2.3 Neue Geräte und Display-Größen... 10 2.4 Zugriffszahlen mobiler Geräte... 13 2.5 Responsive Webdesign vs. Adaptive Webdesign... 14 Kapitel 3 Die grundlegenden Zutaten für Responsive Webdesign...15 3.1 Das Raster: Aus fix mach flexibel... 16 Abstände anpassen... 24 3.2 Relative Einheiten für Schriftgrößen... 25 3.3 Flexible Bilder... 27 Veränderter Kontext... 28 Hintergrundbilder anpassen... 30 3.4 Flexible Videos... 35 3.5 CSS3-Mediaqueries... 37 3.6 Zusätzliche Anpassungen für mobile Geräte... 47
VI Inhalt Was passiert, wenn das Gerät in den Landscape-Modus gedreht wird?... 50 Der Umgang mit Internet Explorer 8 und kleiner... 52 3.7 Einmal kurz durchatmen... 53 Kapitel 4 Kapitel 5 Kapitel 6 Noch mehr Zutaten...55 4.1 Was müssen wir noch berücksichtigen?... 55 Einen passenden Workflow entwickeln... 55 Flexibler Umgang mit den Inhalten... 56 Eine solide HTML-Basis... 56 Die Gestaltungsphase... 56 Reaktionsfähige Typografie und Webfonts... 56 Anpassungsfähige Bilder, Grafiken und Icons... 57 Mobile Navigation und Bedienmethoden... 57 Weitere Möglichkeiten mit Mediaqueries... 57 Layouts umsetzen... 58 Performance... 58 4.2 Die erweiterte Zutatenliste... 58 Ein verbesserter Workflow...61 5.1 Der richtige Ausgangspunkt»Mobile First«oder»Desktop First«?... 61 Planungsphase... 62 Designphase... 64 Entwicklungsphase... 67 Zusammenfassung... 68 5.2 Abläufe in der Zusammenarbeit... 68 Ein auf das Responsive Webdesign abgestimmter Ablauf... 71 Beispiel einer wechselseitigen Zusammenarbeit... 72 5.3 Tests auf mobilen Geräten... 75 Emulatoren... 76 5.4 Wie wird der Auftraggeber in den Prozess integriert?... 77 5.5 Fazit... 79 Anpassungsfähige Inhalte...81 6.1 Mobile First = Content First... 81
Inhalt VII 6.2 Ziele und Bedürfnisse definieren... 84 6.3 Wireframes: Inhalte auf Bildschirmgrößen abstimmen... 86 6.4 Der Nutzerkontext... 89 Wo und wie nutzen Leute ihr Smartphone?... 90 6.5 Verschiedene Möglichkeiten zur Inhaltsanpassung... 92 Inhalte weglassen... 93 Inhalte ausblenden... 94 Inhalte neu anordnen... 102 6.6 Zusammenfassung... 104 Kapitel 7 Kapitel 8 Einen Prototypen mit HTML5-Elementen erstellen...105 7.1 Ein Blick in die index.html... 108 Conditional Comments... 108 Viewport-Angaben für mobile Geräte... 109 CSS einbinden... 110 Nützliche JavaScript-Helfer... 110 Gerätespezifische Besonderheiten... 112 7.2 Neue Elemente für mehr Semantik... 113 Sollen wir mit dem Einsatz noch warten?... 115 Inhalte als Basis... 116 Header... 117 Nav... 119 Section... 121 Footer... 122 Article... 123 Section und Article unter der Lupe... 124 Aside... 125 Figure und Figcaption... 127 7.3 Fazit... 130 Formulare in HTML5...131 8.1 Neue Attribute... 131 Platzhalter... 132 Pflichtfelder... 132 Autofokus... 132 8.2 Neue Eingabetypen... 133
VIII Inhalt E-Mail, URL, Telefon... 133 Zahlen, min- und max-werte, Zählschritte, Platzhalter... 134 Schieberegler... 136 Datum und Uhrzeit... 137 Das Suchfeld... 139 8.3 Formularvalidierung... 140 Das pattern-attribut... 140 Ausgabe einer Fehlermeldung... 142 Fehlende Funktionen: JavaScript hilft... 143 Kapitel 9 Kapitel 10 Die Gestaltungsphase...147 9.1 Layoutmuster... 147 Überwiegend flüssiges Layout... 148 Spalten verschieben... 148 Layout umschalten... 149 Kleine Änderungen... 150 Off Canvas: außerhalb der Darstellungsfläche... 150 Zusammenfassung... 151 9.2 Bestandteile eines Designs... 151 Fazit... 154 9.3 Annäherung an die Gestaltung... 154 9.4 Das richtige Werkzeug finden... 156 9.5 Gestaltung... 158 9.6 Zeit sparen... 162 Styletiles... 163 Ein Designsystem entwickeln... 164 Nicht zu sehr ins Detail gehen... 166 Verhandeln... 167 Zusammenfassung... 168 Reaktionsfähige Webtypografie...169 10.1 Das Zwischenergebnis testen... 170 Analyse... 172 10.2 Schriften wählen und testen... 173 Typecast... 174 10.3 Schriftsetzung in flexiblen Layouts... 176 Die richtige Zeilenlänge... 176
Inhalt IX Mehrere Spalten... 178 Automatische Silbentrennung... 180 Die richtige Schriftgröße... 181 Schriftgrößen und Schriftbild... 182 Tipps zum Skalieren... 185 Den Zeilenabstand anpassen... 187 Moderne Einheiten für Schriftgrößen... 188 Kontrast... 191 10.4 @font-face und Fallback-Schriften... 192 10.5 Fazit... 193 Kapitel 11 Anpassungsfähige Bilder, Hintergrundbilder und Icons...195 11.1 Herausforderungen im reaktionsfähigen Kontext... 195 11.2 Adaptive Images... 198 Was passiert da jetzt genau?... 200 Zusammenfassung... 201 11.3 Responsive Enhance... 202 Funktionsweise... 204 Bilder ausschließen... 205 Fazit... 206 11.4 Bildmotiv oder -ausschnitt ändern... 206 11.5 Angriff der Retina-Displays... 208 11.6 Neue HTML-Elemente braucht das Land... 209 srcset... 210 picture... 210 Quintessenz: eine gute Mischung... 211 Fazit... 213 11.7 Qual der Wahl... 214 11.8 Responsive Slider... 214 11.9 Hintergrundbilder... 216 jquery Anystretch... 216 Hochauflösende Hintergrundbilder... 217 Hochauflösende CSS-Sprites... 220 11.10 Pixelperfekte Icons... 222 11.11 Iconfonts... 223 Nachteile... 225 Fazit... 226
X Inhalt 11.12 SVG... 226 11.13 Zusammenfassung... 230 Kapitel 12 Kapitel 13 Mobile Navigation...231 12.1 Was ist wichtig für mobile Navigationen?... 231 Inhalte vor Navigation... 231 Die richtige Größe macht s... 234 Zusammenfassung... 236 12.2 Navigationskonzepte... 236 Top-Nav: Es bleibt, wie es ist... 236 Icon-Navigation... 238 Footer-Navigation... 239 Select-Menü... 241 Das Toogle-Menü... 242 Toggle-Varianten... 244 Off-Canvas-Menü... 246»Pull down for Navigation«... 248 Swipe... 248 Fazit... 248 12.3 Eine mobile Navigation erstellen... 249 Die Position der Navigation verändern... 249 Die Navigation ein- und ausblenden... 250 12.4 Fazit... 254 Mediaqueries...255 13.1 Nützliche Eigenschaften... 255 Dimensionen... 255 Seitenverhältnis und Ausrichtung... 255 Pixeldichte und Auflösung... 256 Farbe... 256 Ausblick: Maus oder Finger?... 256 13.2 Mediaqueries kombinieren... 257 13.3 Mediaqueries planen und strukturieren... 258 Planung... 258 Struktur... 260 13.4 Mediaqueries mit em angeben... 261 13.5 Mediaqueries und JavaScript... 263
Inhalt XI Kapitel 14 Layouts umsetzen...265 14.1 Reaktionsfähige Gridsysteme... 265 Golden-Grid-System... 266 Goldilocks Approach... 267 Less Framework 4 und Frameless... 267 Modulares Grid... 268 Gridset... 269 Gridpak... 272 Selbst ist der Mann (oder die Frau)... 272 14.2 Hilfsmittel zum Testen der Layouts... 273 Fazit... 275 14.3 Design-Module... 275 Einfacher Zweispalter... 275 Verschachtelter Zweispalter... 276 Einfacher Dreispalter... 277 Dreispalter mit Zwischenschritt... 278 Mehrere Zwischenschritte... 279 Vorlagen verwenden... 280 Fazit... 282 14.4 Hierarchie wahren... 283 Bildseitenverhältnis anpassen... 284 Weitere Gestaltungsmöglichkeiten... 287 14.5 Elemente neu anordnen... 287 Display: table die Navigation neu ausrichten... 287 Display: table die Navigation neu anordnen... 289 AppendAround... 290 Flex Layout schönes neues CSS... 293 14.6 Seitenverhältnis flexibler Elemente steuern... 297 14.7 Inhalte beschneiden... 298 14.8 Problemfall: sperrige Inhalte... 300 Reaktionsfähige Tabellen... 300 Infografiken und Schaubilder... 306 Bannerwerbung... 308 Kapitel 15 Performance...311 15.1 Gründe für langsame Websites... 314 Gestiegene Datenmenge... 314
XII Inhalt Anzahl eingebundener Dateien... 315 15.2 Den Ladevorgang entschlüsseln... 315 Das HTTP-Wasserfall-Diagramm... 315 Beschränkung paralleler Aufrufe... 317 Der Datei-Overhead... 318 Latenzen... 319 Zusammenfassung... 320 15.3 Bequeme Gewohnheiten der Entwickler... 321 15.4 Dateien zusammenführen... 322 JavaScript... 322 JavaScripts von fremden Servern... 324 CSS-Dateien... 324 15.5 JavaScripts und Stylesheets minifizieren... 329 Minifizier-Software... 330 15.6 Reihenfolge im HTML-Code... 331 15.7 Bilder optimieren... 332 Das richtige Dateiformat... 333 Bilddaten eindampfen... 334 15.8 CSS-Sprites... 337 15.9 Data URIs... 339 15.10 GZIP: komprimierte Übertragung... 342 15.11 Caching: Dateien mit längeren Verfallsdaten ausstatten... 343 15.12 Lazy Loading... 345 15.13 Social-Media-Buttons... 347 15.14 Optimierung innerhalb von CSS... 348 15.15 Webfonts... 349 15.16 YSlow... 350 15.17 Fazit... 351 Ran ans Werk!...353 Index...354
XIII Vorwort Diese Erzählung wuchs und wuchs, während ich sie erzählte, bis sie zu einem Buch mit dem Schwerpunkt»Responsive Webdesign«wurde. Begonnen hatte es mit der Idee, über hochwertiges Webdesign zu schreiben und fortgeschrittenen Webworkern nützliche Eigenschaften und Werkzeuge rund um HTML5, CSS3 und Webfonts näherzubringen. Während der ersten Entwürfe kristallisierte sich heraus, dass das Thema»Responsive Webdesign«zu umfangreich war, als dass es einfach nur in einem oder zwei Kapiteln abgefrühstückt werden konnte. Zudem hatte ich gerade meine ersten Projekte in diesem Bereich umgesetzt und gemerkt, dass noch viele Fragen unbeantwortet oder nicht zufriedenstellend abgedeckt waren. Das ist nun viele Monde her und in der Zwischenzeit habe ich gesammelt, recherchiert, geschrieben und das zusammengetragen, was Sie gerade in Form dieses Buchs in der Hand halten. Als gelernter Mediengestalter mit Designer-Herz und Frontend-Kopf habe ich mich dabei weitestgehend auf jene Bereiche konzentriert, die mit Gestaltung, HTML und CSS zutun haben. Ganz ohne JavaScript und PHP geht es natürlich nicht, wer aber wilde Code-Stafetten und serverseitige Wunderscripte erwartet, sucht in diesem Buch vergeblich. Auf der anderen Seite sollten Sie aber Kenntnisse in Sachen CSS und HTML mitbringen, für Anfänger empfehle ich zuvor die Lektüre einschlägiger Fachliteratur zu diesem Thema. Nichtsdestotrotz hoffe ich natürlich unabhängig davon, ob Sie eher aus der Designer- oder der Entwicklerecke kommen, dass Sie viele nützliche Informationen in diesem Buch finden und Spaß am Entdecken und Ausprobieren haben!
XIV Vorwort Danksagungen Ein Buch erstellt man nicht allein, auch wenn es einem als Autor während einer nächtlichen Schreibsession mal wieder so erscheinen mag. Im Hintergrund sind einige weitere Leute zu nennen, die dazu beigetragen haben, dass dieses Werk zustande kam. In erster Linie Christian Schäfer, mein technischer Lektor, der spontan zugesagt hat und neben dem Lektorat an vielen Stellen weiteren Input geliefert hat, vor allem im Kapitel Performance, das zu weiten Teilen seiner Feder entspringt. Danke, Schepp! Ebenso mein Kumpel Roman Zenner, der mich zu diesem Himmelfahrtskommando überredet hat und anschließend die Suppe auslöffeln durfte, indem er mir beim Bilder- und ebenso beim Performance-Kapitel unter die Arme gegriffen hat. Thx, Ro! Weiterhin Michael Steinmann, der mir nicht nur Kaffee und Unterkunft bot, sondern auch beim Satz dieses Buchs fleißig mitarbeitete. Danke, Tzoschi! Sandra Kallmeyer und Eric Eggert für die gute Zusammenarbeit bei zwei aktuellen Redesigns natürlich responsive sowie für wertvolle Tipps rund ums Buch. Danke euch beiden! Und natürlich meinen Lektorinnen vom Hanser-Verlag, für die netten Gespräche, das gute Feedback und den letzten Schliff. Darüber hinaus für die Möglichkeit, einen individuellen Weg bei der Buchgestaltung einzuschlagen. Vielen Dank, Margarete Metzger, Brigitte Bauer-Schiewek und Irene Weilhart! Den ultimativen Ehrenplatz auf der Danksagungstribüne erhält natürlich meine Frau Sarah, die über viele Monate einem himmelhochjauchzendzutodebetrübten Kerl die Kraft und die Zeit gegeben hat, dieses Buch zu schreiben und überhaupt und sowieso für alles. Ich liebe Dich! So, bevor jetzt die Tränen kullern und das Mikrofon ob der sekündlich berechneten Redezeit im Boden versinkt, bleibt mir noch, mich bei Ihnen für den Kauf dieses Buchs zu bedanken! Ich wünsche viel Spaß bei der Lektüre!