Beschreibung
Dieses Training ist 2015 erschienen. Der Großteil aller beschriebenen Techniken ist nach wie vor aktuell bzw. bildet eine wichtige konzeptionelle Grundlage für das Verständnis neuester Techniken.
Trailer & Beispiel-Lektionen
Inhaltsverzeichnis
Responsive Webdesign im Überblick
- Einleitung
- Was ist Responsive Webdesign?
- Die Grundideen und Konzepte
- Mobile Website, Responsive Design, Adaptive Design & RESS
- Die klassischen Layout-Typen
- Media Types und Media Queries
- Adaptive Design oder Responsive Design
- Das Mobile-First-Konzept
- Viewport und Meta-Viewport
- Touchscreen-Besonderheiten
- »Geister-Schaltflächen« im Browser gestalten
- Systemfunktionen ermitteln
Konzepte für die Website-Architektur
- Einleitung
- Statische Layouts flexibilisieren
- Layouts berechnen mit »calc()«
- Die Reihenfolge von Elementen
- Das Layout-Konzept »Mostly-Fluid«
- Das Layout-Konzept »Column-Drop«
- Der »Layout-Shifter«
- Proportional skalierende Kachel-Layouts
- Einen »Sticky Footer« aufbauen
- Die Viewport-Einheiten »vh« und »vw«
Neue Arbeitsabläufe im Responsive Webdesign
- Einleitung
- Veränderte Herausforderungen
- Frameworks, Mustergalerien und Prototypen verwenden
- Design-Module nutzen
- Stile entwerfen und festlegen
- Der neue Look von responsiven Websites
- Breakpoints intelligent setzen
- Das Responsive Design testen
Gestaltungsraster verwenden
- Einleitung
- Gestaltungsraster und CSS-Grids
- Ein responsives Raster planen
- Ein responsives Gestaltungsraster ausarbeiten
- Die Bedeutung von »box-sizing: border-box«
- Raster verschachteln
- Inhalte horizontal verschieben
- Rasterspalten einrücken
- Die visuelle Hierarchie
Content Choreography
- Einleitung
- Das Konzept hinter Content Choreography
- Inhalte austauschen mit »display: table-caption«
- Die Flexbox-Eigenschaften »display« und »flex«
- Die Flexbox-Eigenschaften »justify-content« und »align-items«
- Die Flexbox-Eigenschaft »order«
Rapid Prototyping in der Praxis
- Einleitung
- Codevorlagen und Standards
- Fließende Rasterlayouts
- Das passende Framework wählen
- Die Frameworks »Bootstrap«, »Foundation« und »Pure«
- Einen Prototyp erstellen mit Bootstrap
- Einen Prototyp erstellen mit Foundation
- Einen Prototyp entwerfen mit Webflow (Teil 1)
- Einen Prototyp entwerfen mit Webflow (Teil 2)
- Einen Prototyp entwerfen mit Reflow
Moderne Webtypografie
- Einleitung
- Typografie im Web
- Flexible Schrifteinheiten
- Texte lesbar gestalten
- Wortumbrüche erzwingen
- Schriftgröße und Viewport
- Webfonts verwenden
- Webfont-Icons verwenden
Die Navigation – Konzepte und Lösungen
- Einleitung
- Navigation mit Plan B
- Navigationsmenüs im Fußbereich
- Ein Navigationsmenü als Auswahlliste
- Navigationsslider mit JavaScript
- Eine Off-Canvas-Navigation mit JavaScript
- Navigation in mehreren Ebenen
- Horizontale Navigationsslider
- Karteireiter und Akkordeons
Flexible Grafikelemente
- Einleitung
- HTML-Grafik oder CSS-Grafik?
- Flexible Hintergrundgrafiken
- Hintergrundgrafiken mit Media Queries austauschen
- Bilder flexibel gestalten
- Fokuspunkte definieren
- Die Attribute »srcset« und »sizes«
- Art Direction und das Element <picture>
- Skripte und Polyfills
Flexible Inhaltselemente
- Einleitung
- Videos skalieren
- Tabellen optimieren
- Image Maps optimieren
- Einen Slider integrieren
- Formulare und Kontaktmöglichkeiten optimieren
- Funktionen an das Betriebssystem auslagern
Design für hochauflösende Bildschirme
- Einleitung
- Die technischen Hintergründe
- Grafiken austauschen per CSS
- Grafiken austauschen per HTML
- Das SVG-Format verwenden
- SVG-Icons einsetzen
Die Ladezeiten optimieren
- Einleitung
- HTTP-Requests minimieren
- CSS-Sprites und SVG-Sprites einsetzen
- SVG-Sprite-Code im Dokument einbetten
- Grafiken optimieren
JavaScript für Responsive Webdesign
- Einleitung
- Bedingtes Laden
- Media Queries mit JavaScript umsetzen
- Auf Größenänderungen des Fensters reagieren
- Hilfreiche Skripte
