Responsive Webdesign Konzepte, Techniken, Praxisbeispiele
Gespeichert in:
| Hauptverfasser: | , |
|---|---|
| Format: | Buch |
| Sprache: | German |
| Veröffentlicht: |
Bonn
Rheinwerk Computing
2017
|
| Ausgabe: | 3., aktualisierte und erweiterte Auflage |
| Schriftenreihe: | Rheinwerk Computing
|
| Schlagworte: | |
| Online-Zugang: | Inhaltstext Inhaltsverzeichnis Inhaltsverzeichnis |
| Tags: |
Tag hinzufügen
Keine Tags, Fügen Sie den ersten Tag hinzu!
|
MARC
| LEADER | 00000nam a2200000 c 4500 | ||
|---|---|---|---|
| 001 | BV044297325 | ||
| 003 | DE-604 | ||
| 005 | 20230123 | ||
| 007 | t| | ||
| 008 | 170504s2017 xx a||| |||| 00||| ger d | ||
| 016 | 7 | |a 1124015418 |2 DE-101 | |
| 020 | |a 9783836245784 |c Festeinband : EUR 39.90 (DE), EUR 41.10 (AT), CHF 49.90 (freier Preis) |9 978-3-8362-4578-4 | ||
| 020 | |a 3836245787 |9 3-8362-4578-7 | ||
| 035 | |a (OCoLC)971202040 | ||
| 035 | |a (DE-599)DNB1124015418 | ||
| 040 | |a DE-604 |b ger |e rda | ||
| 041 | 0 | |a ger | |
| 049 | |a DE-91G |a DE-473 |a DE-1049 |a DE-1051 |a DE-523 |a DE-1102 |a DE-19 |a DE-M347 |a DE-859 |a DE-522 |a DE-862 |a DE-29T |a DE-12 |a DE-634 |a DE-83 |a DE-11 |a DE-898 |a DE-573 |a DE-703 |a DE-863 |a DE-20 |a DE-739 |a DE-B768 |a DE-B170 |a DE-355 |a DE-858 |a DE-1046 |a DE-706 | ||
| 084 | |a ST 252 |0 (DE-625)143627: |2 rvk | ||
| 084 | |a DAT 675f |2 stub | ||
| 100 | 1 | |a Ertel, Andrea |d ca. 20. Jh. |e Verfasser |0 (DE-588)1047416069 |4 aut | |
| 245 | 1 | 0 | |a Responsive Webdesign |b Konzepte, Techniken, Praxisbeispiele |c Andrea Ertel, Kai Laborenz |
| 250 | |a 3., aktualisierte und erweiterte Auflage | ||
| 264 | 1 | |a Bonn |b Rheinwerk Computing |c 2017 | |
| 300 | |a 524 Seiten |b Diagramme, Illustrationen | ||
| 336 | |b txt |2 rdacontent | ||
| 337 | |b n |2 rdamedia | ||
| 338 | |b nc |2 rdacarrier | ||
| 490 | 0 | |a Rheinwerk Computing | |
| 500 | |a Auf dem Cover: "Websites für alle Endgeräte entwickeln, Layout, Navigationen, Bilder und Videos, Schriften u.v.m., inkl. Barrierefreiheit und Performanceoptimierung" | ||
| 650 | 0 | 7 | |a Responsive Webdesign |0 (DE-588)1035443651 |2 gnd |9 rswk-swf |
| 653 | |a Barrierefreiheit | ||
| 653 | |a Codesign | ||
| 653 | |a Frameworks | ||
| 653 | |a HTML5 | ||
| 653 | |a Mobile Webdesign | ||
| 653 | |a Responsive Webdesign | ||
| 653 | |a Typografie | ||
| 653 | |a Webdesign | ||
| 653 | |a Webentwicklung | ||
| 689 | 0 | 0 | |a Responsive Webdesign |0 (DE-588)1035443651 |D s |
| 689 | 0 | |5 DE-604 | |
| 700 | 1 | |a Laborenz, Kai |d ca. 20. Jh. |0 (DE-588)1023809540 |4 aut | |
| 710 | 2 | |a Galileo Press |4 pbl | |
| 856 | 4 | 2 | |m X:MVB |q text/html |u http://deposit.dnb.de/cgi-bin/dokserv?id=cbdd843ad61c4b30b9d85e6a1a007831&prov=M&dok_var=1&dok_ext=htm |3 Inhaltstext |
| 856 | 4 | 2 | |m Digitalisierung UB Passau - ADAM Catalogue Enrichment |q application/pdf |u http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=029701294&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA |3 Inhaltsverzeichnis |
| 856 | 4 | 2 | |m Digitalisierung UB Passau - ADAM Catalogue Enrichment |q application/pdf |u http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=029701294&sequence=000003&line_number=0002&func_code=DB_RECORDS&service_type=MEDIA |3 Inhaltsverzeichnis |
| 943 | 1 | |a oai:aleph.bib-bvb.de:BVB01-029701294 | |
Datensatz im Suchindex
| DE-BY-TUM_call_number | 0104 DAT 675f 2014 A 2888(3) 0303 DAT 675f 2014 L 802(3) |
|---|---|
| DE-BY-TUM_katkey | 2261636 |
| DE-BY-TUM_location | 01 03 |
| DE-BY-TUM_media_number | 040008256591 040008256568 040008256579 040008256580 040008256557 040008256546 |
| _version_ | 1820899947443126272 |
| adam_text | Auf einen Blick
Auf einen Blick
1 Denken in flexiblen Strukturen ................................... 21
2 Schnelleinstieg: Responsive Umsetzung eines fixen Layouts ........ 39
3 Die Schlüsseltechnologie Media Queries ........................... 53
4 Ein responsiver Workflow.......................................... 87
5 Design und Typografie ........................................... 111
6 Semantik und Barrierefreiheit ................................. 153
7 Responsive Layout-Patterns....................................... 171
8 Frameworks für responsives Design ............................... 219
9 Navigationskonzepte ............................................. 249
10 Flexible Bildelemente............................................ 287
11 Mehr flexible Inhalte............................................ 379
12 Testing und Qualitätssicherung .................................. 443
13 Performanceoptimierung........................................... 471
14 Fazit............................................................ 509
Inhalt
Inhalt
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, feste, fluide und flexible................................ 29
1.2.1 Das feste Layout................................................ 29
1.2.2 Das fluide und das elastische Layout............................ 29
1.2.3 Das adaptive Layout............................................. 30
1.2.4 Das responsive Layout........................................... 30
1.3 Flexible Raster - Gridsysteme.......................................... 31
1.3.1 Anwendungsbeispiel: Fixes Raster in flexibles umrechnen ........ 32
1.4 Layoutumbrüche- Breakpoints............................................ 36
1.4.1 Adaptives oder responsives Layout............................... 37
1.5 Zusammenfassung........................................................ 38
2 Schnelleinstieg: Responsive Umsetzung
eines fixen Layouts 39
2.1 Die Ausgangslage: Ein grafischer Entwurf mit festen Abmessungen... 39
2.2 Der erste Schritt: Feste Raster in flexible umrechnen ................. 43
2.3 Der zweite Schritt zu mehr Flexibilität: Anpassungsfähige Inhalte. 46
2.3.1 Exkurs: Flexible Bilder......................................... 47
2.4 Der dritte Schritt: Layouts mit Media Queries umschalten............... 49
2.4.1 Exkurs: Media Queries........................................... 49
2.5 Zusammenfassung........................................................ 51
3 Die Schlüsseltechnologie Media Queries 53
3.1 Cascading Stylesheets (ein kurzer Rückblick)........................... 54
3.1.1 Zuweisung von CSS-Eigenschaften................................. 54
5
55
55
56
57
58
60
60
62
63
64
64
65
68
70
72
72
73
74
75
76
76
78
79
80
82
83
83
84
84
85
86
87
87
91
91
Medientyp (Media Type).......................................
3.2.1 Medienabfrage für den Medientyp setzen...............
3.2.2 Medientypen in der Übersicht.........................
Medieneigenschaften (Media Features).........................
33.1 Medieneigenschaften in der Übersicht.................
Media Queries schreiben....................................
3.4.1 Komponenten eines Media Querys ......................
3.4.2 Media Queries zuweisen ..............................
Viewports und Pixel..........................................
3.5.1 Der visuelle Viewport ...............................
3.5.2 Der Layout-Viewport auf mobilen Geräten .............
3.5.3 Gerätepixel und CSS-Pixel: Der »virtuelle« visuelle Viewport
3.5.4 Das Viewport-Metatag und seine Eigenschaften.........
3.5.5 Die @viewport-Anweisung in CSS.......................
Media Queries in der Praxis..................................
3.6.1 Medieneigenschaft »width« ...........................
3.6.2 Media Queries in em..................................
3.6.3 Medieneigenschaft »height« - vertikale Media Queries.
3.6.4 Medieneigenschaft »orientation«......................
3.6.5 Medieneigenschaft »aspect-ratio«.....................
3.6.6 Medieneigenschaften »resolution« und »device-pixel-ratio«
3.6.7 Medieneigenschaften »pointer« und »hover«............
3.6.8 Browserunterstützung und Fallbacklösungen ...........
Media-Query-Unterstützung mit JavaScript ....................
3.7.1 Element Queries und Container Queries ...............
3.7.2 Restive JS (rScript) für Geräteerkennungen ..........
Serverseitige Geräte- und Feature-Erkennung .................
3.8.1 WURFL Co.............................................
3.8.2 RESS-das Beste von Client und Server kombiniert......
3.8.3 Client Hints ........................................
Zusammenfassung..............................................
Ein responsiver Workflow
Der alte Prozess...............
Phase 1: Moodboards und Inhaltsplan
4.2.1 Moodboards..............
Inhalt
4.2.2 Inhalte strukturieren und hierarchlsleren .................. 92
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..................................................... 97
4.4 Phase 3: Design im Browser......................................... 101
4.4.1 Frameworks und Website-Editoren als Design-Tools........... 102
4.4.2 Komponenten, Patterns und Atomic Design.................... 102
4.5 Phase 4: Rinse and Repeat.......................................... 103
4.5.1 Beziehen Sie Ihre Kunden in den Gesamtprozess mit ein...... 103
4.6 Das responsive Team................................................ 105
4.7 Dokumentation responsiver Designs.................................. 106
4.7.1 Dokumentation mit Living Styleguides....................... 107
4.8 Zusammenfassung.................................................... 109
5 Design und Typografie in
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.............. 114
5.2.1 Atomic Design anwenden mit Pattern Lab........................ 115
5.3 Designanforderungen für responsive Sites............................ 121
5.3.1 Does size matter - was machen Nutzer mit ihren Geräten?....... 122
5.3.2 Geräteübergreifendes Surfen .................................. 124
5.3.3 Size matters: Ziele für Touchevents .......................... 125
5.3.4 Es gibt kein Hover auf Hawaii, und ein Klick ist kein Touch .. 126
5.3.5 Inaktives »:active« auf ¡OS................................... 128
5.3.6 Handpositionen................................................ 129
5.3.7 Layoutwechsel bei Änderung der Orientierung................... 130
5.3.8 Schreiben ist mühsam: Formulare auf Smartphones............... 132
5.3.9 Mobile Inspiration und Best Pratice ........................ 133
5.4 Typografie (anpassungsfähiger Text)................................. 134
5.4.1 Die Auswahl der Schriftart ................................... 134
5.4.2 Angaben für die Schriftgröße ................................. 137
5.4.3 Schriftgrößenwahrnehmung auf kleinen und großen
Bildschirmen.................................................. 142
5.4.4 Zeilenlänge und Durchschuss................................... 144
7
Inhalt
5.4.5 Praxisbeispiel: Relative Schriftgrößen bezogen auf die
Viewport-Breite............................................ 146
5.4.6 Praxisbeispiel: Mehrspaltensatz.............................. 148
5.4.7 Silbentrennung und Textbeschnitt............................. 149
5.5 Zusammenfassung...................................................... 151
6 Semantik und Barrierefreiheit 153
6.1 Prinzipien der Zugänglichkeit ....................................... 153
6.1.1 Wahrnehmbarkeit.............................................. 154
6.1.2 Bedienbarkeit.............................................. 159
6.1.3 Verständlichkeit............................................. 159
6.1.4 Robustheit................................................... 161
6.2 Semantik durch HTML5................................................. 161
6.2.1 Neue HTML-Elemente .......................................... 162
6.2.2 HTML5-Formularattribute für mehr Semantik.................... 165
6.3 Semantik durch WAI-ARIA-Rollen .................................... 167
6.4 Zusammenfassung...................................................... 170
7 Responsive Layout-Patterns 171
7.1 Mobile First......................................................... 172
7.1.1 Reduktion auf das Wesentliche ist die Devise ................ 172
7.1.2 Mobile First - Progressive Enhancement für das Layout........ 173
7.1.3 Mobile First bedeutet auch Content First................... 174
7.2 Praxisbeispiel: Mobile First......................................... 174
7.2.1 Mobile First - los geht s!................................... 174
7.2.2 Mockups für das Layout der Beispiel-Website.................. 175
7.2.3 Basisversion: Smartphone-Ansicht............................. 176
7.2.4 Setzen des Viewport-Metatags................................. 184
7.3 Auswahl der Breakpoints ............................................. 185
7.3.1 Haupt-Breakpoints............................................ 186
7.3.2 Anpassungs-Breakpoints....................................... 187
7.3.3 Vertikale Breakpoints ....................................... 188
7.4 Praxisbeispiel: Ersten Breakpoint setzen (Tablets)................... 189
8
Inhalt
7.5 Layout-Patterns (Darstellungsmuster) für
unterschiedliche Ausgabegeräte.......................................... 193
7.5.1 Tiny Tweaks (kleine Optimierungen) ............................. 193
7.5.2 Mostly Fluid (großteils fließend)............................... 194
7.5.3 Column Drop (abgesenkte Spalten)................................ 195
7.5.4 Layout Shifter (Layoutverdreher)................................ 196
7.5.5 Off-Canvas-Layout (außerhalb des Bildschirms)................... 197
7.5.6 Footer-Navigation und Off-Canvas-Marginalie..................... 197
7.5.7 Top-Off-Canvas-Menü und Off-Canvas-Marginalie................... 198
7.5.8 Vertikale und horizontale Off-Canvas-Panels..................... 199
7.5.9 Zusammengefasste Off-Canvas-Elemente ........................... 200
7.5.10 Off-Canvas-Lösungen aus der Schublade........................... 201
7.6 Praxisbeispiel: Weitere Breakpoints setzen (große Screens).............. 202
7.6.1 Kleine Desktopversion nach dem Konzept Layout Shifter........... 202
7.6.2 Große Desktopversion............................................ 204
7.7 Flexbox-Layout...................................................... 206
7.7.1 Umsetzung des Praxisbeispiels als Flexbox-Layout................ 206
7.7.2 Praxisbeispiel: Flexbox-Layout Content Switch .................. 208
7.8 Grid-Layouts (CSS3)................................................... 211
7.8.1 Umsetzung des Praxisbeispiels als CSS-Grid-Layout............... 211
7.9 Zusammenfassung......................................................... 218
8 Frameworks für responsives Design 219
8.1 Eigene Vorlage oder fertige Frameworks verwenden?....................... 220
8.1.1 Gridpak zum Erstellen von Rastern mit Media Queries............. 220
8.1.2 FITML5-Boilerplate und Initializr .............................. 221
8.2 Wie wählen Sie das richtige Framework aus?.............................. 222
8.3 Eine kurze Vorstellung responsiver Frameworks .......................... 223
8.3.1 Foundation...................................................... 224
8.3.2 Bootstrap .................................................... 228
8.3.3 PureCSS......................................................... 232
8.3.4 Simple Grid..................................................... 235
8.4 JavaScript-Bibliotheken ................................................ 237
8.4.1 jQuery.......................................................... 237
8.4.2 Modernizr....................................................... 238
9
Inhalt
8.5 Elegante Stylesheets mit Präprozessoren: SASS Co.... 240
8.6 Zusammenfassung....................................... 247
9 Navigationskonzepte 249
9.1 Was macht eine Navigation benutzerfreundlich?.......................... 249
9.2 Benutzerfreundliche Navigation für mobile Geräte....................... 250
9.2.1 Freier Blick auf die Website .................................. 251
9.2.2 Ausreichend große Klickflächen für die Touchbedienung.......... 251
9.23 Umgang mit Menüs mit mehreren Ebenen........................... 251
9.2.4 Navigationstypen für mobile Geräte mit Touchscreen............. 252
9.3 Wenige Menüpunkte am oberen Rand....................................... 252
93.1 Praxisbeispiel: Mininavigation - wenige Menüpunkte am
oberen Rand.................................................... 255
9.4 Lange Menüs kompakt anordnen........................................... 256
9.4.1 Praxisbeispiel: Priority-Menü.................................. 257
9.5 Select-Menü............................................................ 260
9.5.1 Praxisbeispiel: TinyNav-Select-Menü............................ 261
9.6 Navigation per Anker am Ende des Seiteninhalts......................... 265
9.6.1 Praxisbeispiel: Footer-Navigation mit Anker.................... 266
9.7 Toggle-Menü............................................................ 269
9.7.1 Praxisbeispiel: Toggle-Menü mit dem Plug-in Responsive-Nav... 269
9.8 Off-Can vas-Menü....................................................... 272
9.8.1 Praxisbeispiel: Off-Can vas-Menü mit Pushy..................... 273
9.8.2 Praxisbeispiel: Swipe-Menü mit Slideout.js..................... 275
9.9 Multilevel-Menüs....................................................... 280
9.9.1 Die native Einbindung von Multilevel-Menüs auf
iOS und Android ............................................... 280
9.9.2 Praxisbeispiel: Multilevel-Menü mit DoubleTabToGo.js........... 281
9.93 Praxisbeispiel: Multilevel-Menü mit Flexnav...................... 282
9.9.4 Noch mehr Multilevel-Menüs..................................... 285
9.10 Zusammenfassung........................................................ 285
10
Inhalt
10 Flexible Bildelemente 287
tv*; •: .. •....... ■ ... • • ■ ■’ .. .....’ . . • • ...
10.1 Anpassungsfähige Bilder.................................................... 287
10.1.1 Praxisbeispiel: Anpassungsfähiges Headerbild........................ 289
10.1.2 Bilder ausschnittweise anzeigen .................................... 290
10.13 Praxisbeispiel: Bildausschnitt auf schmalen Screens................. 291
10.1.4 Flexible Bilder, die nicht über die ganze Rasterbreite gehen ....... 293
10.1.5 Praxisbeispiel: Flexible Teaserboxen mit Bild und Text.............. 293
10.2 Responsive Hintergrundbilder............................................... 296
10.2.1 Praxisbeispiel: Gekachelte Bitmap-Hintergrundmuster................. 297
10.2.2 Praxisbeispiel: Hintergrundmuster mit CSS3 erstellen ............... 298
10.2.3 Praxisbeispiel: Hintergrundmuster mit SVG .......................... 300
10.2.4 Großflächige Hintergrundbilder...................................... 302
10.2.5 Praxisbeispiel: Website mit vollflächigen Hintergrundbildern.... 305
10.2.6 Praxisbeispiel: Vollflächige Hintergrundbilder in Teaserboxen... 309
10.3 Responsive Icons........................................................... 312
10.3.1 Vorbereitung für alle Praxisbeispiele zu responsiven Icons:
Erstellung der Icon-Sets............................................ 313
10.3.2 Praxisbeispiel: Icons als einzelne CSS-Hintergrundbilder............ 315
10.3.3 Praxisbeispiel: Icons als CSS-Hintergrundbilder aus einer
Sprite-Datei........................................................ 319
10.3.4 Icon-Fonts.......................................................... 322
10.3.5 Praxisbeispiel: Responsive Icons als Icon-Font...................... 326
10.3.6 Praxisbeispiel: Icon-Font mit Ligaturen............................. 330
10.3.7 SVG-lcons (sind die beste Wahl) .................................... 332
10.3.8 Praxisbeispiel: Responsive Icons aus Inline-SVG-Sprite.............. 332
10.3.9 Praxisbeispiel: Icons aus extern eingebundener SVG-Datei ........... 337
10.3.10 Praxisbeispiel: Icons aus externer SVG-Datei über CSS einfärben. 339
10.4 Auflösungsunabhängige Grafiken (SVG) ...................................... 341
10.4.1 Das Scalable-Vector-Graphics-Format................................. 341
10.4.2 Praxisbeispiel: SVG-Infografik versus GIF-Infografik................ 341
10.4.3 Einbindung von SVG-Grafiken......................................... 342
10.4.4 Praxisbeispiel: Unterschiedliche SVG-Einbindungsarten............... 348
10.4.5 Die responsive SVG-Einbindung ...................................... 352
10.4.6 Praxisbeispiel: SVG-Filter ......................................... 353
10.5 Die Syntax für responsive Bilder........................................... 355
10.5.1 Syntax für responsive Hintergrundbilder............................. 356
10.5.2 Praxisbeispiel: Responsive Bilder mit »srcset« und »sizes« ......... 357
10.5.3 Praxisbeispiel: Responsive Art-Direction — das picture -Element.... 361
11
Inhalt
10.5.4 Browserunterstützung und Fallbacks für responsive Bilder ... 364
10.5.5 Fazit zur responsiven Syntax.................................. 365
10.5.6 Mit Client Hints zu echten responsiven Bildern ............. 365
10.6 Unterschiedliche Versionen für responsive Bilder erzeugen............. 367
10.6.1 Die Nulllösung: Hochauflösende und komprimierte Bilder...... 368
10.6.2 Automatisch Bilder und Code generieren mit dem Responsive
Image Breakpoints Generator................................... 369
10.6.3 Bilder mit Automatisierungstools generieren (Grunt, Gulp) .. 372
10.6.4 Bildvarianten auf dem Server generieren....................... 372
10.6.5 Bilder von der Cloud ausliefern lassen...................... 373
10.7 Zusammenfassung....................................................... 377
11 Mehr flexible Inhalte 379
11.1 Responsive Slider nicht nur für Bilder..................................... 380
11.1.1 Praxisbeispiel: Bilder-Slider mit dem Slick-Plug-in................ 380
11.1.2 Praxisbeispiel: Bilderkarussell mit dem Slick-Plug-in ............. 382
11.1.3 Praxisbeispiel: Textblock-Slider mit dem Slick-Plug-in ............ 386
11.1.4 Weitere Bildergalerie-Tools........................................ 388
11.2 Responsive Lightboxen...................................................... 389
11.2.1 Praxisbeispiel: Responsive Lightbox mit Fancybox................... 390
11.3 Responsive Image Maps...................................................... 392
11.3.1 Praxisbeispiel: Flexible Image Map mit jQuery-rwdlmageMaps.js... 392
11.4 Anpassungsfähige Videos.................................................... 394
11.4.1 HTML5-Video Unterstützung und Formate.............................. 394
11.4.2 Praxisbeispiel: HTML5-Videos ...................................... 395
11.4.3 Praxisbeispiel: YouTube Co. - Videos im ¡frame................... 397
11.4.4 Praxisbeispiel: Videoseitenverhältnisse mit FitVids.js und
FluidVids.js ...................................................... 400
11.4.5 Praxisbeispiel: HTML5-Videoplayer mit video.js .................... 40i
11.5 Flexible Karteneinbindungen (Maps) ........................................ 403
11.5.1 Praxisbeispiel: Google Map im iframe............................... 403
11.5.2 Praxisbeispiel: Flexible Google-Map-Einbindung mit Google API... 404
11.6 Flexible Tabellen.......................................................... 406
11.6.1 Praxisbeispiel: Datentabellen durch Scrollen zugänglich machen.. 407
11.6.2 Praxisbeispiele: Tabellen mit CSS(-generiertem Content)
umstrukturieren.................................................... 4Qg
12
Inhalt
11.6.3 Praxisbeispiel: Anpassungsfähige Tabellen mit
JavaScript-Plug-ins ......................................... 410
11.7 Akkordeons und Inhaltsboxen mit Reitern............................ 414
11.7.1 Praxisbeispiel: Tab-Reiter zu Akkordeon mit smartTabs.js.... 415
11.8 Flexible Formulare................................................... 418
11.8.1 Praxisbeispiel: Responsives Formular......................... 418
11.9 Inhalte selektiv anzeigen und laden ................................. 423
11.9.1 Inhalte entfernen oder ergänzen - wann und wie?............. 424
11.9.2 Inhalte per CSS ausblenden (display: none).................. 424
11.9.3 Praxisbeispiel: Inhalte per CSS-generiertem Content hinzufügen 425
11.9.4 Praxisbeispiel: Inhaltsblöcke mit AppendAround neu anordnen . 427
11.10 Flexible Werbung................................................... 430
11.10.1 Bewusstsein schaffen für die veränderten Rahmenbedingungen.. 430
11.10.2 Alte und neue Bannerkonzepte................................. 431
11.10.3 Bannererstellung und-auslieferung............................ 433
11.10.4 Fixe Spalte und nur ein Rectangle-Format.................... 434
11.10.5 Gezieltes Laden von Bannergrößenformaten mit Lazy-Ads........ 435
11.10.6 ZURB-Playground: Responsive Ads ............................. 437
11.10.7 Google Responsive Ads ....................................... 437
11.11 Responsive HTML-E-Mails............................................. 438
11.11.1 HTML-E-Mail-Templates responsiveinsetzen..................... 439
11.12 Zusammenfassung..................................................... 442
12 Testing und Qualitätssicherung 443
12.1 Validatoren für HTML und CSS............................................ 443
12.2 Breakpoints im Browser testen .......................................... 444
12.2.1 Firefox......................................................... 445
12.2.2 Chrome.......................................................... 445
12.2.3 Safari ......................................................... 446
12.2.4 Breakpoint-Tester............................................... 446
12.2.5 Pattern Lab als Testplattform .................................. 448
12.2.6 Der Mobile Emulator für Opera................................... 448
12.2.7 Testen und Präsentieren......................................... 448
12.3 Auf mobilen Geräten testen............................................. 450
12.3.1 Open Device Labs weltweit ...................................... 450
12.3.2 Das Home-Device-Lab ............................................ 451
13
12.3.3 Testen in der Cloud.................................... 455
12.3.4 Real-Life-Testen mit »unkooperativen« Inhalten ........ 459
12.4 Qualitätssicherung und Wartung................................. 461
12.4.1 Dokumentationen erstellen und pflegen ................. 461
12.4.2 Modularisierung und Benennungsschemata ................ 462
12.4.3 Stylesheets knapp schreiben und schlank halten......... 464
12.4.4 Unbenutzte CSS-Deklaration und Klassen finden ......... 467
12.4.5 Tools für die Automatisierung von Prozessen............. 468
12.5 Zusammenfassung............................................. 469
13 Performanceoptimierung 471
13.1 Das Performancebudget.................................................. 472
13.2 Was beeinträchtigt die Performance?.................................... 473
13.2.1 Anatomie einer Website......................................... 474
13.3 Skripte, Stylesheets und HTML.......................................... 476
13.3.1 Aus den Augen, aus dem Sinn? .................................. 477
13.3.2 Skripte zusammenfassen......................................... 479
13.3.3 Drittanbieterskripte und Social-Media-Buttons.................. 481
13.3.4 CSS-Sprites und Data-URIs sparen Requests...................... 485
13.3.5 Stylesheets und in ihnen verlinkte Ressourcen werden
unterschiedlich geladen ....................................... 486
13.3.6 Minifying und Dateikompression................................. 487
13.3.7 Die Zukunft: HTTP/2 versus HTTP/1.1............................ 488
13.4 Caching................................................................ 489
13.5 Performanceoptfmierungfür Grafiken und Bilder ..................... 490
13.5.1 Optimierung von Bitmap-Bildern................................. 490
13.5.2 SVG-Optimierung ............................................. 491
13.6 Web-Schriften optimieren............................................. 492
13.6.1 Buchstabenauswahl verkleinern ................................. 492
13.6.2 Fonts direkt einbetten......................................... 494
13.7 Gefühlte Performance und Nachladen von Inhalten..................... 495
13.7.1 Stylesheets an den Anfang, JavaScript-Dateien an
das Ende der Webseite........................................ 495
13.7.2 Missionskritisches CSS (alias »above the fold«) ............... 496
13.7.3 Praxisbeispiel: Lazy Loading von Bildern mit Lazy Sizes ....... 498
Inhalt
13.7.4 Praxisbeispiel: Lazy Sizes zum Nachladen von
Inhalten in Tab-Content........................................ 499
13.7.5 Praxisbeispiel: Conditional Loading Content via JavaScript (und CSS) 500
13.7.6 Farbflächen-»Vorschau« für Bilder ............................. 505
13.8 Zusammenfassung........................................................ 507
14 Fazit 509
Anhang....................................................................... 511
Index........................................................................ 513
15
Auf einen Bück
Auf einen Blick
1 Denken in flexiblen Strukturen ................................... 21
2 Schnelleinstieg: Responsive Umsetzung eines fixen Layouts ........ 39
3 Die Schlüsseltechnologie Media Queries ........................... 53
4 Ein responsiver Workflow.......................................... 87
5 Design und Typografie ........................................... 111
6 Semantik und Barrierefreiheit ................................. 153
7 Responsive Layout-Patterns....................................... 171
8 Frameworks für responsives Design ............................... 219
9 Navigationskonzepte ............................................. 249
10 Flexible Bildelemente............................................ 287
11 Mehr flexible Inhalte............................................ 379
12 Testing und Qualitätssicherung .................................. 443
13 Performanceoptimierung........................................... 471
14 Fazit............................................................ 509
Inhalt
Inhalt
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, feste, fluide und flexible................................ 29
1.2.1 Das feste Layout................................................ 29
1.2.2 Das fluide und das elastische Layout............................ 29
1.2.3 Das adaptive Layout........................................... 30
1.2.4 Das responsive Layout........................................... 30
1.3 Flexible Raster-Gridsysteme............................................ 31
1.3.1 Anwendungsbeispiel: Fixes Raster in flexibles umrechnen ........ 32
1.4 Layoutumbrüche-Breakpoints............................................. 36
1.4.1 Adaptives oder responsives Layout............................... 37
1.5 Zusammenfassung........................................................ 38
2 Schnelleinstieg: Responsive Umsetzung
eines fixen Layouts 39
2.1 Die Ausgangslage: Ein grafischer Entwurf mit festen Abmessungen. 39
2.2 Der erste Schritt: Feste Raster in flexible umrechnen ................. 43
2.3 Der zweite Schritt zu mehr Flexibilität: Anpassungsfähige Inhalte ..... 46
2.3.1 Exkurs: Flexible Bilder......................................... 47
2.4 Der dritte Schritt: Layouts mit Media Queries umschalten .............. 49
2.4.1 Exkurs: Media Queries........................................... 49
2.5 Zusammenfassung........................................................ 51
3 Die Schlüsseltechnologie Media Queries 53
3.1 Cascading Stylesheets (ein kurzer Rückblick)........................... 54
3.1.1 Zuweisung von CSS-Eigenschaften................................. 54
5
■
55
55
56
57
58
60
60
62
63
64
64
65
68
70
72
72
73
74
75
76
76
78
79
80
82
83
83
84
84
85
86
87
87
91
91
Medientyp (Media Type).......................................
3.2.1 Medienabfrage für den Medientyp setzen...............
3.2.2 Medientypen in der Übersicht.........................
Medieneigenschaften (Media Features).........................
3.3.1 Medieneigenschaften in der Übersicht.................
Media Queries schreiben .....................................
3.4.1 Komponenten eines Media Querys ......................
3.4.2 Media Queries zuweisen ..............................
Viewports und Pixel..........................................
3.5.1 Der visuelle Viewport ...............................
3.5.2 Der Layout-Viewport auf mobilen Geräten .............
3.5.3 Gerätepixel und CSS-Pixel: Der »virtuelle« visuelle Viewport
3.5.4 Das Viewport-Metatag und seine Eigenschaften ........
3.5.5 Die @viewport-Anweisung in CSS.......................
Media Queries in der Praxis..................................
3.6.1 Medieneigenschaft »width« ...........................
3.6.2 Media Queries in em..................................
3.6.3 Medieneigenschaft »height« - vertikale Media Queries.
3.6.4 Medieneigenschaft »orientation«......................
3.6.5 Medieneigenschaft »aspect-ratio« ....................
3.6.6 Medieneigenschaften »resolution« und »device-pixel-ratio«
3.6.7 Medieneigenschaften »pointer« und »hover«............
3.6.8 Browserunterstützung und Fallbacklösungen ...........
Media-Query-Unterstützung mit JavaScript ....................
3.7.1 Element Queries und Container Queries ...............
3.7.2 Restive JS (rScript) für Geräteerkennungen ..........
Serverseitige Geräte- und Feature-Erkennung .................
3.8.1 WURFL Co.............................................
3.8.2 RESS - das Beste von Client und Server kombiniert....
3.8.3 Client Hints ........................................
Zusammenfassung..............................................
Ein responsiver Workflow
Der alte Prozess...............
Phase 1: Moodboards und Inhaltsplan
4.2.1 Moodboards..............
Inhalt
4.2.2 Inhalte strukturieren und hierarchisieren .................. 92
4.2.3 Content-Prototypen ......................................... 93
4.3 Phase 2: Style Tiles und Wireframes ............................... 94
4.3.1 Style Tiles................................................. 94
4.3.2 AAockups.................................................... 97
4.4 Phase 3: Design im Browser........................................ 101
4.4.1 Frameworks und Website-Editoren als Design-Tools........... 102
4.4.2 Komponenten, Patterns und Atomic Design.................... 102
4.5 Phase 4: Rinse and Repeat ........................................ 103
4.5.1 Beziehen Sie Ihre Kunden in den Gesamtprozess mit ein...... 103
4.6 Das responsive Team............................................... 105
4.7 Dokumentation responsiver Designs................................. 106
4.7.1 Dokumentation mit Living Styleguides....................... 107
4.8 Zusammenfassung................................................... 109
5 Design und Typografie in
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................ 114
5.2.1 Atomic Design anwenden mit Pattern Lab........................ 115
5.3 Designanforderungen für responsive Sites.............................. 121
5.3.1 Does size matter-was machen Nutzer mit ihren Geräten?... 122
5.3.2 Geräteübergreifendes Surfen .................................. 124
5.3.3 Size matters: Ziele für Touchevents .......................... 125
5.3.4 Es gibt kein Hover auf Hawaii, und ein Klick ist kein Touch .. 126
5.3.5 Inaktives »:active« auf ¡OS................................... 128
5.3.6 Handpositionen................................................ 129
5.3.7 Layoutwechsel bei Änderung der Orientierung................... 130
5.3.8 Schreiben ist mühsam: Formulare auf Smartphones............... 132
5.3.9 Mobile Inspiration und Best Pratice .......................... 133
5.4 Typografie (anpassungsfähiger Text)................................... 134
5.4.1 Die Auswahl der Schriftart ................................... 134
5.4.2 Angaben für die Schriftgröße ................................. 137
5.4.3 Schriftgrößenwahrnehmung auf kleinen und großen
Bildschirmen.................................................. 142
5.4.4 Zeilenlänge und Durchschuss................................... 144
7
Inhalt
5.4.5 Praxisbeispiel: Relative Schriftgrößen bezogen auf die
Viewport-Breite ........................................... 146
5.4.6 Praxisbeispiel: Mehrspaltensatz.............................. 148
5.4.7 Silbentrennung und Textbeschnitt............................. 149
5.5 Zusammenfassung...................................................... 151
6 Semantik und Barrierefreiheit 153
6.1 Prinzipien der Zugänglichkeit ....................................... 153
6.1.1 Wahrnehmbarkeit.............................................. 154
6.1.2 Bedienbarkeit............................................ 159
6.1.3 Verständlichkeit ............................................ 159
6.1.4 Robustheit .................................................. 161
6.2 Semantik durch HTML5 ................................................ 161
6.2.1 Neue HTML-Elemente .......................................... 162
6.2.2 HTML5~Formularattribute für mehr Semantik.................... 165
6.3 Semantik durch WAI-ARIA-Rollen ...................................... 167
6.4 Zusammenfassung.................................................... 170
7 Responsive Layout-Patterns 171
7.1 Mobile First....................................................... 172
7.1.1 Reduktion auf das Wesentliche ist die Devise ................ 172
7.1.2 Mobile First - Progressive Enhancement für das Layout........ 173
7.1.3 Mobile First bedeutet auch Content First..................... 174
7.2 Praxisbeispiel: Mobile First......................................... 174
7.2.1 Mobile First - los geht s!................................... 174
7.2.2 Mockups für das Layout der Beispiel-Website ................. 175
7.2.3 Basisversion: Smartphone-Ansicht............................. 176
7.2.4 Setzen des Viewport-Metatags................................. 184
7.3 Auswahl der Breakpoints ............................................. 185
7.3.1 Haupt-Breakpoints ........................................... 186
7.3.2 Anpassungs-Breakpoints....................................... 187
7.3.3 Vertikale Breakpoints ....................................... 188
7.4 Praxisbeispiel: Ersten Breakpoint setzen (Tablets)................... 189
8
Inhalt
7.5 Layout-Patterns (Darstellungsmuster) für
unterschiedliche Ausgabegeräte ........................................ 193
7.5.1 Tiny Tweaks (kleine Optimierungen) ............................ 193
7.5.2 Mostly Fluid (großteils fließend).............................. 194
7.5.3 Column Drop (abgesenkte Spalten)............................... 195
7.5.4 Layout Shifter (Layoutverdreher)............................... 196
7.5.5 Off-Canvas-Layout (außerhalb des Bildschirms).................. 197
7.5.6 Footer-Navigation und Off-Canvas-Marginalie.................... 197
7.5.7 Top-Off-Canvas-Menü und Off-Canvas-Marginalie.................. 198
7.5.8 Vertikale und horizontale Off-Canvas-Pane!s.................... 199
7.5.9 Zusammengefasste Off-Canvas-Elemente .......................... 200
7.5.10 Off-Canvas-Lösungen aus der Schublade.......................... 201
7.6 Praxisbeispiel: Weitere Breakpoints setzen (große Screens)............. 202
7.6.1 Kleine Desktopversion nach dem Konzept Layout Shifter.......... 202
7.6.2 Große Desktopversion........................................... 204
7.7 Flexbox-Layout..................................................... 206
7.7.1 Umsetzung des Praxisbeispiels als Flexbox-Layout............... 206
7.7.2 Praxisbeispiel: Flexbox-Layout Content Switch ................. 208
7.8 Grid-Layouts (CSS3).................................................... 211
7.8.1 Umsetzung des Praxisbeispiels als CSS-Grid-Layout ............. 211
7.9 Zusammenfassung........................................................ 218
8 Frameworks für responsives Design 219
8.1 Eigene Vorlage oder fertige Frameworks verwenden?...................... 220
8.1.1 Gridpak zum Erstellen von Rastern mit Media Queries............ 220
8.1.2 HTML5-Boilerplate und Initializr .............................. 221
8.2 Wie wählen Sie das richtige Framework aus?............................. 222
8.3 Eine kurze Vorstellung responsiver Frameworks ......................... 223
8.3.1 Foundation .................................................... 224
8.3.2 Bootstrap ..................................................... 228
8.3.3 PureCSS........................................................ 232
8.3.4 Simple Grid.................................................... 235
8.4 JavaScript-Bibliotheken ............................................... 237
8.4.1 jQuery......................................................... 237
8.4.2 Modernizr...................................................... 238
9
Inhalt
8.5 Elegante Stylesheets mit Präprozessoren: SASS Co.................. 240
8.6 Zusammenfassung..................................................... 247
9 Navigationskonzepte 249
9.1 Was macht eine Navigation benutzerfreundlich?....................... 249
9.2 Benutzerfreundliche Navigation für mobile Geräte.................... 250
9.2.1 Freier Blick auf die Website ............................... 251
9.2.2 Ausreichend große Klickflächen für die Touchbedienung....... 251
9.2.3 Umgang mit Menüs mit mehreren Ebenen........................ 251
9.2.4 Navigationstypen für mobile Geräte mit Touchscreen.......... 252
9.3 Wenige Menüpunkte am oberen Rand.................................... 252
9.3.1 Praxisbeispiel: Mininavigation - wenige Menüpunkte am
oberen Rand................................................. 253
9.4 Lange Menüs kompakt anordnen........................................ 256
9.4.1 Praxisbeispiel: Priority-Menü............................... 257
9.5 Select-Menü......................................................... 260
9.5.1 Praxisbeispiel: TinyNav-Select-Menü......................... 261
9.6 Navigation per Anker am Ende des Seiteninhalts...................... 265
9.6.1 Praxisbeispiel: Footer-Navigation mit Anker................. 266
9.7 Toggle-Menü......................................................... 269
9.7.1 Praxisbeispiel: Toggle-Menü mit dem Plug-in Responsive-Nav. 269
9.8 Off-Canvas-Menü..................................................... 272
9.8.1 Praxisbeispiel: Off-Canvas-Menü mit Pushy................... 273
9.8.2 Praxisbeispiel: Swipe-Menü mit Slideout.js.................. 275
9.9 Multilevel-Menüs.................................................... 280
9.9.1 Die native Einbindung von Multilevel-Menüs auf
iOS und Android ............................................ 280
9.9.2 Praxisbeispiel: Multilevel-Menü mit DoubleTabToGo.js........ 281
9.9.3 Praxisbeispiel: Muitiievel-Menü mit Flexnav................. 282
9.9.4 Noch mehr Multilevel-Menüs.................................. 285
9.10 Zusammenfassung..................................................... 285
10
Inhalt
10 Flexible Bildelemente 287
..............
10.1 Anpassungsfähige Bilder....................................................... 287
10.1.1 Praxisbeispiel: Anpassungsfähiges Headerbild......................... 289
10.1.2 Bilder ausschnittweise anzeigen ..................................... 290
10.1.3 Praxisbeispiel: Bildausschnitt auf schmalen Screens.................. 291
10.1.4 Flexible Bilder, die nicht über die ganze Rasterbreite gehen ........ 293
10.1.5 Praxisbeispiei: Flexible Teaserboxen mit Bild und Text............... 293
10.2 Responsive Hintergrundbilder.................................................. 296
10.2.1 Praxisbeispiel: Gekachelte Bitmap-Hintergrundmuster.................. 297
10.2.2 Praxisbeispiel: Hintergrundmuster mit CSS3 erstellen ................ 298
10.2.3 Praxisbeispiel: Hintergrundmuster mit SVG ........................... 300
10.2.4 Großflächige Hintergrundbilder....................................... 302
10.2.5 Praxisbeispiel: Website mit vollflächigen Hintergrundbildern.... 305
10.2.6 Praxisbeispiel: Vollflächige Hintergrundbilder in Teaserboxen... 309
10.3 Responsive Icons.............................................................. 312
10.3.1 Vorbereitung für alle Praxisbeispiele zu responsiven Icons:
Erstellung der Icon-Sets ............................................ 313
10.3.2 Praxisbeispiel: Icons als einzelne CSS-Hintergrundbilder............. 315
10.3.3 Praxisbeispiel: Icons als CSS-Hintergrundbilder aus einer
Sprite-Datei......................................................... 319
10.3.4 Icon-Fonts........................................................... 322
10.3.5 Praxisbeispiel: Responsive Icons als Icon-Font....................... 326
10.3.6 Praxisbeispiel: Icon-Font mit Ligaturen.............................. 330
10.3.7 SVG-Icons (sind die beste Wahl) ..................................... 332
10.3.8 Praxisbeispiel: Responsive Icons aus Inline-SVG-Sprite............... 332
10.3.9 Praxisbeispiel: Icons aus extern eingebundener SVG-Datei ............ 337
10.3.10 Praxisbeispiel: Icons aus externer SVG-Datei über CSS einfärben. 339
10.4 Auflösungsunabhängige Grafiken (SVG) ......................................... 341
10.4.1 Das Scalable-Vector-Graphics-Format.................................. 341
10.4.2 Praxisbeispiel: SVG-Infografik versus GIF-Infografik................. 341
10.4.3 Einbindung von SVG-Grafiken.......................................... 342
10.4.4 Praxisbeispiel: Unterschiedliche SVG-Einbindungsarten................ 348
10.4.5 Die responsive SVG-Einbindung ....................................... 352
10.4.6 Praxisbeispiel: SVG-Filter .......................................... 353
10.5 Die Syntax für responsive Bilder.............................................. 355
10.5.1 Syntax für responsive Hintergrundbilder.............................. 356
10.5.2 Praxisbeispiel: Responsive Bilder mit »srcset« und »sizes« .......... 357
10.5.3 Praxisbeispiel: Responsive Art-Direction - das picture -Element .... 361
11
Inhalt
10.5.4 Browserunterstützung und Fallbacks für responsive Bilder ... 364
10.5.5 Fazit zur responsiven Syntax.................................. 365
10.5.6 Mit Client Hints zu echten responsiven Bildern ............. 365
10.6 Unterschiedliche Versionen für responsive Bilder erzeugen............. 367
10.6.1 Die Nulllösung: Hochauflösende und komprimierte Bilder...... 368
10.6.2 Automatisch Bilder und Code generieren mit dem Responsive
Image Breakpoints Generator................................... 369
10.6.3 Bilder mit Automatisierungstools generieren (Grunt, Gulp) .. 372
10.6.4 Bildvarianten auf dem Server generieren....................... 372
10.6.5 Bilder von der Cloud ausliefern lassen...................... 373
10.7 Zusammenfassung....................................................... 377
11 Mehr flexible Inhalte 379
11.1 Responsive Slider nicht nur für Bilder..................................... 380
11.1.1 Praxisbeispiel: Bilder-Slider mit dem Slick-Plug-in................ 380
11.1.2 Praxisbeispiel: Bilderkarussell mit dem Slick-Plug-in ............. 382
11.1.3 Praxisbeispiel: Textblock-Slider mit dem Slick-Plug-in ............ 386
11.1.4 Weitere Bildergalerie-Tools........................................ 388
11.2 Responsive Lightboxen...................................................... 389
11.2.1 Praxisbeispiel: Responsive Lightbox mit Fancybox................... 390
11.3 Responsive Image Maps...................................................... 392
11.3.1 Praxisbeispiel: Flexible Image Map mit jQuery-rwdlmageMaps.js... 392
11.4 Anpassungsfähige Videos.................................................... 394
11.4.1 HTML5-Video Unterstützung und Formate.............................. 394
11.4.2 Praxisbeispiel: HTML5-Videos ...................................... 395
11.4.3 Praxisbeispiel: YouTube Co. - Videos im ¡frame................... 397
11.4.4 Praxisbeispiel: Videoseitenverhältnisse mit FitVids.js und
FluidVids.js ...................................................... 400
11.4.5 Praxisbeispiel: HTML5-Videoplayer mit video.js .................... 401
11.5 Flexible Karteneinbindungen (Maps) ........................................ 403
11.5.1 Praxisbeispiel: Google Map im iframe............................... 403
11.5.2 Praxisbeispiel: Flexible Google-Map-Einbindung mit Google API... 404
11.6 Flexible Tabellen.......................................................... 406
11.6.1 Praxisbeispiel: Datentabellen durch Scrollen zugänglich machen.. 407
11.6.2 Praxisbeispiele: Tabellen mit CSS(-generiertem Content)
umstrukturieren ................................................... 408
12
Inhalt
11.6.3 Praxisbeispiel: Anpassungsfähige Tabellen mit
JavaScript-Plug-ins ............................................ 410
11.7 Akkordeons und Inhaltsboxen mit Reitern ................................ 414
11.7.1 Praxisbeispiel: Tab-Reiter zu Akkordeon mit smartTabs.js........ 415
11.8 Flexible Formulare...................................................... 418
11.8.1 Praxisbeispiel: Responsives Formular............................ 418
11.9 Inhalte selektiv anzeigen und laden .................................. 423
11.9.1 Inhalte entfernen oder ergänzen - wann und wie?................. 424
11.9.2 Inhalte per CSS ausblenden (display: none)...................... 424
11.9.3 Praxisbeispiel: Inhalte per CSS-generiertem Content hinzufügen . 425
11.9.4 Praxisbeispiel: Inhaltsblöcke mit AppendAround neu anordnen .... 427
11.10 Flexible Werbung....................................................... 430
11.10.1 Bewusstsein schaffen für die veränderten Rahmenbedingungen.. 430
11.10.2 Alte und neue Bannerkonzepte................................... 431
11.10.3 Bannererstellung und-auslieferung ............................. 433
11.10.4 Fixe Spalte und nur ein Rectangle-Format....................... 434
11.10.5 Gezieltes Laden von Bannergrößenformaten mit Lazy-Ads.......... 435
11.10.6 ZURB-Playground: Responsive Ads ............................... 437
11.10.7 Google Responsive Ads ......................................... 437
11.11 Responsive HTML-E-Mails ............................................... 438
11.11.1 HTML-E-Mail-Templates responsiv einsetzen...................... 439
11.12 Zusammenfassung........................................................ 442
12 Testing und Qualitätssicherung 443
12.1 Validatoren für HTML und CSS............................................ 443
12.2 Breakpoints im Browser testen .......................................... 444
12.2.1 Firefox ..................................................... 445
12.2.2 Chrome......................................................... 445
12.2.3 Safari ........................................................ 446
12.2.4 Breakpoint-Tester.............................................. 446
12.2.5 Pattern Lab als Testplattform ................................. 448
12.2.6 Der Mobile Emulator für Opera.................................. 448
12.2.7 Testen und Präsentieren........................................ 448
12.3 Auf mobilen Geräten testen.............................................. 450
12.3.1 Open Device Labs weltweit ...................................... 450
12.3.2 Das Home-Device-Lab ............................................ 451
13
455
459
461
461
462
464
467
468
469
471
472
473
474
476
477
479
481
485
486
487
488
489
490
490
491
492
492
494
495
495
496
498
12.3.3 Testen in der Cioud.........................
12.3.4 Real-Life-Testen mit »unkooperativen« Inhalten
Qualitätssicherung und Wartung......................
12.4.1 Dokumentationen erstellen und pflegen ......
12.4.2 Modularisierung und Benennungsschemata ......
12.4.3 Stylesheets knapp schreiben und schlank halten
12.4.4 Unbenutzte CSS-Deklaration und Klassen finden
12.4.5 Tools für die Automatisierung von Prozessen.
Zusammenfassung.....................................
Performanceoptimierung
Das Performancebudget....................................
Was beeinträchtigt die Performance?......................
13.2.1 Anatomie einer Website...........................
Skripte, Stylesheets und HTML ...........................
13.3.1 Aus den Augen, aus dem Sinn? ....................
13.3.2 Skripte zusammenfassen...........................
13.3.3 Drittanbieterskripte und Sociai-Media-Buttons....
13.3.4 CSS-Sprites und Data-URIs sparen Requests........
13.3.5 Stylesheets und in ihnen verlinkte Ressourcen werden
unterschiedlich geladen .........................
13.3.6 Minifying und Dateikompression...................
13.3.7 Die Zukunft: HTTP/2 versus HTTP/1.1 .............
Caching..................................................
Performanceoptimierung für Grafiken und Bilder ..........
13.5.1 Optimierung von Bitmap-Bildern...................
13.5.2 SVG-Optimierung .................................
Web-Schriften optimieren ................................
13.6.1 Buchstabenauswahl verkleinern ...................
13.6.2 Fonts direkt einbetten...........................
Gefühlte Performance und Nachladen von Inhalten..........
13.7.1 Stylesheets an den Anfang, JavaScript-Dateien an
das Ende der Webseite.............................
13.7.2 Missionskritisches CSS (alias »above the fold«) .
13.7.3 Praxisbeispiel: Lazy Loading von Bildern mit Lazy Sizes
Inhalt
13.7.4 Praxisbeispiel: Lazy Sizes zum Nachladen von
Inhalten in Tab-Content........................................ 499
13.7.5 Praxisbeispiel: Conditional Loading Content via JavaScript (und CSS) 500
13.7.6 Farbflächen-»Vorschau« für Bilder ............................. 505
13.8 Zusammenfassung........................................................ 507
14 Fazit 509
Anhang....................................................................... 511
Index........................................................................ 513
15
|
| any_adam_object | 1 |
| author | Ertel, Andrea ca. 20. Jh Laborenz, Kai ca. 20. Jh |
| author_GND | (DE-588)1047416069 (DE-588)1023809540 |
| author_facet | Ertel, Andrea ca. 20. Jh Laborenz, Kai ca. 20. Jh |
| author_role | aut aut |
| author_sort | Ertel, Andrea ca. 20. Jh |
| author_variant | a e ae k l kl |
| building | Verbundindex |
| bvnumber | BV044297325 |
| classification_rvk | ST 252 |
| classification_tum | DAT 675f |
| ctrlnum | (OCoLC)971202040 (DE-599)DNB1124015418 |
| discipline | Informatik |
| edition | 3., aktualisierte und erweiterte Auflage |
| format | Book |
| fullrecord | <?xml version="1.0" encoding="UTF-8"?><collection xmlns="http://www.loc.gov/MARC21/slim"><record><leader>02739nam a2200541 c 4500</leader><controlfield tag="001">BV044297325</controlfield><controlfield tag="003">DE-604</controlfield><controlfield tag="005">20230123 </controlfield><controlfield tag="007">t|</controlfield><controlfield tag="008">170504s2017 xx a||| |||| 00||| ger d</controlfield><datafield tag="016" ind1="7" ind2=" "><subfield code="a">1124015418</subfield><subfield code="2">DE-101</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">9783836245784</subfield><subfield code="c">Festeinband : EUR 39.90 (DE), EUR 41.10 (AT), CHF 49.90 (freier Preis)</subfield><subfield code="9">978-3-8362-4578-4</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">3836245787</subfield><subfield code="9">3-8362-4578-7</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(OCoLC)971202040</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(DE-599)DNB1124015418</subfield></datafield><datafield tag="040" ind1=" " ind2=" "><subfield code="a">DE-604</subfield><subfield code="b">ger</subfield><subfield code="e">rda</subfield></datafield><datafield tag="041" ind1="0" ind2=" "><subfield code="a">ger</subfield></datafield><datafield tag="049" ind1=" " ind2=" "><subfield code="a">DE-91G</subfield><subfield code="a">DE-473</subfield><subfield code="a">DE-1049</subfield><subfield code="a">DE-1051</subfield><subfield code="a">DE-523</subfield><subfield code="a">DE-1102</subfield><subfield code="a">DE-19</subfield><subfield code="a">DE-M347</subfield><subfield code="a">DE-859</subfield><subfield code="a">DE-522</subfield><subfield code="a">DE-862</subfield><subfield code="a">DE-29T</subfield><subfield code="a">DE-12</subfield><subfield code="a">DE-634</subfield><subfield code="a">DE-83</subfield><subfield code="a">DE-11</subfield><subfield code="a">DE-898</subfield><subfield code="a">DE-573</subfield><subfield code="a">DE-703</subfield><subfield code="a">DE-863</subfield><subfield code="a">DE-20</subfield><subfield code="a">DE-739</subfield><subfield code="a">DE-B768</subfield><subfield code="a">DE-B170</subfield><subfield code="a">DE-355</subfield><subfield code="a">DE-858</subfield><subfield code="a">DE-1046</subfield><subfield code="a">DE-706</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">ST 252</subfield><subfield code="0">(DE-625)143627:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">DAT 675f</subfield><subfield code="2">stub</subfield></datafield><datafield tag="100" ind1="1" ind2=" "><subfield code="a">Ertel, Andrea</subfield><subfield code="d">ca. 20. Jh.</subfield><subfield code="e">Verfasser</subfield><subfield code="0">(DE-588)1047416069</subfield><subfield code="4">aut</subfield></datafield><datafield tag="245" ind1="1" ind2="0"><subfield code="a">Responsive Webdesign</subfield><subfield code="b">Konzepte, Techniken, Praxisbeispiele</subfield><subfield code="c">Andrea Ertel, Kai Laborenz</subfield></datafield><datafield tag="250" ind1=" " ind2=" "><subfield code="a">3., aktualisierte und erweiterte Auflage</subfield></datafield><datafield tag="264" ind1=" " ind2="1"><subfield code="a">Bonn</subfield><subfield code="b">Rheinwerk Computing</subfield><subfield code="c">2017</subfield></datafield><datafield tag="300" ind1=" " ind2=" "><subfield code="a">524 Seiten</subfield><subfield code="b">Diagramme, Illustrationen</subfield></datafield><datafield tag="336" ind1=" " ind2=" "><subfield code="b">txt</subfield><subfield code="2">rdacontent</subfield></datafield><datafield tag="337" ind1=" " ind2=" "><subfield code="b">n</subfield><subfield code="2">rdamedia</subfield></datafield><datafield tag="338" ind1=" " ind2=" "><subfield code="b">nc</subfield><subfield code="2">rdacarrier</subfield></datafield><datafield tag="490" ind1="0" ind2=" "><subfield code="a">Rheinwerk Computing</subfield></datafield><datafield tag="500" ind1=" " ind2=" "><subfield code="a">Auf dem Cover: "Websites für alle Endgeräte entwickeln, Layout, Navigationen, Bilder und Videos, Schriften u.v.m., inkl. Barrierefreiheit und Performanceoptimierung"</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">Responsive Webdesign</subfield><subfield code="0">(DE-588)1035443651</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Barrierefreiheit</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Codesign</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Frameworks</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">HTML5</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Mobile Webdesign</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Responsive Webdesign</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Typografie</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Webdesign</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Webentwicklung</subfield></datafield><datafield tag="689" ind1="0" ind2="0"><subfield code="a">Responsive Webdesign</subfield><subfield code="0">(DE-588)1035443651</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="0" ind2=" "><subfield code="5">DE-604</subfield></datafield><datafield tag="700" ind1="1" ind2=" "><subfield code="a">Laborenz, Kai</subfield><subfield code="d">ca. 20. Jh.</subfield><subfield code="0">(DE-588)1023809540</subfield><subfield code="4">aut</subfield></datafield><datafield tag="710" ind1="2" ind2=" "><subfield code="a">Galileo Press</subfield><subfield code="4">pbl</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">X:MVB</subfield><subfield code="q">text/html</subfield><subfield code="u">http://deposit.dnb.de/cgi-bin/dokserv?id=cbdd843ad61c4b30b9d85e6a1a007831&prov=M&dok_var=1&dok_ext=htm</subfield><subfield code="3">Inhaltstext</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">Digitalisierung UB Passau - ADAM Catalogue Enrichment</subfield><subfield code="q">application/pdf</subfield><subfield code="u">http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=029701294&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA</subfield><subfield code="3">Inhaltsverzeichnis</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">Digitalisierung UB Passau - ADAM Catalogue Enrichment</subfield><subfield code="q">application/pdf</subfield><subfield code="u">http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=029701294&sequence=000003&line_number=0002&func_code=DB_RECORDS&service_type=MEDIA</subfield><subfield code="3">Inhaltsverzeichnis</subfield></datafield><datafield tag="943" ind1="1" ind2=" "><subfield code="a">oai:aleph.bib-bvb.de:BVB01-029701294</subfield></datafield></record></collection> |
| id | DE-604.BV044297325 |
| illustrated | Illustrated |
| indexdate | 2024-12-24T05:56:31Z |
| institution | BVB |
| isbn | 9783836245784 3836245787 |
| language | German |
| oai_aleph_id | oai:aleph.bib-bvb.de:BVB01-029701294 |
| oclc_num | 971202040 |
| open_access_boolean | |
| owner | DE-91G DE-BY-TUM DE-473 DE-BY-UBG DE-1049 DE-1051 DE-523 DE-1102 DE-19 DE-BY-UBM DE-M347 DE-859 DE-522 DE-862 DE-BY-FWS DE-29T DE-12 DE-634 DE-83 DE-11 DE-898 DE-BY-UBR DE-573 DE-703 DE-863 DE-BY-FWS DE-20 DE-739 DE-B768 DE-B170 DE-355 DE-BY-UBR DE-858 DE-1046 DE-706 |
| owner_facet | DE-91G DE-BY-TUM DE-473 DE-BY-UBG DE-1049 DE-1051 DE-523 DE-1102 DE-19 DE-BY-UBM DE-M347 DE-859 DE-522 DE-862 DE-BY-FWS DE-29T DE-12 DE-634 DE-83 DE-11 DE-898 DE-BY-UBR DE-573 DE-703 DE-863 DE-BY-FWS DE-20 DE-739 DE-B768 DE-B170 DE-355 DE-BY-UBR DE-858 DE-1046 DE-706 |
| physical | 524 Seiten Diagramme, Illustrationen |
| publishDate | 2017 |
| publishDateSearch | 2017 |
| publishDateSort | 2017 |
| publisher | Rheinwerk Computing |
| record_format | marc |
| series2 | Rheinwerk Computing |
| spellingShingle | Ertel, Andrea ca. 20. Jh Laborenz, Kai ca. 20. Jh Responsive Webdesign Konzepte, Techniken, Praxisbeispiele Responsive Webdesign (DE-588)1035443651 gnd |
| subject_GND | (DE-588)1035443651 |
| title | Responsive Webdesign Konzepte, Techniken, Praxisbeispiele |
| title_auth | Responsive Webdesign Konzepte, Techniken, Praxisbeispiele |
| title_exact_search | Responsive Webdesign Konzepte, Techniken, Praxisbeispiele |
| title_full | Responsive Webdesign Konzepte, Techniken, Praxisbeispiele Andrea Ertel, Kai Laborenz |
| title_fullStr | Responsive Webdesign Konzepte, Techniken, Praxisbeispiele Andrea Ertel, Kai Laborenz |
| title_full_unstemmed | Responsive Webdesign Konzepte, Techniken, Praxisbeispiele Andrea Ertel, Kai Laborenz |
| title_short | Responsive Webdesign |
| title_sort | responsive webdesign konzepte techniken praxisbeispiele |
| title_sub | Konzepte, Techniken, Praxisbeispiele |
| topic | Responsive Webdesign (DE-588)1035443651 gnd |
| topic_facet | Responsive Webdesign |
| url | http://deposit.dnb.de/cgi-bin/dokserv?id=cbdd843ad61c4b30b9d85e6a1a007831&prov=M&dok_var=1&dok_ext=htm http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=029701294&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=029701294&sequence=000003&line_number=0002&func_code=DB_RECORDS&service_type=MEDIA |
| work_keys_str_mv | AT ertelandrea responsivewebdesignkonzeptetechnikenpraxisbeispiele AT laborenzkai responsivewebdesignkonzeptetechnikenpraxisbeispiele AT galileopress responsivewebdesignkonzeptetechnikenpraxisbeispiele |