Inhaltsverzeichnis. Christoph Zillgens. Responsive Webdesign. Reaktionsfähige Websites gestalten und umsetzen. ISBN (Buch):

Transkript

1 sverzeichnis Christoph Zillgens Responsive Webdesign Reaktionsfähige Websites gestalten und umsetzen ISBN (Buch): ISBN (E-Book): Weitere Informationen oder Bestellungen unter sowie im Buchhandel. Carl Hanser Verlag, München

2 V Vorwort... XIII Kapitel 1 Zeit, dass sich was bewegt...1 Kapitel 2 Was ist Responsive Webdesign? Rückbesinnung auf Flexibilität Unglückliche Begriffe Neue Geräte und Display-Größen Zugriffszahlen mobiler Geräte Responsive Webdesign vs. Adaptive Webdesign Kapitel 3 Die grundlegenden Zutaten für Responsive Webdesign Das Raster: Aus fix mach flexibel Abstände anpassen Relative Einheiten für Schriftgrößen Flexible Bilder Veränderter Kontext Hintergrundbilder anpassen Flexible Videos CSS3-Mediaqueries Zusätzliche Anpassungen für mobile Geräte... 47

3 VI Was passiert, wenn das Gerät in den Landscape-Modus gedreht wird? Der Umgang mit Internet Explorer 8 und kleiner Einmal kurz durchatmen Kapitel 4 Kapitel 5 Kapitel 6 Noch mehr Zutaten Was müssen wir noch berücksichtigen? Einen passenden Workflow entwickeln Flexibler Umgang mit den en Eine solide HTML-Basis Die Gestaltungsphase Reaktionsfähige Typografie und Webfonts Anpassungsfähige Bilder, Grafiken und Icons Mobile Navigation und Bedienmethoden Weitere Möglichkeiten mit Mediaqueries Layouts umsetzen Performance Die erweiterte Zutatenliste Ein verbesserter Workflow Der richtige Ausgangspunkt»Mobile First«oder»Desktop First«? Planungsphase Designphase Entwicklungsphase Zusammenfassung Abläufe in der Zusammenarbeit Ein auf das Responsive Webdesign abgestimmter Ablauf Beispiel einer wechselseitigen Zusammenarbeit Tests auf mobilen Geräten Emulatoren Wie wird der Auftraggeber in den Prozess integriert? Fazit Anpassungsfähige e Mobile First = Content First... 81

4 VII 6.2 Ziele und Bedürfnisse definieren Wireframes: e auf Bildschirmgrößen abstimmen Der Nutzerkontext Wo und wie nutzen Leute ihr Smartphone? Verschiedene Möglichkeiten zur sanpassung e weglassen e ausblenden e neu anordnen Zusammenfassung Kapitel 7 Kapitel 8 Einen Prototypen mit HTML5-Elementen erstellen Ein Blick in die index.html Conditional Comments Viewport-Angaben für mobile Geräte CSS einbinden Nützliche JavaScript-Helfer Gerätespezifische Besonderheiten Neue Elemente für mehr Semantik Sollen wir mit dem Einsatz noch warten? e als Basis Header Nav Section Footer Article Section und Article unter der Lupe Aside Figure und Figcaption Fazit Formulare in HTML Neue Attribute Platzhalter Pflichtfelder Autofokus Neue Eingabetypen

5 VIII , URL, Telefon Zahlen, min- und max-werte, Zählschritte, Platzhalter Schieberegler Datum und Uhrzeit Das Suchfeld Formularvalidierung Das pattern-attribut Ausgabe einer Fehlermeldung Fehlende Funktionen: JavaScript hilft Kapitel 9 Kapitel 10 Die Gestaltungsphase Layoutmuster Überwiegend flüssiges Layout Spalten verschieben Layout umschalten Kleine Änderungen Off Canvas: außerhalb der Darstellungsfläche Zusammenfassung Bestandteile eines Designs Fazit Annäherung an die Gestaltung Das richtige Werkzeug finden Gestaltung Zeit sparen Styletiles Ein Designsystem entwickeln Nicht zu sehr ins Detail gehen Verhandeln Zusammenfassung Reaktionsfähige Webtypografie Das Zwischenergebnis testen Analyse Schriften wählen und testen Typecast Schriftsetzung in flexiblen Layouts Die richtige Zeilenlänge

6 IX Mehrere Spalten Automatische Silbentrennung Die richtige Schriftgröße Schriftgrößen und Schriftbild Tipps zum Skalieren Den Zeilenabstand anpassen Moderne Einheiten für Schriftgrößen Kontrast und Fallback-Schriften Fazit Kapitel 11 Anpassungsfähige Bilder, Hintergrundbilder und Icons Herausforderungen im reaktionsfähigen Kontext Adaptive Images Was passiert da jetzt genau? Zusammenfassung Responsive Enhance Funktionsweise Bilder ausschließen Fazit Bildmotiv oder -ausschnitt ändern Angriff der Retina-Displays Neue HTML-Elemente braucht das Land srcset picture Quintessenz: eine gute Mischung Fazit Qual der Wahl Responsive Slider Hintergrundbilder jquery Anystretch Hochauflösende Hintergrundbilder Hochauflösende CSS-Sprites Pixelperfekte Icons Iconfonts Nachteile Fazit

7 X SVG Zusammenfassung Kapitel 12 Kapitel 13 Mobile Navigation Was ist wichtig für mobile Navigationen? e vor Navigation Die richtige Größe macht s Zusammenfassung Navigationskonzepte Top-Nav: Es bleibt, wie es ist Icon-Navigation Footer-Navigation Select-Menü Das Toogle-Menü Toggle-Varianten Off-Canvas-Menü »Pull down for Navigation« Swipe Fazit Eine mobile Navigation erstellen Die Position der Navigation verändern Die Navigation ein- und ausblenden Fazit Mediaqueries Nützliche Eigenschaften Dimensionen Seitenverhältnis und Ausrichtung Pixeldichte und Auflösung Farbe Ausblick: Maus oder Finger? Mediaqueries kombinieren Mediaqueries planen und strukturieren Planung Struktur Mediaqueries mit em angeben Mediaqueries und JavaScript

8 XI Kapitel 14 Layouts umsetzen Reaktionsfähige Gridsysteme Golden-Grid-System Goldilocks Approach Less Framework 4 und Frameless Modulares Grid Gridset Gridpak Selbst ist der Mann (oder die Frau) Hilfsmittel zum Testen der Layouts Fazit Design-Module Einfacher Zweispalter Verschachtelter Zweispalter Einfacher Dreispalter Dreispalter mit Zwischenschritt Mehrere Zwischenschritte Vorlagen verwenden Fazit Hierarchie wahren Bildseitenverhältnis anpassen Weitere Gestaltungsmöglichkeiten Elemente neu anordnen Display: table die Navigation neu ausrichten Display: table die Navigation neu anordnen AppendAround Flex Layout schönes neues CSS Seitenverhältnis flexibler Elemente steuern e beschneiden Problemfall: sperrige e Reaktionsfähige Tabellen Infografiken und Schaubilder Bannerwerbung Kapitel 15 Performance Gründe für langsame Websites Gestiegene Datenmenge

9 XII Anzahl eingebundener Dateien Den Ladevorgang entschlüsseln Das HTTP-Wasserfall-Diagramm Beschränkung paralleler Aufrufe Der Datei-Overhead Latenzen Zusammenfassung Bequeme Gewohnheiten der Entwickler Dateien zusammenführen JavaScript JavaScripts von fremden Servern CSS-Dateien JavaScripts und Stylesheets minifizieren Minifizier-Software Reihenfolge im HTML-Code Bilder optimieren Das richtige Dateiformat Bilddaten eindampfen CSS-Sprites Data URIs GZIP: komprimierte Übertragung Caching: Dateien mit längeren Verfallsdaten ausstatten Lazy Loading Social-Media-Buttons Optimierung innerhalb von CSS Webfonts YSlow Fazit Ran ans Werk! Index...354