Webseiten für mobile Endgeräte (Mobile Webseiten)

Mobile Nutzung und responsive Architektur

• Viewports und Geräteeigenschaften
• Mobile-First-CSS und Progressive Enhancement
• Breakpoints nach Inhaltsbedarf wählen
• Media Queries für Viewport-Anpassungen
• Container Queries für Komponenten

Flexible Seitenstrukturen mit HTML und CSS

• Semantische HTML-Strukturen
• Seitenlayouts mit CSS Grid
• Komponentenlayouts mit Flexbox
• Relative und dynamische CSS-Einheiten
• Fließende Typografie und Abstände
• Navigationen für kleine Displays

Responsive Inhalte und Medien

• Responsive Bilder mit srcset
• Bildauswahl mit sizes und picture
• Lazy Loading für Medien
• Skalierbare Icons und Grafiken
• Flexible Video-Einbettung
• Priorisierung mobiler Inhalte

Interaktion, Formulare und Barrierefreiheit

• Passende HTML-Eingabetypen
• Autocomplete und mobile Tastaturen
• Validierung und verständliche Fehlermeldungen
• Touch-Ziele nach WCAG 2.2
• Sichtbarer Tastaturfokus
• Pointer- und Tastatur-Events
• Mobile Menüs und Overlays

Performance und Qualitätssicherung

• LCP, INP und CLS messen
• Analysen mit DevTools und Lighthouse
• Rendering-Kosten im DOM
• CSS und JavaScript optimieren
• Bilder und Webfonts optimieren
• Cross-Browser- und Gerätetests

Frameworks und Praxisprojekt

• Responsive Komponenten mit Bootstrap
• Utility-Klassen mit Tailwind CSS
• Eigenes CSS und Frameworks kombinieren
• Wiederverwendbare Komponenten strukturieren
• Komponententests mit dem Storybook Komplettkurs vertiefen
• Desktop-Seite mobil überarbeiten
• Testergebnisse und Optimierungen dokumentieren

• Sichere Grundlagen in HTML und CSS
• Grundverständnis von JavaScript für interaktive Komponenten
• Erste Erfahrung mit Browser-DevTools von Vorteil
• Grundkenntnisse zu Navigation und Webformularen

• Webentwicklungsteams mit Verantwortung für responsive Websites
• Frontend-Entwickler mit HTML-, CSS- und JavaScript-Praxis
• UX- und UI-Designer mit technischem Grundverständnis
• CMS-, E-Commerce- und Marketing-Teams mit technischen Qualitätsaufgaben
• Projektteams mit Verantwortung für die Modernisierung Desktop-orientierter Websites