Was ist Responsive Design?
Responsive Design ist ein Ansatz im Webdesign, bei dem sich Layout, Bilder und Inhalte einer Website oder Anwendung automatisch an die Bildschirmgröße des jeweiligen Geräts anpassen – vom Smartphone über Tablet bis zum Desktop-Monitor.
Kernkonzepte
Media Queries
CSS-Regeln, die ab bestimmten Bildschirmbreiten greifen und das Layout anpassen.
Flexible Grids
Layouts basieren auf relativen Einheiten (%, rem, vw) statt festen Pixelwerten.
Flexible Bilder
Bilder skalieren automatisch und werden in verschiedenen Auflösungen ausgeliefert.
Mobile-First vs. Desktop-First
| Ansatz | Beschreibung |
|---|---|
| Mobile-First | Design beginnt für die kleinste Bildschirmgröße und erweitert progressiv |
| Desktop-First | Design beginnt für große Bildschirme und passt sich nach unten an |
Die Mobile-First-Strategie ist heute Best Practice, da die Mehrheit der Nutzer über mobile Geräte zugreift.
Responsive Design für HMIs
Bei webbasierten HMI-Systemen hat Responsive Design besondere Anforderungen:
- Verschiedene Panelgrößen: HMI-Displays reichen von 7" bis 24"
- Touch-Optimierung: Große Touch-Targets für Bedienung mit Handschuhen
- Orientierung: Unterstützung von Hoch- und Querformat
- Kontrastverhältnisse: Lesbarkeit bei Sonneneinstrahlung und in dunklen Umgebungen
Breakpoints (typisch)
| Gerät | Bildschirmbreite |
|---|---|
| Smartphone | < 640px |
| Tablet | 640–1024px |
| Desktop | 1024–1280px |
| Großbildschirm | > 1280px |
Vorteile
- Eine Codebasis: Kein separates Mobile-Design nötig
- SEO: Google bevorzugt responsive Websites im Ranking
- Nutzererlebnis: Optimale Darstellung auf jedem Gerät
- Wartbarkeit: Änderungen gelten automatisch für alle Bildschirmgrößen
