Please enable JavaScript.
Coggle requires JavaScript to display documents.
Lektion 5: Responsive User Interfaces - Coggle Diagram
Lektion 5: Responsive User Interfaces
Grundlagen
Ziel: Flexibilität für verschiedene Bildschirmgrößen
Keine starken Änderungen zwischen Versionen
Drei Kernelemente
fluides Layout
anpassungsfähige Inhalte
Layout-Umbrüche durch Medi-Queries
"Mobile First-Ansatz" - Wroblewski
stärkere Nutzung
Fokus auf Schlüsselfunktionen
Zusätzliche Informationen (GPS,Beschleunigungsdaten)
Layout-Raster
Festes Layout
Berechnung in Pixel
Scrollbalken bei kleinen Bildschirmen
nicht anpassbar
Fluides Layout
Berechnung in Prozent
Inhaltselemente bleiben gleichgroß
Layout passt sich auf Fenstergröße
Adaptives Layout
festes Layout bis zum Umbruchpunkt
Responsive Layout
Vereinung Adaptiv & Fluid
skalierbare Inhalte
enthält Umbruchpunkte; dazwischen fluid
Grid-System - Gestaltungsraster
Ausrichtung von Elementen
Statische Layouts
960-Grid-System
960 Pixel
Teilbar zu 12 oder 16
nur passend für 960 Pixel Screens
Responsive Layout
in Prozentwerte
Beispiel: Header, 3 Spalten, Footer
Breakpoints
für Layout-Umbrüche
Je größer, desto mehr Spalten (bis 3)
Media Queries
Gerät wird identifiziert -> Anpassung
verschiedene CSS aufrufbar
Layout Patterns
Tiny Tweaks
einfachste Darstellungsmuster
eine Spalte
Anpassung auf Breite
kleine Opimierungen Schriftgrößen, Mediengrößen...
Mostly Fluid
zwei- bis mehrspaltig
fließende Anpassung
Smartphone, Spalten untereinander
Maximum, Weißraum
Column Drop
Reduzierung der Spaltenanzhal bei abnehmender Screengröße
Größe der Inhaltsebene konstant
Absenkung der Spalten
Layout Shifter
verdreht LAyout
viel Spielraum
meiste Aufwand
Off-Canvas-Darstellungsmuster
außerhalb des Bildschirmbereichs
zB beim Menü
erreichbar durch Button oder Wischgeste