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)

zurück zur Liste