Inhaltsverzeichnis

  • Vorwort zur zweiten Auflage
    21
  • Einführung
    23
  • 1
    Was sich im Webdesign geändert hat
    24
    • 1.1
      Back to the roots: »A Dao of Web Design«
      24
    • 1.2
      Von HTML-Tabellen zu 960px-Grid-Frameworks
      26
      • 1.2.1
        Von HTML-Tabellen zu CSS-Layouts
        26
      • 1.2.2
        Die Zeit der 960-Pixel-CSS-Grid-Frameworks
        27
    • 1.3
      Die Entstehung des responsiven Webdesigns
      28
      • 1.3.1
        Smartphones und Tablets: das Web jenseits des Desktops
        28
      • 1.3.2
        »Responsive Web Design« unterstützt die flexible Natur des Web
        30
      • 1.3.3
        »Responsive« erobert das Web im Sturm
        32
      • 1.3.4
        »Responsive« und »Adaptive« – zwei Begriffe verwirren die Welt
        33
    • 1.4
      Das Web wird mobil – bei Arbeit, Sport und Spiel
      34
      • 1.4.1
        »Mobile« kann viele verschiedene Dinge bedeuten
        35
      • 1.4.2
        Das Web ist das Web und wird allgegenwärtig
        36
    • 1.5
      Moderne Websites erstellen
      37
      • 1.5.1
        »Desktop First«: so wie immer und noch etwas dazu
        37
      • 1.5.2
        »Mobile First«: klein anfangen und dann hoch hinaus
        38
      • 1.5.3
        »Content First«: Die Besucher kommen für den Inhalt
        39
      • 1.5.4
        Der Fisch im Wasser: »Rapid Prototyping«
        40
    • 1.6
      Fazit: Veränderung ist das einzig Beständige
      42
  • 2
    Das Buch und die Beispielseiten
    43
    • 2.1
      Teil I: HTML5 – ausgezeichneter Inhalt
      43
    • 2.2
      Teil II: CSS3 – Inhalte gestalten
      44
    • 2.3
      Teil III: Getting responsive
      46
    • 2.4
      Teil IV: Grids, Frameworks und Flexbox
      47
  • Teil I
    HTML5 – ausgezeichnete Inhalte
    49
  • 3
    Das HTML5-Universum im Überblick
    50
    • 3.1
      Die Verwirrung rund um HTML5
      50
    • 3.2
      Eine kurze Geschichte von HTML5
      51
      • 3.2.1
        Phase 1: HTML – zwischen W3C und Browserherstellern
        52
      • 3.2.2
        Phase 2: Aus HTML 4.01 wird XHTML 1.0
        53
      • 3.2.3
        Phase 3: XHTML 2.0 und die Revolte der Browserhersteller
        55
      • 3.2.4
        Phase 4: Zurück zu HTML – das W3C ändert den Kurs
        56
      • 3.2.5
        Phase 5: W3C und WHATWG – together apart …
        57
    • 3.3
      Das HTML5- Universum im Überblick
      58
      • 3.3.1
        HTML5 macht das Web fit für Webanwendungen
        59
      • 3.3.2
        Visuelle Übersicht: die Karte vom HTML5-Universum
        59
    • 3.4
      Gute Quellen rund um HTML5
      62
      • 3.4.1
        Anlaufstelle für allgemeine Infos: »html5doctor.com«
        62
      • 3.4.2
        Anlaufstelle für Fragen zur Browserunterstützung: »caniuse.com«
        62
      • 3.4.3
        In German: Peter Kröners Blog auf »peterkroener.de«
        63
  • 4
    Semantische Strukturelemente in HTML5: <header>, <footer> und Co.
    64
    • 4.1
      Der rote Faden: die Vorlage von »HTML5Bones.com«
      64
    • 4.2
      Der Vorspann: <!DOCTYPE>, <html> und <head>
      66
      • 4.2.1
        Ein guter Start: <!DOCTYPE html> und <html>
        67
      • 4.2.2
        Der Zeichensatz: <meta charset="utf-8">
        68
      • 4.2.3
        Alte Bekannte: Seitentitel und Seitenbeschreibung
        68
      • 4.2.4
        Diese Seite bitte nicht verkleinern: das Meta-Element für den Viewport
        69
    • 4.3
      Über die semantischen Strukturelemente in HTML5
      71
      • 4.3.1
        Die neuen semantischen HTML5-Strukturelemente im Überblick
        71
      • 4.3.2
        »Semantisches HTML« gibt den Inhalten eine Bedeutung
        72
      • 4.3.3
        »Layoutbereiche« wurden traditionell mit <div> ausgezeichnet
        73
      • 4.3.4
        In HTML5 gibt es semantische Elemente für Layoutbereiche
        75
      • 4.3.5
        Integrierte Orientierungshilfen: »ARIA Landmark Roles«
        76
      • 4.3.6
        ARIA Landmark Roles in Aktion
        77
      • 4.3.7
        ARIA Landmark Roles in HTML5
        78
    • 4.4
      Die semantischen Strukturelemente in »HTML5 Bones«
      79
      • 4.4.1
        HTML5 Bones – Layoutbereiche im Überblick
        80
      • 4.4.2
        Der Kopfbereich: <header role="banner">
        80
      • 4.4.3
        Die Site-Navigation: <nav role="navigation">
        81
      • 4.4.4
        Der Hauptinhaltsbereich: <main role="main">
        83
      • 4.4.5
        Inhalte in Abschnitte unterteilen: <section>
        84
      • 4.4.6
        In sich geschlossene, eigenständige Inhalte: <article>
        86
      • 4.4.7
        Es gibt meistens nicht nur eine richtige Lösung: <section> vs <article>
        87
      • 4.4.8
        Zusätzlicher Inhalt mit <aside role="complementary">
        88
      • 4.4.9
        Der Fußbereich: <footer role="contentinfo">
        89
      • 4.4.10
        Kurzes Fazit zu <header>, <footer> und Co.
        89
    • 4.5
      Die semantischen Strukturelemente im Alltag
      90
      • 4.5.1
        Ist die Webwelt schon bereit für die neuen HTML5-Elemente?
        90
      • 4.5.2
        Die semantischen Elemente per CSS stylen
        91
      • 4.5.3
        Hilfe für alte Browser per JavaScript: HTML5Shiv
        91
      • 4.5.4
        Übung: Beispielseite von HTML5 Bones gestalten
        93
    • 4.6
      Exkurs: Der Outline-Algorithmus von HTML5
      95
      • 4.6.1
        Die Hierarchie der Überschriften beim W3C
        95
      • 4.6.2
        Die Hierarchie der Überschriften bei HTML5 Bones
        96
      • 4.6.3
        »Sectioning«: Abschnitte mit <nav>, <section>, <article> und <aside>
        97
      • 4.6.4
        Den Outline-Algorithmus testen
        98
      • 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