Lektion 5: Responsive User Interfaces Flashcards
Web-Frameworks
sind Softwares, die f. die Entwicklung v. dynamischen Webseiten, Webanwendungen od. Webservices ausgelegt sind
Templates
sind Dateien, die inhaltlich das Layout einer od. mehrerer Seiten eines Webauftritts beschreiben, f. darzustellende Inhalte jedoch Platzhalter vorsehen
Cascoding Style Sheets (CSS)
ist eine Style Sheets-Sprache f. elektronische Dokumente u. zsm. mit HTML u. Java Script eine der Kernsprachen des World Wide Webs
Was ermöglicht Responsive Design?
Es erlaubt für unterschiedliche Visuelle Ausgabe Geräte mit unterschiedlichen Bildschirmgrößen eine möglichst optimale Gestaltung zu erzielen. Im Gegensatz zu einem festen oder adaptiven Layout bieten responsive Webseites eine optimale Anpassung an unterschiedliche Anzeigeformate und -größen. So werden beim adaptiven Layout Breakpoints definiert, an denen mittels CSS die Layout-Eigenschaften sprungweise verändert werden können. Innerhalb der einzelnen Breakpoints entspricht das adaptive Layout jedoch einem festen Layout. Beim responsive Layout können ebenso Breakpoints definiert werden, jedoch ist das Verhalten zwischen den Breakpoints ein fluides, anpassungsfähiges Layout. Auch wird bei responsive Webseites auf anpassungsfähige Inhalte wie Text, Bilder und Icons zurückgegriffen
Worin liegt die Herausforderung im Responsive Website Design?
Sie liegt in der Gestaltung von anpassungsfähigen Inhalten. So können für verschiedene Bildschirmgrößen unterschiedliche Bildausschnitte für fensterbreite Key Visuals definiert werden. Weiterhin sollte auf einen Mobile-First-Gestaltungsansatz zurückgegriffen werden
Gerade für kleine Bildschirmgrößen kann für die globale Navigation auch auf welches Darstellungsmuster zurückgegriffen werden?
Auf Off-Canvas-Darstellungsmuster, die angereichert mit eingänglicher Symbolik oder mittels Microinteraction zu einer guten User Experience führen können
Responsive Websites ermöglichen eine optimale Anpassung auf unterschiedliche Bildschirmgrößen, indem sie auf drei Kernelemente zurückgreifen. Nenne sie
- ein fluides Layout
- anpassungsfähige Inhalte
- Layout-Umbrüche an definierten Breakpoints mittels Media Queries
Die positiven Eigenschaften welcher zwei Layouts werden im Responsive Layout vereint?
- fluides Layout
- adaptives Layout
Viewports
An den Breakpoints wird in Abhängigkeit definierter Fenstergrößen, den sogenannten Viewports, zwischen verschiedenen Grid-Systemen (Raster-Systemen) umgeschaltet
Breakpoints
Breakpoints erlauben durch das Erzeugen von Layout-Umbrüchen noch mehr Flexibilität in der Gestaltung für unterschiedliche Screen-Größen. So kann z.B. für kleine Screen-Größen von Smartphones ein einspaltiges Grid-System verwendet werden. An einem vorab definierten Breakpoint wird dann z.B. ab einer Fensterbreite von 640 Pixeln auf ein zweispaltiges Raster umgeschaltet. Mithilfe von Breakpoints wird die Flexibilität von responsiven Layout-Systemen gewährleistet
Media Queries
Sie stellen die Kerntechnologie dar, um an Breakpoints zwischen verschiedenen Layouts umzuschalten. So können den verschiedenen Ausgabemedien wie Smartphones, Tablets oder großen Screens unterschiedliche Cascading Style Sheets (CSS) zugeordnet werden
Cascading Style Sheets (CSS)
Dies sind Gestaltungsvorlagen. CSS wurde für die Präsentation der Inhalte einer Website als Standard entwickelt. Nur durch den Austausch des Stylesheets können Websites in einem völlig anderen Design angezeigt werden.
Mittels CSS können unterschiedlichen Bildschirmgrößen unterschiedliche Eigenschaften zugewiesen werden
Nenne alle Layout-Typen
- Festes Layout
- Fluides Layout
- Adaptives Layout
- Responsive Layout
Nenne alle Layout-Patterns (Darstellungsmuster) von responsiven Websites
- Tiny Tweaks
- Mostly Fluid
- Column Drop
- Layout Shifter
- Off-Canvas-Darstellungsmuster
Definiere Responsive Webdesign
Bündel von Maßnahmen welche zum Ziel haben die Website so zu gestalten, dass sie für unterschiedliche visuelle Ausgabegeräte optimal angepasst ist
