Zu Hanser-Fachbuch.de
Warenkorb
Christoph Zillgens
Responsive Webdesign
Hochwertige Websites mit HTML 5, CSS3 und Webfonts erstellen
Vorwort
14
1 Zeit, dass sich was bewegt
16
2 Was ist Responsive Webdesign?
22
2.1 Rückbesinnung auf Flexibilität
23
2.2 Unglückliche Begriffe
25
2.3 Neue Geräte und Display-Größen
25
2.4 Zugriffszahlen mobiler Geräte
28
2.5 Responsive Webdesign vs. Adaptive Webdesign
29
3 Die grundlegenden Zutaten für Responsive Webdesign
30
3.1 Das Raster: Aus fix mach flexibel
31
Abstände anpassen
39
3.2 Relative Einheiten für Schriftgrößen
40
3.3 Flexible Bilder
42
Veränderter Kontext
43
Hintergrundbilder anpassen
45
3.4 Flexible Videos
50
3.5 CSS3-Mediaqueries
52
3.6 Zusätzliche Anpassungen für mobile Geräte
62
Was passiert, wenn das Gerät in den Landscape-Modus gedreht wird?
65
3.7 Einmal kurz durchatmen
68
4 Noch mehr Zutaten
70
4.1 Was müssen wir noch berücksichtigen?
70
Einen passenden Workflow entwickeln
70
Flexibler Umgang mit den Inhalten
71
Eine solide HTML-Basis
71
Die Gestaltungsphase
71
Reaktionsfähige Typografie und Webfonts
71
Anpassungsfähige Bilder, Grafiken und Icons
72
Mobile Navigation und Bedienmethoden
72
Weitere Möglichkeiten mit Mediaqueries
72
Layouts umsetzen
73
Performance
73
4.2 Die erweiterte Zutatenliste
73
5 Ein verbesserter Workflow
76
5.1 Der richtige Ausgangspunkt – »Mobile First« oder »Desktop First«?
76
Planungsphase
77
Designphase
79
Entwicklungsphase
82
Zusammenfassung
83
5.2 Abläufe in der Zusammenarbeit
83
Ein auf das Responsive Webdesign abgestimmter Ablauf
86
Beispiel einer wechselseitigen Zusammenarbeit
87
5.3 Tests auf mobilen Geräten
90
Emulatoren
91
5.4 Wie wird der Auftraggeber
5.4 Wie wird der Auftraggeber
92
92
5.5 Fazit
94
6 Anpassungsfähige Inhalte
96
6.1 Mobile First = Content First
96
6.2 Ziele und Bedürfnisse definieren
99
6.3 Wireframes: Inhalte aufBildschirmgrößen abstimmen
101
6.4 Der Nutzerkontext
104
Wo und wie nutzen Leute ihr Smartphone?
105
6.5 Verschiedene Möglichkeiten zur Inhaltsanpassung
107
Inhalte weglassen
108
Inhalte ausblenden
109
Inhalte neu anordnen
117
6.6 Zusammenfassung
119
7 Einen Prototypen mit HTML5-Elementen erstellen
120
7.1 Ein Blick in die index.html
123
Conditional Comments
123
Viewport-Angaben für mobile Geräte
124
CSS einbinden
125
Nützliche JavaScript-Helfer
125
Gerätespezifische Besonderheiten
127
7.2 Neue Elemente für mehr Semantik
128
Sollen wir mit dem Einsatz noch warten?
130
Inhalte als Basis
131
Header
132
Nav
134
Section
136
Footer
137
Article
138
Section und Article unter der Lupe
139
Aside
140
Figure und Figcaption
142
7.3 Fazit
145
8 Formulare in HTML5
146
8.1 Neue Attribute
146
Platzhalter
147
Pflichtfelder
147
Autofokus
147
8.2 Neue Eingabetypen
148
E-Mail, URL, Telefon
148
Zahlen, min- und max-Werte, Zählschritte, Platzhalter
149
Schieberegler
151
Datum und Uhrzeit
152
Das Suchfeld
154
8.3 Formularvalidierung
155
Das pattern-Attribut
155
Ausgabe einer Fehlermeldung
157
Fehlende Funktionen: JavaScript hilft
158
9 Die Gestaltungsphase
162
9.1 Layoutmuster
162
Überwiegend flüssiges Layout
163
Spalten verschieben
163
Layout umschalten
164
Kleine Änderungen
165
Off Canvas: außerhalb der Darstellungsfläche
165
Zusammenfassung
166
9.2 Bestandteile eines Designs
166
Fazit
169
9.3 Annäherung an die Gestaltung
169
9.4 Das richtige Werkzeug finden
171
9.5 Gestaltung
173
9.6 Zeit sparen
177
Styletiles
178
Ein Designsystem entwickeln
179
Nicht zu sehr ins Detail gehen
181
Verhandeln
182
Zusammenfassung
183
10 Reaktionsfähige Webtypografie
184
10.1 Das Zwischenergebnis testen
185
Analyse
187
10.2 Schriften wählen und testen
188
Typecast
189
10.3 Schriftsetzung in flexiblen Layouts
191
Die richtige Zeilenlänge
191
Mehrere Spalten
193
Automatische Silbentrennung
195
Die richtige Schriftgröße
196
Schriftgrößen und Schriftbild
197
Tipps zum Skalieren
200
Den Zeilenabstand anpassen
202
Moderne Einheiten für Schriftgrößen
203
Kontrast
206
10.4 @font-face und Fallback-Schriften
207
10.5 Fazit
208
11 Anpassungsfähige Bilder, Hintergrundbilder und Icons
210
11.1 Herausforderungen im reaktionsfähigen Kontext
210
11.2 Adaptive Images
213
Was passiert da jetzt genau?
215
Zusammenfassung
216
11.3 Responsive Enhance
217
Funktionsweise
219
Bilder ausschließen
220
Fazit
221
11.4 Bildmotiv oder -ausschnitt ändern
221
11.5 Angriff der Retina-Displays
223
11.6 Neue HTML-Elemente braucht das Land
224
srcset
225
picture
225
Quintessenz: eine gute Mischung
226
Fazit
228
11.7 Qual der Wahl
229
11.8 Responsive Slider
229
11.9 Hintergrundbilder
231
jQuery Anystretch
231
Hochauflösende Hintergrundbilder
232
Hochauflösende CSS-Sprites
235
11.10 Pixelperfekte Icons
237
11.11 Iconfonts
238
Nachteile
240
Fazit
241
11.12 SVG
241
11.13 Zusammenfassung
245
12 Mobile Navigation
246
12.1 Was ist wichtig für mobile Navigationen?
246
Inhalte vor Navigation
246
Die richtige Größe macht’s
249
Zusammenfassung
251
12.2 Navigationskonzepte
251
Top-Nav: Es bleibt, wie es ist
251
Icon-Navigation
253
Footer-Navigation
254
Select-Menü
256
Das Toggle-Menü
257
Toggle-Varianten
259
Off-Canvas-Menü
261
»Pull down for Navigation«
263
Swipe
263
Fazit
263
12.3 Eine mobile Navigation erstellen
264
Die Position der Navigation verändern
264
Die Navigation ein- und ausblenden
265
12.4 Fazit
269
13 Mediaqueries
270
13.1 Nützliche Eigenschaften
270
Dimensionen
270
Seitenverhältnis und Ausrichtung
270
Pixeldichte und Auflösung
271
Farbe
271
Ausblick: Maus oder Finger?
271
13.2 Mediaqueries kombinieren
272
13.3 Mediaqueries planen und strukturieren
273
Planung
273
Struktur
275
13.4 Mediaqueries mit em angeben
276
13.5 Mediaqueries und JavaScript
278
14 Layouts umsetzen
280
14.1 Reaktionsfähige Gridsysteme
280
Golden-Grid-System
281
Goldilocks Approach
282
Less Framework 4 und Frameless
282
Modulares Grid
283
Gridset
284
Gridpak
287
Selbst ist der Mann (oder die Frau)
287
14.2 Hilfsmittel zum Testen der Layouts
288
Fazit
290
14.3 Design-Module
290
Einfacher Zweispalter
290
Verschachtelter Zweispalter
291
Einfacher Dreispalter
292
Dreispalter mit Zwischenschritt
293
Mehrere Zwischenschritte
294
Vorlagen verwenden
295
Fazit
297
14.4 Hierarchie wahren
298
Bildseitenverhältnis anpassen
299
Weitere Gestaltungsmöglichkeiten
302
14.5 Elemente neu anordnen
302
Display: table – die Navigation neu ausrichten
302
Display: table – die Navigation neu anordnen
304
AppendAround
305
Flex Layout – schönes neues CSS
308
14.6 Seitenverhältnis flexibler Elemente steuern
312
14.7 Inhalte beschneiden
313
14.8 Problemfall: sperrige Inhalte
315
Reaktionsfähige Tabellen
315
Infografiken und Schaubilder
321
Bannerwerbung
323
15 Performance
326
15.1 Gründe für langsame Websites
329
Gestiegene Datenmenge
329
Anzahl eingebundener Dateien
330
15.2 Den Ladevorgang entschlüsseln
330
Das HTTP-Wasserfall-Diagramm
330
Beschränkung paralleler Aufrufe
332
Der Datei-Overhead
333
Latenzen
334
Zusammenfassung
335
15.3 Bequeme Gewohnheiten der Entwickler
336
15.4 Dateien zusammenführen
337
JavaScript
337
JavaScripts von fremden Servern
339
CSS-Dateien
339
15.5 JavaScripts und Stylesheets minifizieren
344
Minifizier-Software
345
15.6 Reihenfolge im HTML-Code
346
15.7 Bilder optimieren
347
Das richtige Dateiformat
348
Bilddaten eindampfen
349
15.8 CSS-Sprites
352
15.9 Data URIs
354
15.10 GZIP: komprimierte Übertragung
357
15.11 Caching: Dateien mit längeren Verfallsdaten ausstatten
358
15.12 Lazy Loading
360
15.13 Social-Media-Buttons
362
15.14 Optimierung innerhalb von CSS
363
15.15 Webfonts
364
15.16 YSlow
365
15.17 Fazit
366
Ran ans Werk!
368
Index
370
© 2009-2024 ciando GmbH