| Typ | Konzept |
|---|---|
| Quellen | Quelle - Praxisbuch Usability und UX |
| Erstellt | 2026-09-27 |
| Aktualisiert | 2026-09-27 |
| Tags | responsive-design, gestaltungsraster, breakpoint, mobile-first, webdesign |
Die Website passt ihr Layout mit flexiblem Raster, relativen Schriftgrössen und skalierbaren Bildern an jede Bildschirmbreite an, mit grundsätzlichen Umbrüchen an festgelegten Breakpoints. Konzipiert wird nach „Mobile First“ vom kleinsten Bildschirm aus.
Gestaltungsraster (Grid)
- Ein Gitter aus Hilfslinien, an dem alle Elemente ausgerichtet werden. Gibt Struktur, Rhythmus und Wiedererkennung über alle Seitentypen (Quelle - Praxisbuch Usability und UX, S. 249–250).
- 12, 16 oder 24 Spalten: 12 und 24 lassen sich durch 1, 2, 3, 4, 6 und 12 teilen. Immer eine gerade Spaltenzahl.
- Klassische Desktop-Breiten: 960, 1100 oder 1240 px; Abstand zwischen den Spalten (Gutter) 10–20 px, immer gleich. Weissraum zeigt, was zusammengehört (S. 251–252).
- Baseline Grid mit horizontalen Linien ist im Print Pflicht, im Web nur für modulare Raster nötig.
- Vom Groben ins Feine: zuerst Header, Footer, Inhaltsbereich und Sidebar, daraus die Templates (Seitentypen).
- Vorher mit der Entwicklung klären: Frameworks wie Bootstrap oder Foundation geben das Raster vor.
Responsiv vs. adaptiv
| responsiv | adaptiv | |
|---|---|---|
| Layout | fluid, in Prozent, Umbrüche an Breakpoints | feste Layouts pro Gerätegruppe |
| Steuerung | clientseitig per CSS | auf das Gerät zugeschnitten ausgeliefert |
| Vorteil | passt sich jeder Breite an | nur nötige Inhalte, schlanker |
| Nachteil | lädt auch nicht benötigte Inhalte | Zwischenauflösungen passen schlecht, aufwendig |
Nach S. 255–256. Gängige Breakpoints: 320, 480, 768, 1024 und 1200 px.
Konzeption
- Wo läuft es? PC, Smartphone, Tablet, Smartwatch, Smart-TV, Spielkonsole; bei Apps iOS und Android. Wichtiger als das Betriebssystem ist die Bildschirmgrösse. Querformat mitdenken (S. 257).
- Mobile First: vom Smartphone aus planen; hinzufügen ist leichter als wegnehmen (Nutzerzentrierte Entwicklung).
- Flexibles Raster statt fester Pixel. Für jedes Element entscheiden: ein- oder ausblenden, nebeneinander oder untereinander, Filter über oder neben der Liste? (S. 258–259)
- Flexible Typografie in Prozent oder em; Zeilen mit 45–85 Zeichen; Anrisstexte in Teasern auf dem Smartphone kürzen oder weglassen.
- Skalierbare Bilder: unterschiedliche Auflösungen für normale und hochauflösende Bildschirme, kleinere Dateien für schmale Viewports, eventuell andere Bildausschnitte (Art Direction) (S. 261).
- Redaktion einbeziehen: Leitfaden, damit Redakteure die Darstellung auf allen Geräten prüfen.
- Entwicklern Arbeit sparen: Kästen, die auf dem Desktop nebeneinander stehen, rutschen leicht untereinander; einen Kasten an eine ganz andere Stelle zu verschieben ist aufwendig. Nicht für jede Zwischengrösse eigene Schriftgrössen definieren (S. 153).
Sammlungen responsiver Muster: Brad Frost und Luke Wroblewski (S. 262).
Touch und Gesten
Touch verlangt grössere Elemente mit mehr Abstand; Mouseover und Mausrad fallen weg. Gesten wie Ziehen zum Aktualisieren, Zangengriff zum Zoomen oder seitliches Wischen zum Löschen sind oft unsichtbar und müssen gelernt werden (S. 77). Mindestgrössen: UI-Richtlinien.
Verwandt
- Prototyping – Wireframes in mehreren Breiten
- UI-Richtlinien – Schriftgrössen, Touch-Ziele, Bilder
- Angular – Frontend-Framework, mit dem solche Oberflächen gebaut werden
- Modernes JavaScript – Technik im Browser