| Vorwort | 14 |
| 1 Zeit, dass sich was bewegt | 16 |
| 2 Was ist Responsive Webdesign? | 22 |
| 2.1 Rückbesinnung auf Flexibilität | 23 |
| 2.2 Unglückliche Begriffe | 25 |
| 2.3 Neue Geräte und Display-Größen | 25 |
| 2.4 Zugriffszahlen mobiler Geräte | 28 |
| 2.5 Responsive Webdesign vs. Adaptive Webdesign | 29 |
| 3 Die grundlegenden Zutaten für Responsive Webdesign | 30 |
| 3.1 Das Raster: Aus fix mach flexibel | 31 |
| Abstände anpassen | 39 |
| 3.2 Relative Einheiten für Schriftgrößen | 40 |
| 3.3 Flexible Bilder | 42 |
| Veränderter Kontext | 43 |
| Hintergrundbilder anpassen | 45 |
| 3.4 Flexible Videos | 50 |
| 3.5 CSS3-Mediaqueries | 52 |
| 3.6 Zusätzliche Anpassungen für mobile Geräte | 62 |
| Was passiert, wenn das Gerät in den Landscape-Modus gedreht wird? | 65 |
| 3.7 Einmal kurz durchatmen | 68 |
| 4 Noch mehr Zutaten | 70 |
| 4.1 Was müssen wir noch berücksichtigen? | 70 |
| Einen passenden Workflow entwickeln | 70 |
| Flexibler Umgang mit den Inhalten | 71 |
| Eine solide HTML-Basis | 71 |
| Die Gestaltungsphase | 71 |
| Reaktionsfähige Typografie und Webfonts | 71 |
| Anpassungsfähige Bilder, Grafiken und Icons | 72 |
| Mobile Navigation und Bedienmethoden | 72 |
| Weitere Möglichkeiten mit Mediaqueries | 72 |
| Layouts umsetzen | 73 |
| Performance | 73 |
| 4.2 Die erweiterte Zutatenliste | 73 |
| 5 Ein verbesserter Workflow | 76 |
| 5.1 Der richtige Ausgangspunkt – »Mobile First« oder »Desktop First«? | 76 |
| Planungsphase | 77 |
| Designphase | 79 |
| Entwicklungsphase | 82 |
| Zusammenfassung | 83 |
| 5.2 Abläufe in der Zusammenarbeit | 83 |
| Ein auf das Responsive Webdesign abgestimmter Ablauf | 86 |
| Beispiel einer wechselseitigen Zusammenarbeit | 87 |
| 5.3 Tests auf mobilen Geräten | 90 |
| Emulatoren | 91 |
| 5.4 Wie wird der Auftraggeber |
| 92 |
| 5.5 Fazit | 94 |
| 6 Anpassungsfähige Inhalte | 96 |
| 6.1 Mobile First = Content First | 96 |
| 6.2 Ziele und Bedürfnisse definieren | 99 |
| 6.3 Wireframes: Inhalte aufBildschirmgrößen abstimmen | 101 |
| 6.4 Der Nutzerkontext | 104 |
| Wo und wie nutzen Leute ihr Smartphone? | 105 |
| 6.5 Verschiedene Möglichkeiten zur Inhaltsanpassung | 107 |
| Inhalte weglassen | 108 |
| Inhalte ausblenden | 109 |
| Inhalte neu anordnen | 117 |
| 6.6 Zusammenfassung | 119 |
| 7 Einen Prototypen mit HTML5-Elementen erstellen | 120 |
| 7.1 Ein Blick in die index.html | 123 |
| Conditional Comments | 123 |
| Viewport-Angaben für mobile Geräte | 124 |
| CSS einbinden | 125 |
| Nützliche JavaScript-Helfer | 125 |
| Gerätespezifische Besonderheiten | 127 |
| 7.2 Neue Elemente für mehr Semantik | 128 |
| Sollen wir mit dem Einsatz noch warten? | 130 |
| Inhalte als Basis | 131 |
| Header | 132 |
| Nav | 134 |
| Section | 136 |
| Footer | 137 |
| Article | 138 |
| Section und Article unter der Lupe | 139 |
| Aside | 140 |
| Figure und Figcaption | 142 |
| 7.3 Fazit | 145 |
| 8 Formulare in HTML5 | 146 |
| 8.1 Neue Attribute | 146 |
| Platzhalter | 147 |
| Pflichtfelder | 147 |
| Autofokus | 147 |
| 8.2 Neue Eingabetypen | 148 |
| E-Mail, URL, Telefon | 148 |
| Zahlen, min- und max-Werte, Zählschritte, Platzhalter | 149 |
| Schieberegler | 151 |
| Datum und Uhrzeit | 152 |
| Das Suchfeld | 154 |
| 8.3 Formularvalidierung | 155 |
| Das pattern-Attribut | 155 |
| Ausgabe einer Fehlermeldung | 157 |
| Fehlende Funktionen: JavaScript hilft | 158 |
| 9 Die Gestaltungsphase | 162 |
| 9.1 Layoutmuster | 162 |
| Überwiegend flüssiges Layout | 163 |
| Spalten verschieben | 163 |
| Layout umschalten | 164 |
| Kleine Änderungen | 165 |
| Off Canvas: außerhalb der Darstellungsfläche | 165 |
| Zusammenfassung | 166 |
| 9.2 Bestandteile eines Designs | 166 |
| Fazit | 169 |
| 9.3 Annäherung an die Gestaltung | 169 |
| 9.4 Das richtige Werkzeug finden | 171 |
| 9.5 Gestaltung | 173 |
| 9.6 Zeit sparen | 177 |
| Styletiles | 178 |
| Ein Designsystem entwickeln | 179 |
| Nicht zu sehr ins Detail gehen | 181 |
| Verhandeln | 182 |
| Zusammenfassung | 183 |
| 10 Reaktionsfähige Webtypografie | 184 |
| 10.1 Das Zwischenergebnis testen | 185 |
| Analyse | 187 |
| 10.2 Schriften wählen und testen | 188 |
| Typecast | 189 |
| 10.3 Schriftsetzung in flexiblen Layouts | 191 |
| Die richtige Zeilenlänge | 191 |
| Mehrere Spalten | 193 |
| Automatische Silbentrennung | 195 |
| Die richtige Schriftgröße | 196 |
| Schriftgrößen und Schriftbild | 197 |
| Tipps zum Skalieren | 200 |
| Den Zeilenabstand anpassen | 202 |
| Moderne Einheiten für Schriftgrößen | 203 |
| Kontrast | 206 |
| 10.4 @font-face und Fallback-Schriften | 207 |
| 10.5 Fazit | 208 |
| 11 Anpassungsfähige Bilder, Hintergrundbilder und Icons | 210 |
| 11.1 Herausforderungen im reaktionsfähigen Kontext | 210 |
| 11.2 Adaptive Images | 213 |
| Was passiert da jetzt genau? | 215 |
| Zusammenfassung | 216 |
| 11.3 Responsive Enhance | 217 |
| Funktionsweise | 219 |
| Bilder ausschließen | 220 |
| Fazit | 221 |
| 11.4 Bildmotiv oder -ausschnitt ändern | 221 |
| 11.5 Angriff der Retina-Displays | 223 |
| 11.6 Neue HTML-Elemente braucht das Land | 224 |
| srcset | 225 |
| picture | 225 |
| Quintessenz: eine gute Mischung | 226 |
| Fazit | 228 |
| 11.7 Qual der Wahl | 229 |
| 11.8 Responsive Slider | 229 |
| 11.9 Hintergrundbilder | 231 |
| jQuery Anystretch | 231 |
| Hochauflösende Hintergrundbilder | 232 |
| Hochauflösende CSS-Sprites | 235 |
| 11.10 Pixelperfekte Icons | 237 |
| 11.11 Iconfonts | 238 |
| Nachteile | 240 |
| Fazit | 241 |
| 11.12 SVG | 241 |
| 11.13 Zusammenfassung | 245 |
| 12 Mobile Navigation | 246 |
| 12.1 Was ist wichtig für mobile Navigationen? | 246 |
| Inhalte vor Navigation | 246 |
| Die richtige Größe macht’s | 249 |
| Zusammenfassung | 251 |
| 12.2 Navigationskonzepte | 251 |
| Top-Nav: Es bleibt, wie es ist | 251 |
| Icon-Navigation | 253 |
| Footer-Navigation | 254 |
| Select-Menü | 256 |
| Das Toggle-Menü | 257 |
| Toggle-Varianten | 259 |
| Off-Canvas-Menü | 261 |
| »Pull down for Navigation« | 263 |
| Swipe | 263 |
| Fazit | 263 |
| 12.3 Eine mobile Navigation erstellen | 264 |
| Die Position der Navigation verändern | 264 |
| Die Navigation ein- und ausblenden | 265 |
| 12.4 Fazit | 269 |
| 13 Mediaqueries | 270 |
| 13.1 Nützliche Eigenschaften | 270 |
| Dimensionen | 270 |
| Seitenverhältnis und Ausrichtung | 270 |
| Pixeldichte und Auflösung | 271 |
| Farbe | 271 |
| Ausblick: Maus oder Finger? | 271 |
| 13.2 Mediaqueries kombinieren | 272 |
| 13.3 Mediaqueries planen und strukturieren | 273 |
| Planung | 273 |
| Struktur | 275 |
| 13.4 Mediaqueries mit em angeben | 276 |
| 13.5 Mediaqueries und JavaScript | 278 |
| 14 Layouts umsetzen | 280 |
| 14.1 Reaktionsfähige Gridsysteme | 280 |
| Golden-Grid-System | 281 |
| Goldilocks Approach | 282 |
| Less Framework 4 und Frameless | 282 |
| Modulares Grid | 283 |
| Gridset | 284 |
| Gridpak | 287 |
| Selbst ist der Mann (oder die Frau) | 287 |
| 14.2 Hilfsmittel zum Testen der Layouts | 288 |
| Fazit | 290 |
| 14.3 Design-Module | 290 |
| Einfacher Zweispalter | 290 |
| Verschachtelter Zweispalter | 291 |
| Einfacher Dreispalter | 292 |
| Dreispalter mit Zwischenschritt | 293 |
| Mehrere Zwischenschritte | 294 |
| Vorlagen verwenden | 295 |
| Fazit | 297 |
| 14.4 Hierarchie wahren | 298 |
| Bildseitenverhältnis anpassen | 299 |
| Weitere Gestaltungsmöglichkeiten | 302 |
| 14.5 Elemente neu anordnen | 302 |
| Display: table – die Navigation neu ausrichten | 302 |
| Display: table – die Navigation neu anordnen | 304 |
| AppendAround | 305 |
| Flex Layout – schönes neues CSS | 308 |
| 14.6 Seitenverhältnis flexibler Elemente steuern | 312 |
| 14.7 Inhalte beschneiden | 313 |
| 14.8 Problemfall: sperrige Inhalte | 315 |
| Reaktionsfähige Tabellen | 315 |
| Infografiken und Schaubilder | 321 |
| Bannerwerbung | 323 |
| 15 Performance | 326 |
| 15.1 Gründe für langsame Websites | 329 |
| Gestiegene Datenmenge | 329 |
| Anzahl eingebundener Dateien | 330 |
| 15.2 Den Ladevorgang entschlüsseln | 330 |
| Das HTTP-Wasserfall-Diagramm | 330 |
| Beschränkung paralleler Aufrufe | 332 |
| Der Datei-Overhead | 333 |
| Latenzen | 334 |
| Zusammenfassung | 335 |
| 15.3 Bequeme Gewohnheiten der Entwickler | 336 |
| 15.4 Dateien zusammenführen | 337 |
| JavaScript | 337 |
| JavaScripts von fremden Servern | 339 |
| CSS-Dateien | 339 |
| 15.5 JavaScripts und Stylesheets minifizieren | 344 |
| Minifizier-Software | 345 |
| 15.6 Reihenfolge im HTML-Code | 346 |
| 15.7 Bilder optimieren | 347 |
| Das richtige Dateiformat | 348 |
| Bilddaten eindampfen | 349 |
| 15.8 CSS-Sprites | 352 |
| 15.9 Data URIs | 354 |
| 15.10 GZIP: komprimierte Übertragung | 357 |
| 15.11 Caching: Dateien mit längeren Verfallsdaten ausstatten | 358 |
| 15.12 Lazy Loading | 360 |
| 15.13 Social-Media-Buttons | 362 |
| 15.14 Optimierung innerhalb von CSS | 363 |
| 15.15 Webfonts | 364 |
| 15.16 YSlow | 365 |
| 15.17 Fazit | 366 |
| Ran ans Werk! | 368 |
| Index | 370 |
