Flexible Boxes

Vorwort. 19

Einführung. 21

1. Was sich im Web geändert hat. 23

1.1. Back to the roots: 'A Dao of Web Design'. 23

1.2. Von HTML-Tabellen zu 960px-Grid-Frameworks. 25

1.3. Die Entstehung des responsiven Webdesigns. 28

1.4. Paradigmenwechsel: Wichtige Konzepte. 34

1.5. Henne oder Ei: 'Mobile First' versus 'Desktop First'. 40

1.6. Fazit: Veränderung ist das einzig Beständige. 43

2. Das Buch und die Beispielseiten. 45

2.1. Teil I: HTML5 -- ausgezeichneter Inhalt. 45

2.2. Teil II: CSS3 -- Inhalte gestalten. 46

2.3. Teil III: Getting responsive -- Media Queries und Grids. 48

Teil I HTML5 -- ausgezeichnete Inhalte. 51

3. Das HTML5-Universum im Überblick. 53

3.1. Die Verwirrung rund um 'HTML5'. 53

3.2. Eine kurze Geschichte von HTML5. 54

3.3. Das HTML5-Universum im Überblick. 61

3.4. Gute Quellen rund um HTML5. 65

4. Semantische Strukturelemente in HTML5. 69

4.1. Der rote Faden: Die Vorlage von 'HTML5Bones.com'. 69

4.2. Der Vorspann:, und. 71

4.3. Über die neuen semantischen HTML-Elemente. 76

4.4. Die neuen HTML5-Elemente auf der Beispielseite. 86

4.5. Die semantischen Strukturelemente in der Praxis. 96

4.6. Exkurs: Der Outline-Algorithmus von HTML5. 103

5. Kleinigkeiten, Formulare und Multimedia. 111

5.1. Abbildungen mit und. 111

5.2. Änderungen für ältere HTML-Elemente. 113

5.3. Die verschiedenen Formen der Hervorhebung. 118

5.4.: Zeit für Menschen und Maschinen. 122

5.5. Formulare in HTML5: Neue Attribute. 125

5.6. Formulare in HTML5: Semantische Input-Typen. 126

5.7. HTML5 und Sound:. 132

5.8. Als die Bilder laufen lernten:. 136

6. Workshop: Das HTML für die Beispielseiten. 141

6.1. Die Beispielseiten im Überblick. 141

6.2. Der Vorspann: das HTML im. 142

6.3. Die HTML-Struktur im für die Beispielseiten. 143

6.4. Der Inhaltsbereich auf den Beispielseiten. 146

6.5. Flexible Grafiken auf den Beispielseiten. 153

Teil II CSS3 -- Inhalte gestalten. 161

7. Tools, Zentralisierung und Normalisierung. 163

7.1. Webseiten auf kleinen Bildschirmen betrachten. 163

7.2. Zur Entwicklung ein zentrales Stylesheet einrichten. 169

7.3. Normalisierung statt Reset: 'normalize.css'. 171

7.4. Workshop: Zentralisierung und Grundformatierung. 176

7.5. Exkurs: Modernizr hilft beim Umgang mit alten Browsern. 181

8. Selektoren für alle Fälle. 185

8.1. Familienselektoren: Kinder, Geschwister und Nachfahren. 185

8.2. Attributselektoren haben eckige Klammern. 189

8.3. Pseudoelemente haben einen doppelten Doppelpunkt. 193

8.4. Pseudoklassen zum Selektieren von Kindern. 195

8.5. Pseudoklassen für Linkziele und Formulare. 203

8.6. Workshop: Grundformatierung der Layoutbereiche. 205

9. Text gestalten mit CSS3. 209

9.1. Die Schriftgröße definieren mit 'rem'. 209

9.2. Abstände im Fließtext: 'line-height' und 'margin'. 214

9.3. Webfonts: Die Schriftart gleich mitliefern. 217

9.4. Bilder als Schrift: Skalierbare Symbole mit Iconfonts. 223

9.5. Schatten im Text: 'text-shadow'. 230

9.6. Workshop: Textformatierung für die Beispielsite. 232

10. Boxen gestalten mit CSS3. 239

10.1. Boxen wie im richtigen Leben: 'box-sizing: border-box'. 239

10.2. CSS3 statt Grafik: Schatten, runde Ecken und Farbverläufe. 245

10.3. Transparente Boxen: 'opacity' und Alphakanal. 254

10.4. Bewegung mit CSS3: 'transform' und 'transition'. 255

10.5. Workshop: Den Inhalt der Beispielseiten gestalten. 263

11. Mobile Navigation. 269

11.1. Mobile Navigation: Entdecke die Möglichkeiten. 269

11.2. Workshop: Eine Navigation für die Beispielseiten. 276

11.3. Testen, testen, testen. 287

Teil III Getting responsive -- Media Queries, Grids und Frameworks. 295

12. Media Queries -- die Seiten werden responsiv. 297

12.1. CSS 2: Medientypen definieren das Ausgabemedium. 297

12.2. CSS3: Media Queries ergänzen die Medientypen. 300

12.3. Workshop Nr. 1: Die Navigation wird responsiv. 308

12.4. Workshop Nr. 2: Das Layout wird responsiv. 312

12.5. Workshop Nr. 3: Der Inhaltsbereich wird responsiv. 317

13. Layouts mit Raster -- ein Gridsystem erstellen. 325

13.1. Rasterlayouts -- gestalten mit Grids. 325

13.2. Ein 960px-Grid mit zwölf Spalten. 330

13.3. Workshop Nr. 1: Das 960px-Grid erstellen. 333

13.4. Spielregeln zur Arbeit mit den Gridklassen. 337

13.5. Workshop Nr. 2: Die Seiten mit dem Grid gestalten. 338

13.6. Workshop Nr. 3: Die Ergänzung -- das 744px-Grid. 345

13.7. Workshop Nr. 4: 'border-box' für ein stabileres Grid. 348

13.8. Fazit: Ein Grid mit mehreren Stufen. 350

13.9. Frontend-Frameworks trennen Layoutgerüst und Inhalt. 351

14. Flexibles Grid, neues Layout und Desktop First. 355

14.1. Workshop Nr. 1: Das Grid wird flexibel. 355

14.2. Workshop Nr. 2: Volle Breite -- ein Full-Page-Layout. 361

14.3. '10, 9, 8, 7.' -- der Countdown im Internet Explorer. 364

14.4. Exkurs: Die Beispielseiten à la 'Desktop First'. 371

15. Inhalte für responsive Webseiten gestalten. 379

15.1. Workshop Nr. 1: Optimierung der Zeilenlänge. 379

15.2. Workshop Nr. 2: Akkordeon -- Text ein- und ausblenden. 384

15.3. Workshop Nr. 3: jQuery einbinden. 394

15.4. Workshop Nr. 4: 'FlexSlider 2' -- ein responsiver Slider. 396

15.5. Workshop Nr. 5: Flexible Videos mit 'FitVids.js'. 400

15.6. Exkurs: Responsive Bilder mit 'Adaptive Images'. 404

16. Responsive Frontend-Frameworks. 409

16.1. Was Frontend-Frameworks für Sie tun können. 409

16.2. YAML 4 -- das CSS-Framework. 413

16.3. Workshop: 'Rapid Prototyping' mit YAML 4. 416

16.4. Foundation 4 -- ein responsives Frontend-Framework. 432

16.5. Workshop: 'Rapid Prototyping' mit Foundation. 434

Index. 441