Responsive Webdesign mit HTML5 und CSS3

Weiterbildung

4-Wochen-Kurs

In diesem Training lernen Sie es, in flexiblen Strukturen zu denken, Media Queries professionell einzusetzen und Usability-Anforderungen umzusetzen. Lernen Sie alles über den Umgang mit verschiedenen Layouttypen, den Einsatz von Media Queries sowie die Entwicklung eines modernen Webdesigns. Erfahren Sie, wie ein Web-Layout für alle Geräte und Medien funktioniert sowie Navigations- und Content-Strukturen benutzerfreundlich gestaltet werden. Lernen Sie, wie Sie Formulare, Tabellen oder Slideshows responsiv einsetzen und externe Videoplayer, Maps oder Werbeformate im responsiven Design verwenden.

Inhalt

Media Queries und flexible Inhalte
- Responsive Umsetzung eines fixen Layouts
- Schlüsseltechnologie Media Queries
Design und Typografie
- Design von innen nach außen – der Atomic-Design-Ansatz
- Typografie mit anpassungsfähiger Text
Semantik und Barrierefreiheit
- Semantik durch HTML5
- Semantik durch WAI-ARIA-Rollen
Responsive Layout-Patterns
- Darstellungsmuster für unterschiedliche Ausgabegeräte
- Flexbox-Layout und Grid-Layouts
Frameworks im Vergleich
- JavaScript-Bibliotheken und fertige Frameworks verwenden
- Elegante Stylesheets mit Präprozessoren: SASS, und LESS
Navigationskonzepte
- Benutzerfreundliche Navigation für mobile Geräte
- Toggle-Menüs, Off-Canvas-Menü und Multilevel-Menüs
SVG und Icon Fonts
- Responsive Icons
- Auflösungsunabhängige Grafiken (SVG)
Syntax für responsive Bilder
- Responsive Lightboxen, Image Maps, Videos und Inhaltsboxen
- Unterschiedliche Versionen für responsive Bilder erzeugen
Testing und Performanceoptimierung
- Validatoren für HTML und CSS sowie Breakpoints im Browser testen
- Performanceoptimierung für Grafiken und Bilder sowie Web-Schriften optimieren
- Caching