Please enable JavaScript.
Coggle requires JavaScript to display documents.
Reponsive UIs - Coggle Diagram
Reponsive UIs
Grundlagen, Prinzipien, Herausforderungen
- Smartphone
- Smartwatch
- Tablet
- Laptop
- großer Monitor
- Fernsehbildschirm
-
visuelle Gestaltung, strukt. Aufbau nicht zu stark ändern (Orientierung)
3 Kernelemente
- fluides Layout (Raster)
- anpassungsfähige Inhalte
- Layout-Umbrüche dr. Media Queries
Herausforderung:
Verständnis, Heransgehensweise im Design
"Mobile First" (Wroblewski, 2009)
- Seitenaufrufe via mobile Geräte stark gewachsen
- Beschränkung auf Wesentliches
- zusätzliche Möglkeiten dr. Smartphones+Tablets (GPS, Beschleunigungsdaten)
früher:
Desktop-Variante, danach "Graceful Degradation"
"Responsive Design"
- Bündel v. Maßnahmen
- Website gestalten, sodass
- f. unters. visuelle Ausgabegeräte optimal angepasst
Layout Patterns
Tiny Tweaks
- einfaches, einspaltiges Website-Konzept
- Mobile Only
- kaum Veränderungen
- kleine Optimierungen: Schriftgrößen, -abstände, Mediengrößen
Mostly Fluid
- zwei-/mehrspaltiges Layout
- flexbile Spaltenbreite
- Inhalte passend s. fließend an
Column Drop
- mehrspaltiges Layout
- reduziert Spaltenzahl mit abnehmender Screen-Größe
Layout Shifter
- sehr anpassungsfähig
- gr. gestalt. Spielraum
- meiste Arbeit nötig
Off-Canvas-Darstellungsmuster
- Layout-Konzept + Menükonzept
- aktuell nicht benötigte Inhalte herausgeschoben
-> einblendbar
Layout-Typen, Grid-Systeme, Breakpoints
-
-
-
-