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 |