Responsive Webdesign mit HTML5

Responsive Webdesign befasst sich mit der flüssigen, automatischen Anpassung ihres Webtemplates an verschiedene Ausgabegeräte durch verschiedene Techniken wie CSS Media Querys und JavaScript-Anpassungen. Dabei bleibt der Inhalt Ihrer Seite unverändert und hilft so dabei, eine wartungsarme und breit zugängliche Plattform zu schaffen.

Zielgruppe
  • Webentwickler, Projektleiter
  • Administratoren
  • Einsteiger in der Softwareentwicklung
  • Softwareentwickler
Schulungsziel

Sie lernen, mit HTML, CSS und JavaScript flexible Webseiten- und Webapplikationslayouts für Endgeräte jeglicher Form zu entwerfen und umzusetzen.

Voraussetzungen
  • HTML Grundlagen
  • JavaScript Grundlagen
  • CSS Grundlagen
Inhalte
  • Allgemeine Grundlagen responsiver Layouts
  • Ausgaben auf mobilen Geräten und Desktopbrowsern
  • Vergleich der Gerätetypen
  • Geräteabhängige Designaspekte
  • Responsive, Fluid, Adaptive?

Layouts entwerfen

  • Entwurfsraster (Grids) einsetzen
  • Grids schreiben, Gridframeworks
  • Beispiele für Yaml und Bootstrap
  • Festbreiten-Layouts, flexible Layouts
  • Anforderungen und Entwurf eines flexiblen Layouts

Einsatz von Medienqueries

  • Medientypen und Attribute abfragen
  • Breakpoints zur Unterscheidung verschiedener Geräteklassen
  • Gerätespezifische Anpassungen des Entwurfsrasters
  • Browserkompatibilität für Internet Explorer 8 und kleiner

HTML für mobile Geräte

  • Viewport
  • Touchicons
  • Conditional Comments

Umgang mit Bildern und anderen Medien

  • Responsive Medieninhalte
  • srcset, und andere Konzepte
  • Anpassen von Bildern, Video

Typographie für Desktop und mobile Geräte

  • Umgang mit Schriften und Schriftgrößen
  • Lesbarkeit: das optimale Layout für jedes Gerät

Geräteoptimierte Content- und Navigationskonzepte

  • Content first, Mobile first
  • Graceful degration, progressive Enhancement
  • Über die Bedienbarkeit Mauszeiger vs. Touchscreen
  • Gerätetypische Schaltflächen, Navigationslisten, Eingabeelemente

Performance

  • Optimierung der Ladezeit und des Ladeverhaltens
  • geräteangepasste Inhalte ausliefern

Frameworks

  • Adaptive Bilder (adaptive images)
  • Skalierbare Icons (awesome fonts)
  • Medienerkennung (responds.js)