Inhaltsverzeichnis

Alle Kapitel aufklappen

Alle Kapitel zuklappen

Vorwort zur zweiten Auflage

Einführung

1 Was sich im Webdesign geändert hat

1.1 Back to the roots: »A Dao of Web Design«

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

1.2.1 Von HTML-Tabellen zu CSS-Layouts

1.2.2 Die Zeit der 960-Pixel-CSS-Grid-Frameworks

1.3 Die Entstehung des responsiven Webdesigns

1.3.1 Smartphones und Tablets: das Web jenseits des Desktops

1.3.2 »Responsive Web Design« unterstützt die flexible Natur des Web

1.3.3 »Responsive« erobert das Web im Sturm

1.3.4 »Responsive« und »Adaptive« – zwei Begriffe verwirren die Welt

1.4 Das Web wird mobil – bei Arbeit, Sport und Spiel

1.4.1 »Mobile« kann viele verschiedene Dinge bedeuten

1.4.2 Das Web ist das Web und wird allgegenwärtig

1.5 Moderne Websites erstellen

1.5.1 »Desktop First«: so wie immer und noch etwas dazu

1.5.2 »Mobile First«: klein anfangen und dann hoch hinaus

1.5.3 »Content First«: Die Besucher kommen für den Inhalt

1.5.4 Der Fisch im Wasser: »Rapid Prototyping«

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

2 Das Buch und die Beispielseiten

2.1 Teil I: HTML5 – ausgezeichneter Inhalt

2.2 Teil II: CSS3 – Inhalte gestalten

2.3 Teil III: Getting responsive

2.4 Teil IV: Grids, Frameworks und Flexbox

Teil I HTML5 – ausgezeichnete Inhalte

3 Das HTML5-Universum im Überblick

3.1 Die Verwirrung rund um HTML5

3.2 Eine kurze Geschichte von HTML5

3.2.1 Phase 1: HTML – zwischen W3C und Browserherstellern

3.2.2 Phase 2: Aus HTML 4.01 wird XHTML 1.0

3.2.3 Phase 3: XHTML 2.0 und die Revolte der Browserhersteller

3.2.4 Phase 4: Zurück zu HTML – das W3C ändert den Kurs

3.2.5 Phase 5: W3C und WHATWG – together apart …

3.3 Das HTML5- Universum im Überblick

3.3.1 HTML5 macht das Web fit für Webanwendungen

3.3.2 Visuelle Übersicht: die Karte vom HTML5-Universum

3.4 Gute Quellen rund um HTML5

3.4.1 Anlaufstelle für allgemeine Infos: »html5doctor.com«

3.4.2 Anlaufstelle für Fragen zur Browserunterstützung: »caniuse.com«

3.4.3 In German: Peter Kröners Blog auf »peterkroener.de«

4 Semantische Strukturelemente in HTML5: <header>, <footer> und Co.

4.1 Der rote Faden: die Vorlage von »HTML5Bones.com«

4.2 Der Vorspann: <!DOCTYPE>, <html> und <head>

4.2.1 Ein guter Start: <!DOCTYPE html> und <html>

4.2.2 Der Zeichensatz: <meta charset="utf-8">

4.2.3 Alte Bekannte: Seitentitel und Seitenbeschreibung

4.2.4 Diese Seite bitte nicht verkleinern: das Meta-Element für den Viewport

4.3 Über die semantischen Strukturelemente in HTML5

4.3.1 Die neuen semantischen HTML5-Strukturelemente im Überblick

4.3.2 »Semantisches HTML« gibt den Inhalten eine Bedeutung

4.3.3 »Layoutbereiche« wurden traditionell mit <div> ausgezeichnet

4.3.4 In HTML5 gibt es semantische Elemente für Layoutbereiche

4.3.5 Integrierte Orientierungshilfen: »ARIA Landmark Roles«

4.3.6 ARIA Landmark Roles in Aktion

4.3.7 ARIA Landmark Roles in HTML5

4.4 Die semantischen Strukturelemente in »HTML5 Bones«

4.4.1 HTML5 Bones – Layoutbereiche im Überblick

4.4.2 Der Kopfbereich: <header role="banner">

4.4.3 Die Site-Navigation: <nav role="navigation">

4.4.4 Der Hauptinhaltsbereich: <main role="main">

4.4.5 Inhalte in Abschnitte unterteilen: <section>

4.4.6 In sich geschlossene, eigenständige Inhalte: <article>

4.4.7 Es gibt meistens nicht nur eine richtige Lösung: <section> vs <article>

4.4.8 Zusätzlicher Inhalt mit <aside role="complementary">

4.4.9 Der Fußbereich: <footer role="contentinfo">

4.4.10 Kurzes Fazit zu <header>, <footer> und Co.

4.5 Die semantischen Strukturelemente im Alltag

4.5.1 Ist die Webwelt schon bereit für die neuen HTML5-Elemente?

4.5.2 Die semantischen Elemente per CSS stylen

4.5.3 Hilfe für alte Browser per JavaScript: HTML5Shiv

4.5.4 Übung: Beispielseite von HTML5 Bones gestalten

4.6 Exkurs: Der Outline-Algorithmus von HTML5

4.6.1 Die Hierarchie der Überschriften beim W3C

4.6.2 Die Hierarchie der Überschriften bei HTML5 Bones

4.6.3 »Sectioning«: Abschnitte mit <nav>, <section>, <article> und <aside>

4.6.4 Den Outline-Algorithmus testen

4.6.5 Fazit: Der Outline-Algorithmus ist Zukunftsmusik

100

4.6.6 Und was ist mit <hgroup>?

100

4.6.7 Wie man Untertitel auszeichnen sollte – Alternativen zu <hgroup>

101

5 Kleinigkeiten und Formulare

102

5.1 Abbildungen beschriften: <figure> und <figcaption>

102

5.1.1 Ein Bild mit Beschriftung

102

5.1.2 Mehrere Bilder mit Beschriftung

104

5.2 Nützliche Änderungen für ältere HTML-Elemente

105

5.2.1 Hyperlinks um Block-Elemente sind jetzt erlaubt

105

5.2.2 <ol start="3">: Nummerierungen müssen nicht mit »1« anfangen

107

5.2.3 <address> zeigt Kontaktinformationen für die Seite und für Artikel

107

5.2.4 <small> steht jetzt für »das Kleingedruckte«

108

5.2.5 <hr> markiert einen inhaltlichen Bruch innerhalb eines Abschnitts

109

5.3 Die verschiedenen Formen der Hervorhebung

109

5.3.1 <strong> kennzeichnet wichtigen Text

109

5.3.2 <em> kennzeichnet eine andere sprachliche Betonung

110

5.3.3 <i> kennzeichnet Begriffe, Namen oder Ähnliches im Fließtext

111

5.3.4 <b> hebt Texte wie z. B. Teaser ab

111

5.3.5 <mark> hebt Text hervor, der für den Benutzer wichtig ist

112

5.3.6 Übersicht: Merkhilfen für die Elemente zur Hervorhebung

113

5.4 <time>: Zeit für Menschen und Maschinen

113

5.4.1 Datumsangaben mit <time>

114

5.4.2 Die Uhrzeit mit <time>

114

5.5 Formulare in HTML5: neue Attribute

116

5.5.1 Platzhalter: Formularfelder vorbelegen mit »placeholder«

116

5.5.2 Pflichtfelder definieren mit »required«

116

5.5.3 Den Cursor automatisch platzieren mit »autofocus«

117

5.6 Formulare in HTML5: semantische Eingabefelder

117

5.6.1 <input type="email"> für E-Mail-Adressen

118

5.6.2 Eingabefelder für Webadressen und Telefonnummern

119

5.6.3 <input type="search"> für die Suchfunktion

119

5.6.4 <input type="number"> für Zahlen

120

5.6.5 Eingabefelder für Datum und Uhrzeit

122

6 Responsive Grafiken, Audio und Video

124

6.1 Grafiken optimieren und flexibel einbinden

124

6.1.1 Jedes Kilobyte zählt – die Optimierung von Grafiken

125

6.1.2 Grafiken einbinden mit <img> ohne »width« und »height«

127

6.1.3 Flexible Bilder per CSS mit »max-width:100%«

128

6.1.4 Exkurs: Hochauflösende Displays benötigen mehr Pixel

129

6.2 HTML und responsive Grafiken

130

6.2.1 Die Geschichte der responsiven Grafiken – von 2010 bis »picture«

131

6.2.2 Die »picture«-Spezifikation erweitert das <img>-Element

133

6.2.3 Die vier Anwendungsfälle für responsive Grafiken

134

6.3 Grafiken nach Pixeldichte: <img> und »srcset x«

135

6.3.1 Die Syntax: das Element <img>, das Attribut »srcset« und ein »x-Wert«

136

6.3.2 Ein Beispiel: <img> und »srcset x« in Aktion

136

6.3.3 Browserunterstützung und Fazit für <img> und »srcset x«

138

6.4 Grafiken nach Viewport-Breite: <img> und »srcset w«

139

6.4.1 Tausche X gegen W: <img>, »srcset« und ein »w-Wert«

139

6.4.2 Erweiterte Syntax: <img>, »srcset w«, »sizes« und die Einheit »vw«

141

6.4.3 Der Clou: Pixeldichte ist bei »srcset w« und »sizes« schon mit drin

142

6.4.4 Das Attribut »sizes« kann die Breite des Viewports abfragen

143

6.4.5 Browserunterstützung und Fazit für <img> und »srcset w«

145

6.5 Unterschiedliche Bildmotive und Dateiformate

147

6.5.1 »Art direction« mit <picture>: ein anderes Motiv servieren

147

6.5.2 Ein Beispiel: art direction mit <picture> in Aktion

148

6.5.3 Unterschiedliche Dateiformate servieren

149

6.5.4 Browserunterstützung und Fazit zu <picture>

151

6.6 HTML5 und Sound: <audio>

152

6.6.1 Let there be sound: Audioformate und Browser

153

6.6.2 Die Einbindung von <audio> im Browser mit HTML5 Bones

154

6.7 Als die Bilder laufen lernten: <video>

155

6.7.1 Videoformate und Browser im Überblick

156

6.7.2 Die Einbindung von <video> mit HTML5 Bones

157

6.7.3 Flexible Videos per CSS

159

7 Workshop: Das HTML für die Beispielseiten

160

7.1 Die Beispielseiten im Überblick

160

7.2 Der Vorspann: das HTML im <head>

161

7.3 Die HTML-Struktur im <body> für die Beispielseiten

162

7.3.1 Der Seitenkopf: das HTML im <header>

163

7.3.2 Die Navigation: <nav> steht unterhalb vom Header

164

7.3.3 Der Inhaltsbereich mit <main> und <section id="content">

164

7.3.4 Der Fußbereich mit <footer>

165

7.4 Der Inhaltsbereich für die Startseite

166

7.4.1 Überschriften und Fließtext für die Startseite

166

7.4.2 Eine Grafik auf der Startseite einbinden

168

7.5 Der Inhaltsbereich für die Seite »News«

170

7.5.1 Der Hauptinhalt in <main> für die Seite »News«

170

7.5.2 Linklisten mit einem <aside> auf der Seite »News«

172

7.6 Der Inhaltsbereich für die Kontaktseite

173

Teil II CSS3 – Inhalte gestalten

177

8 Tools: kleine Viewports, CSS und JavaScript

178

8.1 Webseiten in verschiedenen Viewports testen

178

8.1.1 »Bildschirmgrößen testen«: das Menü »Web-Entwickler« im Firefox

179

8.1.2 Das Bookmarklet »Viewport Resizer« von Malte Wassermann

179

8.1.3 Online: »ish. yet another viewport resizer« von Brad Frost

181

8.2 CSS3 – Module und Browser-Präfixe

182

8.2.1 CSS3 besteht aus vielen verschiedenen Modulen

182

8.2.2 Die Browser-Präfixe: »-webkit-«, »-moz-«, »-o-« und »-ms-«

183

8.3 Das CSS-Fundament: »normalize.css«

184

8.3.1 Basisformatierung Normalisierung für neue HTML5-Elemente

185

8.3.2 Links, Typografie und mehr

186

8.3.3 Normalisierung für Formulare und Tabellen

187

8.4 Ein zentrales Stylesheet erleichtert die Entwicklung

187

8.4.1 Divide et impera: beim Entwickeln mehrere Stylesheets benutzen

188

8.4.2 »@media« steht innerhalb der einzelnen Stylesheets

188

8.4.3 Wenn die Seiten fertig sind, Styles in einer Datei vereinen

189

8.5 jQuery – das Fundament für viele kleine Helferlein

190

8.5.1 JavaScript, jQuery und jQuery-Plugins

190

8.5.2 jQuery downloaden und einbinden

190

8.5.3 Testen, ob jQuery korrekt eingebunden wurde

192

8.5.4 Online: jQuery via CDN direkt aus dem Web einbinden

193

8.5.5 Praktisch: Viewport-Breite direkt im Browserfenster anzeigen lassen

194

8.6 Modernizr hilft beim Umgang mit alten Browsern

196

8.6.1 Modernizr interviewt den Browser

196

8.6.2 Modernizr downloaden und einbinden

197

8.6.3 Testen, ob Modernizr korrekt einbunden wurde

198

8.6.4 Ein einfaches Beispiel zur Benutzung von Modernizr

199

8.7 Workshop: Zentralisierung und Grundformatierung

200

8.7.1 Ein zentrales Stylesheet »styles.css« mit »@import«-Regeln erstellen

200

8.7.2 Grundformatierung der Layoutbereiche in »layout.css«

202

8.7.3 Kopf- und Fußbereich gestalten in »layout.css«

203

8.7.4 Allgemeine Klassen zum Verstecken und Floaten in »layout.css«

203

8.7.5 Grundformatierung der Navigation in »nav-basis.css«

204

8.7.6 Grundformatierung der Bilder und Überschriften in »inhalte.css«

205

8.7.7 Die Beispielseiten am Ende dieses Kapitels

206

9 Selektoren für alle Fälle

208

9.1 Familienselektoren: Kinder, Geschwister und Nachfahren

208

9.1.1 Alle Nachfahren auswählen mit einer Leerstelle: »ul li«

209

9.1.2 Alle direkten Kinder selektieren: »ul > li«

209

9.1.3 Die Geschwisterselektoren: Pluszeichen + und Tilde ~

211

9.2 Attributselektoren haben eckige Klammern

213

9.2.1 Nur das Attribut: element[attribut]

213

9.2.2 Nur ein Gleichheitszeichen: element[attribut="zeichen"]

213

9.2.3 Mit Tilde und Gleichheitszeichen: element[attribut~="zeichen"]

214

9.2.4 Mit Hütchen und Gleichheitszeichen: element[attribut^="zeichen"]

214

9.2.5 Mit Dollar und Gleichheitszeichen: element[attribut$="zeichen"]

215

9.2.6 Mit Sternchen und Gleichheitszeichen: element[attribut*="zeichen"]

215

9.2.7 Zum Nachschlagen: alle Attributselektoren in einer Tabelle

216

9.3 Pseudoelemente haben einen (doppelten) Doppelpunkt

216

9.3.1 Die Sache mit dem Doppelpunkt: Pseudoelemente früher und heute

216

9.3.2 Pseudoelemente in der Praxis: externe Links gestalten

217

9.3.3 Websites zum Nachschlagen von Unicode-Zeichen

218

9.4 Pseudoklassen zum Selektieren von Kindern

219

9.4.1 Besondere Kinder auswählen: »:first-child«, »:last-child« und »:only-child«

219

9.4.2 Der Zauberstab zum Auswählen von Kindern: »:nth-child()«

221

9.4.3 »:nth-child« mit ganzen Zahlen: »:nth-child(n)«

222

9.4.4 »:nth-child« mit einfachen Ausdrücken: »:nth-child(an+b)«

223

9.4.5 Die Pseudoklassen »:first-of-type«, »:last-of-type« und »:only-of-type«

225

9.4.6 Pseudoklassen kombinieren: alle außer dem ersten und dem letzten

226

9.5 Pseudoklassen für Linkziele und Formulare

228

9.5.1 Die Pseudoklassen »:target«, »:not()« und »:empty«

228

9.5.2 Pseudoklassen für Formulare

229

10 Text gestalten mit CSS3

230

10.1 Webfonts: die Schriftart gleich mitliefern

230

10.1.1 Webfonts und »@font-face«

230

10.1.2 Google Fonts: gehostete, lizenzfreie Schriften im Handumdrehen

232

10.1.3 Google Fonts am Beispiel von »Open Sans«

233

10.1.4 Webfonts auf dem eigenen Webspace: »Fontsquirrel Webfont Kit«

236

10.1.5 Webfonts auf dem eigenen Webspace: Fonts konvertieren lassen

236

10.2 Relative Einheiten für die Schriftgröße

238

10.2.1 Flexible Veteranen: »em« und »%«

238

10.2.2 Die vorübergehende Emanzipation des »px«

239

10.2.3 Das »root em«: »rem« hat <html> als Basis

240

10.2.4 »px« als Fallback für ältere Browser

241

10.2.5 Zum Nachschlagen: Umrechnung von Pixel in »rem«

242

10.3 Abstände im Fließtext: »line-height« und »margin«

243

10.3.1 Vertikaler »margin« und »line-height« sind wichtig für die Lesbarkeit

243

10.3.2 Der Zeilenabstand: »line-height« ohne Einheit

244

10.4 Schatten im Text: »text-shadow«

245

10.4.1 Die Syntax und ein paar einfache Beispiele

246

10.4.2 Beispiele für Effekte mit mehrfachen Schatten

247

10.5 Icons als Schrift: skalierbare Symbole mit Iconfonts

248

10.5.1 Iconfonts am Beispiel »Genericons«: die Einbindung

249

10.5.2 Beispiel Nr. 1: Das Twitter-Symbol als Schrift einbinden

250

10.5.3 Beispiel Nr. 2: Eine komplette Social-Media-Leiste mit Iconfonts

252

10.5.4 Beispiel Nr. 3: Häkchen als Aufzählungszeichen

253

10.6 Workshop: Textformatierung für die Beispielsite

255

10.6.1 »Dosis« – Schriftgestaltung für den Kopfbereich

255

10.6.2 »Open Sans« – Schriftgestaltung für Überschriften und Fließtext

257

10.6.3 Optional: Social-Media-Leiste im Fußbereich mit den »Genericons«

258

11 Boxen gestalten mit CSS3

260

11.1 Boxen wie im richtigen Leben: »box-sizing: border-box«

260

11.1.1 Das klassische Box-Modell: »box-sizing: content-box«

260

11.1.2 Verschiedene Einheiten und das doppelte »div«

262

11.1.3 »box-sizing:border-box« als Alternative zum klassischen Box-Modell

263

11.1.4 Die Border-Box im Weballtag: Browserunterstützung und Einbindung

265

11.2 CSS3 statt Grafik: Schatten, runde Ecken und Farbverläufe

267

11.2.1 Schattenboxen mit »box-shadow«

267

11.2.2 Runde Ecken mit »border-radius«

269

11.2.3 Lineare Farbverläufe: die Syntax

272

11.2.4 Farbverläufe erstellen mit dem »Ultimate CSS Gradient Generator«

273

11.3 Transparente Boxen: »opacity« und Alphakanal

275

11.4 Bewegung mit CSS3: »transform« und »transition«

277

11.4.1 »Transformers«: Elemente bewegen mit »transform«

277

11.4.2 Elemente vergrößern mit »transform: scale()«

279

11.4.3 Fließende Übergänge mit »transition«

280

11.4.4 Elemente drehen mit »transform: rotate()«

283

11.4.5 Elemente verschieben mit »transform: translate()«

283

11.5 Workshop: Den Inhalt der Beispielseiten gestalten

285

11.5.1 Beispielseiten auf »box-sizing: border-box« umstellen

285

11.5.2 Grafiken im Inhaltsbereich gestalten

286

11.5.3 Überschriften und Fließtext gestalten

287

11.5.4 Das Formular auf der Kontaktseite gestalten

289

Teil III Getting responsive

291

12 Media Queries – die Seiten werden responsiv

292

12.1 CSS 2: Medientypen definieren das Ausgabemedium

292

12.1.1 Eine Druckversion mit »@media print«

292

12.1.2 Smartphones und Tablets kennen den Medientyp »handheld« nicht

295

12.2 CSS3: Media Queries = Medientypen plus Medieneigenschaften

296

12.2.1 Die Syntax: »@media Medientyp and (Eigenschaft: Wert)«

297

12.2.2 Was man mit Media Queries so alles abfragen kann

298

12.2.3 Media Queries zur Abfrage der Pixeldichte

299

12.3 Media Queries und Angaben zum Viewport

301

12.3.1 Ohne <meta name="viewport"> funktionieren Media Queries nicht

301

12.3.2 Die Anweisung »@viewport« in CSS

302

12.4 Media Queries: gängige Breiten für Breakpoints

303

12.4.1 Praktisch: drei Viewport-Breiten für Smartphone, Tablet und Desktop

303

12.4.2 Ideal: Breakpoints für das Layout setzen, nicht für Geräte

304

12.5 Testen, testen, testen – jenseits kleiner Viewports

305

12.5.1 Ein kleiner Viewport reicht nicht zum Testen von Interaktionen

305

12.5.2 Tools zum Testen: echte Geräte, Emulatoren und Simulatoren

306

12.5.3 Den iOS-Simulator installieren

307

13 Responsive Navigationen

309

13.1 Überblick: Entdecken Sie die Möglichkeiten

309

13.1.1 Do nothing – alles so lassen, wie es ist

309

13.1.2 Navigationspunkte blocken – alles untereinander

310

13.1.3 Footer-Navigation – das Menü im Fußbereich

311

13.1.4 Auswahllisten: die Navigation als <select>

313

13.1.5 Toggle-Menüs – ein Button zaubert das Menü hervor

315

13.1.6 Das Problem von Dropdown-Navigationen auf Touchscreens

316

13.1.7 Nützliche Websites zu responsiven Navigationen

317

13.2 Workshop: Eine CSS-basierte Navigation für kleine Viewports

318

13.2.1 Die responsive Navigation für die Beispielseiten im Überblick

318

13.2.2 Schritt 1: Das HTML für den Menübutton erstellen

320

13.2.3 Schritt 2: »nav-target.css« – ein neues Stylesheet erstellen

321

13.2.4 Schritt 3: Den Menübutton positionieren und gestalten

323

13.2.5 Schritt 4: Den Navigationsbereich gestalten

324

13.2.6 Schritt 5: »Right on :target« – die Navigation in Aktion

326

13.3 Workshop: Die Navigation wird responsiv

328

13.3.1 Schritt 1: Einen Breakpoint für den Wechsel der Navigation bestimmen

329

13.3.2 Schritt 2: Eine horizontale Navigation für breite Viewports

330

14 Responsive Layouts – ein flexibles Grid

334

14.1 Gridlayouts – Gestalten mit Rastern

334

14.1.1 Ein Grid ist ein Raster und schafft Ordnung

335

14.1.2 Grids sind ein Werkzeug für Grafikdesigner

335

14.1.3 Begriffe: der Unterschied zwischen Spaltenlayouts und Gridlayouts

336

14.2 Ein Grid für die Beispielseiten

338

14.2.1 Ein einfaches Grid mit drei Spalten

338

14.2.2 Ein etwas feineres Raster mit sechs Spalten

339

14.3 Das Layout wird responsiv

340

14.3.1 Schritt 1: Breakpunkt festlegen und Webseiten zentrieren

340

14.3.2 Schritt 2: Hintergrund der Webseiten für mittlere Viewports

342

14.3.3 Schritt 3: »Cover me« – flächendeckender Hintergrund

343

14.4 Der Inhaltsbereich wird responsiv

345

14.4.1 Schritt 1: Startseite – das Bild neben den Text stellen

346

14.4.2 Schritt 2: Startseite – drei Absätze nebeneinanderstellen

348

14.4.3 Schritt 3: News-Seite – einen zweispaltigen Inhaltsbereich erstellen

349

14.4.4 Schritt 4: Das Kontaktformular

351

14.5 Exkurs: Volle Breite – ein »Full-Page-Layout«

352

14.5.1 Schritt 1: Kleine Änderungen in HTML

353

14.5.2 Schritt 2: Anpassungen für <html> und <body>

354

14.5.3 Schritt 3: Layoutbereiche anpassen

355

14.5.4 Schritt 4: Abstände in Header und Footer korrigieren

355

14.6 »10, 9, 8, 7 …« – der Countdown im Internet Explorer

356

14.6.1 Webseiten testen in verschiedenen IE-Versionen

356

14.6.2 Die Beispielseiten im Internet Explorer 9 und 10

357

14.6.3 Die Beispielseiten im Internet Explorer 8

358

14.6.4 Möglichkeit 1: Wenig oder gar nichts unternehmen

359

14.6.5 Möglichkeit 2: Spezielles Stylesheet erstellen und per CC ausliefern

361

14.6.6 Möglichkeit 3: Nachhilfe per JavaScript – »respond.js«

362

14.6.7 Möglichkeit 4: Desktop First statt Mobile First

363

15 Inhalte für responsive Webseiten gestalten

364

15.1 Responsive Grafiken in der Praxis

364

15.1.1 Status quo: Grafik je nach Pixeldichte mit »srcset x«

365

15.1.2 Die erweiterte Syntax mit »srcset w« und »sizes« in der Praxis

365

15.1.3 Die Reihenfolge der Media Queries bei »sizes« ist wichtig

366

15.1.4 Die Berechnung der vw-Werte für »sizes« in prozentbasierten Layouts

367

15.1.5 Rechenbeispiele: responsive Grafiken im Browser

367

15.1.6 Perfekt: die Berechnung der Werte für »sizes« bei 960px Layoutbreite

369

15.1.7 »Picturefill« hilft Browsern, responsive Grafiken zu verstehen

372

15.1.8 Fazit zu »Responsive Grafiken in der Praxis«

374

15.2 »FlexSlider 2« – ein responsiver Slider

375

15.2.1 Schritt 1: FlexSlider 2 downloaden und einbinden

376

15.2.2 Schritt 2: Die Slideshow erstellen

377

15.2.3 Der FlexSlider mit responsiven Grafiken per »srcset w« und »sizes«

378

15.3 Flexible Videos von YouTube, Vimeo & Co.

380

15.3.1 Schritt 1: Ein Video von einem Videoportal einbinden

380

15.3.2 Flexible Videos ohne JavaScript: der Trick mit dem »padding«

383

15.3.3 Flexible Videos mit JavaScript: das jQuery-Plugin »FitVids.js«

384

15.4 Lesbarkeit: die Optimierung der Zeilenlänge

386

15.4.1 Mit roten Sternchen die Zeilenlänge testen

386

15.4.2 Zeilenlänge optimieren mit »column-count«

388

15.4.3 Zeilenlänge optimieren durch eine Änderung des Layouts

389

15.5 »Akkordeon« – Text ein- und ausblenden

391

15.5.1 Ein Akkordeon spart Platz auf dem Bildschirm

391

15.5.2 Schritt 1: Das HTML in »news.html« vorbereiten

393

15.5.3 Schritt 2: Die Überschrift gestalten

394

15.5.4 Schritt 3: Das Akkordeon einschalten

395

15.5.5 Schritt 4: Ein Genericon einbinden

397

15.5.6 Schritt 5: Zustandsanzeige – das Genericon beim Ausklappen ändern

398

15.5.7 Schritt 6: Überschrift im großen Viewport gestalten

399

15.6 Exkurs: Responsive Grafiken mit »Adaptive Images«

400

15.6.1 Adaptive Images herunterladen und entpacken

400

15.6.2 Die Installation von Adaptive Images

401

15.6.3 Testen von Adaptive Images

403

Tei IV Grids, Frameworks und Flexbox

405

16 Gridlayouts: von Pixel zu Prozenten

406

16.1 Was Frameworks sind und was sie für Sie tun können

406

16.1.1 Frameworks erleichtern die tägliche Arbeit

406

16.1.2 Die Vor- und Nachteile von Frameworks

407

16.1.3 Gridsysteme: von »960.gs« über »YAML« zu »Foundation«

409

16.2 Ein Grid mit System: 960.gs in Aktion

410

16.2.1 Bei Grid-Frameworks weisen Sie in HTML Gridklassen zu

410

16.2.2 Visualisierung: das 12-Spalten-Grid in der Übersicht

411

16.2.3 Das CSS von 960.gs im Überblick

412

16.2.4 Ein Beispiel: die Startseite mit Gridsystem

414

16.2.5 Die Flexibilität eines Gridsystems: 2 × 2 statt 3 + 1

416

16.3 Die Zauberformel: von festen Pixelbreiten zu Prozent

417

16.3.1 Die Zauberformel zur Umrechnung von Pixel in Prozent

417

16.3.2 Schritt 1: Seitenbegrenzung aufheben und Außenabstände berechnen

419

16.3.3 Schritt 2: Die Gridklassen mit Breiten in Prozent

419

17 »Desktop First«: Gridlayouts mit YAML 4

422

17.1 »YAML 4« im Überblick

422

17.1.1 YAML – Entstehung und Lizenz

422

17.1.2 Die vier wichtigsten Module von YAML

423

17.1.3 Dokumentation, Download und Ordnerstruktur

424

17.2 »Rapid Prototyping«: ein Gridlayout mit YAML 4

426

17.2.1 Schritt 1: »Basic HTML/CSS Template« – die HTML-Grundstruktur

427

17.2.2 Schritt 2: Das zentrale Stylesheet »styles.css«

429

17.2.3 Schritt 3: Das »Layout Module« – die Grundstruktur im <body>

430

17.2.4 Schritt 4: Inhalt für Kopfbereich, Navigation und Footer einfügen

431

17.2.5 Schritt 5: »Grid Module« – ein flexibles Grid im Handumdrehen

433

17.2.6 Schritt 6: »Grid Module« – eine zweite Gridzeile im Inhaltsbereich

436

17.2.7 Schritt 7: »Desktop First« – Elemente linearisieren

437

17.3 YAML ist nicht nur für Prototypen – eigene Layouts erstellen

440

17.4 »Thinkin’ Tags« – Prototypen im Browser entwickeln

441

18 »Mobile First«: Gridlayouts mit Foundation

443

18.1 »Zurb Foundation« im Überblick

443

18.1.1 Foundation 5 – ein responsives Frontend-Framework

443

18.1.2 Foundation im Überblick

444

18.1.3 Der Download von Foundation 5

445

18.1.4 Foundation: Dateien- und Ordnerstruktur

446

18.1.5 Das Gridsystem von Foundation: »small«, »medium« und »large«

447

18.2 »Rapid Prototyping«: ein Gridlayout mit Foundation

448

18.2.1 Schritt 1: Das HTML für die Startseite »index.html« vorbereiten

449

18.2.2 Schritt 2: Die ersten Gridzeilen – Pageheader und Pagefooter

450

18.2.3 Schritt 3: Das Grid für den Inhaltsbereich, Teil 1

452

18.2.4 »Topbar« – ein responsives Navigationsmodul

453

18.3 Foundation ist ideal für Prototypen

456

18.3.1 Vorgefertigte Templates erleichtern den Einstieg

456

18.3.2 Foundation bereits vor dem Download individualisieren

457

19 Ausblick: Flexbox – jenseits von Floatlayouts

459

19.1 Bestandsaufnahme: CSS3 und seine Layoutmodule

459

19.2 Das »CSS Flexible Box Layout Module« (»Flexbox«)

461

19.2.1 Die Entstehung von Flexbox oder »Aller guten Dinge sind drei«

461

19.2.2 Flexbox bietet neue Möglichkeiten ohne die alten Probleme

462

19.3 Der erste Schritt: Flexbox definieren mit »display:flex«

463

19.3.1 Der Ausgangspunkt: ein Abschnitt mit drei Artikeln

463

19.3.2 Eine Flexbox erstellen: »display:flex«

464

19.4 Ausdehnung der Flex-Items bestimmen: »flex:1«

466

19.4.1 Ausdehnung eines Flex-Items bestimmen mit »flex: 1«

466

19.4.2 Flex-Items gleichmäßig ausrichten mit »flex:1«

467

19.4.3 Flex-Items gestalten und Reihenfolge ändern mit »order«

468

19.4.4 »Verhältnismäßig« einfach: Flex-Items mit unterschiedlicher Breite

469

19.4.5 »flex« ist eine Kurzschreibweise

471

19.5 Das Box-Modell der Flexbox

471

19.5.1 Das Flex-Box-Modell hat eine Haupt- und eine Nebenachse

471

19.5.2 »flex-direction« ändert die Flussrichtung: »row« wird zu »column«

472

19.5.3 »flex-wrap« ermöglicht eine mehrzeilige Flexbox

473

19.5.4 »flex-flow« ist die Kurzschreibweise für »flex-direction« und »flex-wrap«

475

19.6 Flexbox in Aktion: »Holy Grail« mit »Sticky Footer«

475

19.6.1 Schritt 1: HTML und Basisformatierung

475

19.6.2 Schritt 2: »body« wird mit »display:flex« zu einer Flexbox

477

19.6.3 Schritt 3: Den Footer am unteren Browserfenster positionieren

478

19.6.4 Schritt 4: Die drei Spalten nebeneinander positionieren

479

19.6.5 Schritt 5: Die Ausdehnung der drei Spalten steuern

480

19.6.6 Schritt 6: Die Reihenfolge der drei Spalten beliebig ändern

481

19.6.7 Das CSS im Überblick und die Grenzen der Flexbox

481

19.7 Ausrichtung steuern und Leerraum verteilen

483

19.7.1 Der Ausgangspunkt: HTML und Basisformatierung für die Liste

483

19.7.2 Flex-Items an der Hauptachse ausrichten mit »justify-content«

485

19.7.3 »align-items« und »align-self« sind für die Nebenachse

487

19.7.4 Elemente horizontal und vertikal zentrieren: »margin:auto«

489

19.7.5 Elemente am Anfang oder Ende eines Containers ausrichten: »margin«

490

19.7.6 Mehrzeilige Flexboxen und »align-content«

491

19.8 Spickzettel: Flexbox – Eigenschaften und Werte in der Übersicht

492

19.8.1 Eigenschaften und Werte für die Flexibilität

493

19.8.2 Eigenschaften und Werte für Ausrichtung und Verteilung

493

Index

495