Responsive Webdesign
Galileo Press (Verlag)
978-3-8362-2582-3 (ISBN)
- Titel erscheint in neuer Auflage
- Artikel merken
Dieses Buch vermittelt ausführliche Kenntnisse wie moderne Webseiten auf allen Geräten funktionieren und anpassungsfähig sind. Es werden Grundlagen, sowie diverse Strategien anhand von zahlreichen Praxisbeispielen beschrieben.— Nina Otto (Buchhändlerin, Lehmanns Media)
- Mit HTML5 und CSS3 flexible Websites erstellen
- Layout, Navigationen, Bilder und Videos, Texte, Schriften
- Inkl. Responsive Webdesign-Frameworks, Barrierefreiheit, Performance u.v.m.
Responsive Webdesign von Anfang an! Eine moderne Website muss auf allen Geräten »funktionieren«, nicht mehr nur auf dem klassischen Desktop-PC, Mac oder Laptop, sondern auf ein einer kaum mehr überschaubaren Menge an Geräten wie iPhone, iPad, Smartphones und Tablets mit Android und Windows Phone, Kindle Fire etc.
Andrea Ertel und Kai Laborenz zeigen in Ihrem neuen Buch praxisnahe Lösungen, wie Sie Ihre Website anpassungsfähig machen können. Lernen Sie, wie Sie von Beginn an in flexiblen Strukturen denken können, die Schlüsseltechnologie Media Queries professionell einsetzen und Usability-Anforderungen umsetzen können. Dabei helfen Ihnen auch Layout-, Navigations- und Content-Strategien, um Ihre Website optimal umzusetzen. Sie erfahren auch, wie Sie mit Inhaltselementen wie Formularen, Tabellen, Video, Slideshows, Werbung oder externen Applikationen flexibel umgehen können. Frameworks wie YAML oder Bootstrap bieten an vielen Stellen eine gute Hilfe.
Profitieren Sie von den vielen Tipps und Tricks, auch zur Performanceoptimierung, aus der Praxis und erfahren Sie zudem, wie Sie Ihre Website testen können. Lassen Sie sich von den spannenden Beispielprojekten inspirieren.
Lernen Sie die Grundlagen des Responsive Webdesign
Erfahren Sie alles über den Umgang mit den verschiedenen Layouttypen, den Einsatz von Media Queries, HTML5 und CSS3 sowie die Entwicklung eines modernen Webdesigns für alle Endgeräte.
Layout-, Navigations- und Contentstrategien
Stellen Sie sicher, dass nicht nur das Layout für alle Ausgabemedien funktioniert, sondern dass auch die Navigations- und Contentstrukturen optimal angepasst sind.
Setzen Sie Inhaltselemente responsiv ein
So können Sie auch mit Elementen wie Formularen, Tabellen, Video, Slideshows, Maps, Werbung und externen Applikationen flexibel umgehen. Frameworks wie YAML oder Bootstrap bieten Ihnen an vielen Stellen eine gute Hilfe.
DVD-ROM zum Buch
Auf der DVD-ROM finden Sie Video-Lektionen, alle Praxisbeispiele und Frameworks.
Themen sind insbesondere:
- Verschiedene Layouttypen
- Adaptive und Responsive Layout
- Media Queries und flexible Inhalte
- Responsive Workflow
- Design und Typografie
- Semantik und Barrierefreiheit
- Desktop First Responsive Layout-Patterns
- Frameworks wie Bootstrap und YAML
- Navigationskonzepte
- Flexible Bildelemente, Bildergalerien, Image Maps, Videos
- Tabellen, Formulare, Werbung
- Akkordeons und Inhaltsboxen
- Testing & Performanceoptimierung
Kai Laborenz arbeitet seit 1994 als Webdesigner. Seidem hat er sein Wissen in zahlreichen Kursen und Workshops vermittelt, unter anderem beim E-Learning-Anbieter Akademie.de, wo er zudem als Webmaster tätig war. Er ist Geschäftsführer der Internetagentur Sunbeam und entwickelte Websites für Kunden wie BP und die deutsche Energieagentur.
Andrea Ertel ist im Web seit 1994 zu Hause. Er hat als Freelancer und mit der Agentur Sunbeam, die er mit zwei Freunden aufgebaut hat, Dutzende Online-Projekte umgesetzt. Für den Online-Schulungsanbieter akademie.de hat er sein Wissen in zahlreichen Workshops und Vorträgen vermittelt und bei Galileo Press die erfolgreichen Fachbücher "CSS - Das umfassende Handbuch" und "TYPO3 4.0" verfasst. Er war in der Fachjury zur "BIENE" der Aktion Mensch und hat selbst einen der Preise für barrierefreie Websites gewonnen.
.. Geleitwort des Fachgutachters ... 15
... Vorwort ... 17
1 ... Denken in flexiblen Strukturen ... 21
1.1 ... Responsive Webdesign: Was bedeutet das eigentlich? ... 21
1.1.1 ... Veränderte Anforderungen an die Darstellung von Websites ... 22
1.1.2 ... Anpassungsfähige Websites versus Mobilversionen von Websites ... 25
1.1.3 ... Beispiele für anpassungsfähige Websites ... 26
1.2 ... Layouttypen: fest, fluide und flexible ... 30
1.2.1 ... Das feste Layout ... 30
1.2.2 ... Fluides und elastisches Layout ... 30
1.2.3 ... Das adaptive Layout ... 31
1.2.4 ... Das responsive Layout ... 31
1.3 ... Vom fixen zum flexiblen Raster (»Grid«) ... 32
1.4 ... Adaptives Layout: festes Layout mit Umbrüchen ... 37
1.4.1 ... Gegenüberstellung: adaptives versus fixes Layout ... 38
1.5 ... Responsive Layout: fluides Layout mit Umbrüchen ... 38
1.5.1 ... Gegenüberstellung: responsives versus adaptives Layout ... 39
1.6 ... Zusammenfassung ... 40
2 ... Umsetzung eines fixen Designs in ein flexibles Layout ... 41
2.1 ... Die Ausgangslage: ein grafischer Entwurf mit festen Abmessungen ... 41
2.2 ... Der erste Schritt: feste Raster in flexible umrechnen ... 47
2.3 ... Der zweite Schritt zu mehr Flexibilität: anpassungsfähige Inhalte ... 49
2.4 ... Der dritte Schritt: Layouts mit Media Queries umschalten ... 52
2.5 ... Zusammenfassung ... 55
3 ... Die Schlüsseltechnologie Media Queries ... 57
3.1 ... Cascading Stylesheets (ein kurzer Rückblick) ... 58
3.1.1 ... Zuweisung von CSS-Eigenschaften ... 58
3.2 ... Medientyp (media type) ... 59
3.2.1 ... Medienabfrage für den Medientyp setzen ... 60
3.2.2 ... Medientypen in der Übersicht ... 60
3.3 ... Medieneigenschaften (media features) ... 61
3.3.1 ... Medieneigenschaften in der Übersicht ... 62
3.4 ... Media Queries schreiben ... 64
3.4.1 ... Komponenten eines Media Querys ... 64
3.5 ... Viewports und Pixel ... 66
3.5.1 ... Der visuelle Viewport ... 66
3.5.2 ... Der Layout-Viewport auf mobilen Geräten ... 66
3.5.3 ... Gerätepixel und CSS-Pixel: der »virtuelle« visuelle Viewport ... 67
3.5.4 ... Das Viewport-Metatag und seine Eigenschaften ... 71
3.5.5 ... Die @viewport-Anweisung in CSS ... 73
3.6 ... Media Queries im Responsive Webdesign ... 75
3.6.1 ... Medieneigenschaft: width ... 75
3.6.2 ... Medieneigenschaft: device-width ... 76
3.6.3 ... Media Queries in em ... 77
3.6.4 ... Medieneigenschaft: height – vertikale Media Queries ... 79
3.6.5 ... Medieneigenschaft: orientation ... 80
3.6.6 ... Medieneigenschaft: aspect-ratio, device- aspect-ratio ... 80
3.6.7 ... Medieneigenschaft: resolution und device-pixel-ratio ... 80
3.7 ... Media Queries im HTML-Header oder im Stylesheet ... 84
3.8 ... Das wichtigste Media Query ist kein Media Query! ... 84
3.9 ... Media Queries und die alten Internet Explorer ... 84
3.9.1 ... Nur Basislayout zuweisen ... 85
3.9.2 ... Mittlere Layoutstufen mit Conditional Comments zuweisen ... 85
3.9.3 ... Media- Query-Unterstützung mit JavaScript nachrüsten ... 85
3.10 ... Zusammenfassung ... 86
4 ... Ein responsiver Workflow ... 87
4.1 ... Der alte Prozess ... 87
4.2 ... Phase 1: Moodboards und Inhaltsplan ... 90
4.2.1 ... Moodboards ... 90
4.2.2 ... Inhalte strukturieren und hierarchisieren ... 91
4.2.3 ... Content-Prototypen ... 93
4.3 ... Phase 2: Style Tiles und Wireframes ... 94
4.3.1 ... Style Tiles ... 94
4.3.2 ... Mockups ... 98
4.4 ... Phase 3: Design im Browser ... 102
4.4.1 ... Online- Editoren ... 103
4.4.2 ... Komponenten, Patterns und Atomic Design ... 104
4.5 ... Phase 4: Rinse and Repeat ... 104
4.5.1 ... Beziehen Sie Ihre Kunden in den Gesamtprozess mit ein ... 105
4.6 ... Das responsive Team ... 106
4.7 ... Dokumentation responsiver Designs ... 107
4.7.1 ... Style- Dokumentation mit Evernote ... 108
4.7.2 ... Dexy ... 109
4.8 ... Zusammenfassung ... 110
5 ... Design und Typografie ... 111
5.1 ... Design follows Content ... 111
5.1.1 ... You cannot not communicate – kein Design ist auch ein Design ... 112
5.2 ... Design von innen nach außen – der Atomic-Design- Ansatz ... 113
5.2.1 ... Atomic Design anwenden mit Pattern Lab ... 115
5.3 ... Designanforderungen für responsive Sites ... 118
5.3.1 ... Does size matter – was machen Nutzer mit ihren Geräten? ... 118
5.3.2 ... Geräteübergreifendes Surfen ... 120
5.3.3 ... Size matters: Ziele für Touch-Events ... 120
5.3.4 ... Es gibt kein Hover auf Hawaii ... ... 122
5.3.5 ... Inaktives :active auf iOS ... 123
5.3.6 ... Handpositionen ... 124
5.3.7 ... Layoutwechsel bei Änderung der Orientierung ... 125
5.3.8 ... Schreiben ist mühsam: Formulare auf Smartphones ... 127
5.3.9 ... Mobile Inspiration und Best Pratice ... 128
5.4 ... Typografie (anpassungsfähiger Text) ... 129
5.4.1 ... Die Auswahl der Schriftart ... 130
5.4.2 ... Angaben für die Schriftgröße ... 133
5.4.3 ... Schriftgrößenwahrnehmung auf kleinen und großen Bildschirmen ... 137
5.4.4 ... Zeilenlänge und Durchschuss ... 140
5.4.5 ... Skalierbare seitenbreite Texte ... 144
5.5 ... Zusammenfassung ... 145
6 ... Semantik und Barrierefreiheit ... 147
6.1 ... Prinzipien der Zugänglichkeit ... 147
6.1.1 ... Wahrnehmbarkeit ... 148
6.1.2 ... Bedienbarkeit ... 152
6.1.3 ... Verständlichkeit ... 153
6.1.4 ... Robustheit ... 154
6.2 ... Semantik durch HTML5 ... 155
6.2.1 ... section ... 156
6.2.2 ... article ... 156
6.2.3 ... nav ... 157
6.2.4 ... aside ... 157
6.2.5 ... header ... 157
6.2.6 ... footer ... 157
6.3 ... HTML5- Formularattribute für mehr Semantik ... 158
6.3.1 ... Neue Eingabeelemente ... 159
6.4 ... Semantik durch WAI-ARIA-Rollen ... 161
6.5 ... Zusammenfassung ... 163
7 ... Desktop First Responsive Layout-Patterns ... 165
7.1 ... Mobile First ... 165
7.1.1 ... Reduktion auf das Wesentliche ist die Devise ... 166
7.1.2 ... Mobile First – Progressive Enhancement für’s Layout ... 167
7.1.3 ... Mobile First bedeutet auch Content First ... 168
7.1.4 ... Fallbacklayout: Was ist die »Notfallansicht«? ... 169
7.2 ... Praxisbeispiel: Mobile First ... 170
7.2.1 ... Mobile First – los geht’s! ... 170
7.2.2 ... Mockups für das Layout ... 171
7.2.3 ... Basisversion: Smartphone-Ansicht ... 172
7.2.4 ... Setzen des Viewport-Metatags ... 179
7.3 ... Auswahl der Breakpoints ... 181
7.3.1 ... Haupt- Breakpoints ... 182
7.3.2 ... Anpassungs-Breakpoints ... 183
7.3.3 ... Vertikale Breakpoints ... 183
7.4 ... Praxisbeispiel: ersten Breakpoint setzen (Tablets) ... 185
7.5 ... Layout- Patterns (Darstellungsmuster) für unterschiedliche Ausgabegeräte ... 190
7.5.1 ... Tiny Tweaks (kleine Optimierungen) ... 190
7.5.2 ... Mostly Fluid (großteils fließend) ... 192
7.5.3 ... Column Drop (abgesenkte Spalten) ... 192
7.5.4 ... Layout Shifter (Layoutverdreher) ... 193
7.5.5 ... Off- Canvas-Layout (außerhalb des Bildschirms) ... 194
7.5.6 ... Footer- Navigation und Off-Canvas-Marginalie ... 194
7.5.7 ... Top- Off-Canvas-Menü und Off-Canvas- Marginalie ... 195
7.5.8 ... Vertikale und horizontale Off-Canvas- Panels ... 196
7.5.9 ... Zusammengefasste Elemente Off-Canvas ... 197
7.5.10 ... Off- Canvas-Lösungen aus der Schublade ... 197
7.6 ... Praxisbeispiel: Weitere Breakpoints setzen (große Screens) ... 198
7.6.1 ... Kleine Desktopversion nach dem Konzept Layout Shifter ... 199
7.6.2 ... Große Desktopversion ... 201
7.7 ... Breakpoint- Tools ... 203
7.7.1 ... Breakpoints testen mit Firefox ... 203
7.7.2 ... Gridpak zum Erstellen von Rastern mit Media Queries ... 204
7.8 ... CSS3- Layouttechniken für responsive Layouts ... 205
7.8.1 ... Flexbox-Layout ... 205
7.8.2 ... Grid- Layout (CSS3) ... 209
7.9 ... Zusammenfassung ... 210
8 ... Frameworks für responsives Design ... 211
8.1 ... Eigene Vorlage oder fertige Frameworks verwenden? ... 212
8.2 ... Wie wählen Sie das richtige Framework aus? ... 214
8.3 ... Ein kurze Vorstellung responsiver Frameworks ... 215
8.3.1 ... YAML ... 217
8.3.2 ... Foundation ... 220
8.3.3 ... GroundworkCSS ... 224
8.3.4 ... PureCSS ... 226
8.4 ... JavaScript- Bibliotheken und andere Helfer ... 228
8.4.1 ... jQuery und Zepto ... 229
8.4.2 ... Modernizr ... 230
8.4.3 ... Elegante Stylesheets mit Präprozessoren: SASS ... 232
8.5 ... Zusammenfassung ... 237
9 ... Navigationskonzepte ... 239
9.1 ... Was macht eine Navigation benutzerfreundlich? ... 239
9.2 ... Benutzerfreundliche Navigation für mobile Geräte ... 240
9.2.1 ... Freier Blick auf die Website ... 241
9.2.2 ... Ausreichend große Klickflächen für Touchbedienung ... 242
9.2.3 ... Umgang mit Menüs mit mehreren Ebenen ... 242
9.3 ... Navigationstypen für mobile Geräte mit Touchscreen ... 242
9.3.1 ... Wenige Menüpunkte am oberen Rand ... 243
9.3.2 ... Lange Menüs am oberen Rand ... 246
9.3.3 ... Select- Menü ... 247
9.3.4 ... Navigation per Anker am Ende des Seiteninhalts ... 252
9.3.5 ... Toggle- Menü ... 256
9.3.6 ... Off- Canvas-Menü ... 263
9.4 ... Multilevel- Menüs ... 268
9.4.1 ... Die native Einbindung von Multilevel-Menüs auf iOS und Android ... 269
9.4.2 ... Andere Lösungen für Multilevel-Menüs ... 271
9.5 ... Zusammenfassung ... 272
10 ... Flexible Bildelemente ... 273
10.1 ... Anpassungsfähige Bilder ... 273
10.1.1 ... Praxisbeispiel: Anpassungsfähiges Headerbild ... 275
10.1.2 ... Bilder ausschnittweise anzeigen ... 277
10.1.3 ... Praxisbeispiel: nur Bildausschnitt für die Basisversion ... 277
10.1.4 ... Flexible Bilder, die nicht über die ganze Rasterbreite gehen ... 278
10.1.5 ... Praxisbeispiel: Flexible Teaser-Boxen mit Bild und Text ... 279
10.2 ... Responsive Hintergrundbilder ... 283
10.2.1 ... Gekachelte Hintergrundmuster ... 283
10.2.2 ... Großflächige Hintergrundbilder ... 288
10.2.3 ... Praxisbeispiel: Vollflächige Hintergrundbilder ... 292
10.2.4 ... Hintergrundgrafiken als Icons ... 294
10.2.5 ... CSS- Sprites für Hintergrundbilder ... 295
10.2.6 ... Praxisbeispiel: Sprites für Social-Icons (hochauflösende) ... 297
10.3 ... Auflösungsunabhängige Grafiken ... 301
10.3.1 ... Scalable Vector Graphics (SVG) ... 302
10.3.2 ... Icon- Fonts ... 306
10.3.3 ... Praxisbeispiel: Icon-Fonts mit Font Awesome ... 308
10.3.4 ... Icon- Fonts mit Ligaturen ... 311
10.4 ... Bilder für unterschiedliche Auflösungen ... 312
10.4.1 ... Wie ordne ich die richtigen Bilder im HTML- Code zu? ... 313
10.4.2 ... Und wer erstellt die ganzen Bilder? ... 320
10.5 ... Zusammenfassung ... 324
11 ... Mehr flexible Inhalte ... 325
11.1 ... Responsive Bildergalerien ... 326
11.1.1 ... Praxisbeispiel: Flexible Slideshow mit ResponsiveSlides ... 326
11.1.2 ... Praxisbeispiel: Responsive Bildergalerien mit Flexslider ... 328
11.1.3 ... Andere Bildergalerietools ... 334
11.2 ... Responsive Image Maps ... 335
11.2.1 ... Praxisbeispiel: jQuery-rwdImageMaps.js ... 336
11.3 ... Anpassungsfähige Videos ... 337
11.3.1 ... Praxisbeispiel: HTML5-Videos ... 339
11.3.2 ... Responsive Embedding von YouTube & Co: Videos im iFrame ... 341
11.3.3 ... Automatische Anpassung für unterschiedliche Video- Seitenverhältnisse durch fitvids.js ... 344
11.4 ... Adobe Flash ... 344
11.5 ... Flexible Karteneinbindungen (Google Maps) ... 345
11.6 ... Flexible Tabellen (MediaTable) ... 347
11.6.1 ... Tabelleninhalte deaktivieren (hide on mobile) ... 348
11.6.2 ... Die Tabelle mit CSS umstrukturieren ... 350
11.6.3 ... Anpassungsfähige Tabellen mit FooTable ... 354
11.7 ... Akkordeons und Inhaltsboxen mit Reitern ... 356
11.8 ... Flexible Formulare ... 361
11.8.1 ... Anwendungsbeispiel: Formular ... 362
11.9 ... Inhalte selektiv anzeigen und laden ... 367
11.9.1 ... Inhalte entfernen oder ergänzen – wann und wie? ... 367
11.9.2 ... Inhalte per CSS ausblenden (display: none) ... 368
11.9.3 ... Inhalte per CSS hinzufügen ... 368
11.9.4 ... Conditional Loading Content via JavaScript (und CSS) ... 371
11.10 ... Flexible Werbung ... 374
11.10.1 ... Bewusstsein schaffen ... 375
11.10.2 ... Alte und neue Bannerkonzepte ... 376
11.10.3 ... Bannererstellung ... 377
11.10.4 ... Bannerauslieferung ... 378
11.10.5 ... Fixe Spalte und nur ein Rectangle-Format ... 380
11.10.6 ... Unterschiedliche Google AdSense Ads im responsiven Design ausliefern ... 380
11.10.7 ... Werbeblöcke zwischen Inhalte schieben mit CSS-Regions (Polyfill) ... 381
11.10.8 ... Inhalte dynamisch verschieben ... 383
11.11 ... Zusammenfassung ... 384
12 ... Qualitätssicherung und Optimierung ... 385
12.1 ... Testing ... 385
12.1.1 ... Validatoren für HTML und CSS ... 385
12.1.2 ... Breakpoints testen ... 386
12.1.3 ... Auf dem Gerät testen ... 392
12.1.4 ... Adobe Edge Inspect, SDKs ... 394
12.2 ... Performance testen und Optimierung ... 396
12.2.1 ... Was beeinträchtigt die Performance? ... 396
12.2.2 ... Skripte und HTML ... 400
12.2.3 ... Caching ... 409
12.2.4 ... Performanceoptimierung für Grafiken und Bilder ... 410
12.2.5 ... Schriften optimieren ... 412
12.2.6 ... Lazy Loading ... 416
12.2.7 ... Aus den Augen, aus dem Sinn? ... 418
12.3 ... Zusammenfassung ... 420
13 ... Fazit ... 421
... Anhang ... 423
... DVD zum Buch ... 423
... Website zum Buch ... 423
... Quellennachweise der verwendeten Bilder ... 423
... Index ... 427
| Erscheint lt. Verlag | 16.12.2013 |
|---|---|
| Reihe/Serie | Galileo Computing |
| Sprache | deutsch |
| Maße | 168 x 240 mm |
| Gewicht | 1010 g |
| Einbandart | gebunden |
| Themenwelt | Informatik ► Web / Internet ► HTML / CSS |
| Informatik ► Web / Internet ► Web Design / Usability | |
| Schlagworte | CSS3 • Design • Frameworks • Gestaltung • HTML5 • Media Queries • Mobile Webdesign • Responsive Design • Responsive Webdesign • Smartphone • Tablet • Typografie • Usability |
| ISBN-10 | 3-8362-2582-4 / 3836225824 |
| ISBN-13 | 978-3-8362-2582-3 / 9783836225823 |
| Zustand | Neuware |
| Haben Sie eine Frage zum Produkt? |
aus dem Bereich
