Videotraining Responsive Webdesign

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 - Videotraining

Responsive Webdesign – das große Training

video2brain 2013
Laufzeit: 5 Std. 34 min
Einzeltraining: € 39,95 oder alle Trainings im Abonnement: ab € 19,95

Online-Training
DVD bestellen

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