Der Siegeszug des Responsive Webdesign ist unbestritten: Wenn Sie eine neue Website erstellen, so muss sie heutzutage responsive sein – um zeitgemäß zu sein. Denn das Responsive Webdesign ermöglicht, dass ein und dieselbe HTML-Seite immer eine gute Figur macht – auf einem Smartphone genauso wie auf einem Tablet oder auf einem riesigen Desktopmonitor. Aber wie erstellt man eine responsive Website? Das zeige ich in meinem fünfstündigen Training bei video2brain.
Responsive Webdesign – das große Training
2013
Laufzeit: 5 Std. 34 min
Online-Training
Inhalt
Responsive Webdesign – der Einstieg
- Smartphones erobern das Web
- Klassisch: Separate mobile Web-Seiten
- Modern: Responsive Webdesign
Responsive Webdesign – die Komponenten
Der folgende Ausschnitt aus dem Videotraining ist eine Einführung in Media Queries
- Medienangaben in CSS 2.1
- CSS3-Media Queries – Einführung
- Media Queries durchleuchtet
- width und device-width bei Desktops und Smartphones
- Meta-Viewport-Angabe
- Flüssige Layouts
- Erleichterte Rechnungen mit box-sizing
- “Und jetzt alle zusammen!” – ein erstes Beispiel
- Ein Mobile-First-Beispiel aufbauen
- Mobile First zum Zweiten
- Strategien für den IE
- Breakpoints wählen, Viewport-Größe testen
- Testen mit Opera Mobile Emulator
- Layout: responsive vs. adaptive
Bilder und Videos im Responsive Webdesign
- Flüssige Bilder
- Hierarchie bei Bildern beibehalten
- Hintergrundbilder im RWD
- Unterschiedliche Hintergrundbilder laden
- Optimierte Bildgrößen mit src.sencha.io
- Mehr Lösungen für Bilder
- Videos
- Icons für Smartphones
Responsive Typography
- Schriftart und Schriftgröße
- Neue Einheiten fürs RWD – rem und vw
- Flüssige Schriftgröße
- Schöne Effekte für Überschriften und Co.
- Zeilenlänge und Aufteilung in Spalten
Die Navigation im Responsive Webdesign
- Klappnavigation realisieren
- Off-Canvas
- Fertige Navigationslösungen
Tabellen, Formulare und mehr
- Tabellen darstellen
- Richtiger Umgang mit Formularen
- Carousel, Diashows und mehr
Hochauflösende Displays
- Besonderheit von hochauflösenden Displays
- Media Queries für hochauflösende Displays
- Weitere Techniken für hochauflösende Displays
Bessere Performance
- Performance ist entscheidend
- Schritte zur Performance-Verbesserung
- HTTP-Requests einsparen
- Conditional Loading
Tipps für die praktische Umsetzung
- Media Queries organisieren
- Tools für den Workflow im Responsive Webdesign
- Inhalte anordnen
- Responsive Framework: Twitter Bootstrap
- Responsive Framework: Foundation
Tools und Weiterführendes
- Modernizr
- Mobile Boilerplate
- Server installieren
- RESS – RWD + Serverside Components