6.4 Responsive Webdesign

Responsive Webdesign umfasst Maßnahmen, die eine Website so gestalten, dass sie sich optimal an verschiedene visuelle Ausgabegeräte wie Smartphones, Tablets, Laptops und Fernseher anpasst.

Weil Nutzende oft verschiedene Endgeräte verwenden und eine konsistente visuelle Gestaltung sowie struktureller Aufbau wichtig sind, um die Orientierung zu gewährleisten.

Fluides Layout, anpassungsfähige Inhalte und Layout Umbrüche durch Media Queries.

Früher wurden Inhalte für fixe Fenstergrößen gestaltet, während Responsive Webdesign felxible und anpassungsfähige Inhalte erfordert.

Ein Layout mit festen Dimensionen in Pixel, das sich nicht an unterschiedliche Bildschirmgrößen anpasst und bei kleineren Screens Scrollbalken erzeugt.

Ein Layout, dessen Dimensionen im Prozent angegeben sind, wodurch sich die Inhalte proportional zur Fenstergröße anpassen.

Ein Layout mit festen Varianten, das an bestimmten Umbruchpunkten zwischen verschieden Größen “Springt”, sich dazwischen jedoch nicht anpasst.

Es kombiniert die positiven Eigenschaften des adaptiven und fluiden Layouts, indem es Umbruchpunkte nutzt und Inhalte zwischen diesen fließend anpasst.

Ein unsichtbares Raster aus Linien, an denen Gestaltungselemente wie Bilder und Buttons ausgerichtet werden, um ein strukturiertes Layout zu schaffen.

Ein früher weitverbreitetes statisches Raster mit einer Breite von 960 Pixeln, das für feste Layouts verwendet wurde.

Weil sie sich nicht an verschiedenen Bildschrimgrößen anpassen und entweder Platz verschwenden oder Scrollbalken.

Durch die Verwendung von Prozentwerden anstelle von festen Pixelwerten, um eine felxible Anpassung an verschiedene Screen-Größen zu ermöglichen.

Vordefinierte Schwellenwerte, an denen das Layout der Website wechselt, um sich an verschiedene Bildschirmgrößen anzupassen.

Adaptiven Layouts ändern sich nur an festen Breakpoints, während responsive Layouts Inhalte zwischen den Breakpoints fließend anzupassen.

Höhere Felxibilität und bessere Nutzung des verfügbaren Platzes auf allen Bildschirmgrößen

Media Queries in CSS.

Sie ermöglichen es, je nach Bildschirmgröße unterschiedliche CSS-Styles zu laden und das Layout entsprechend anzupassen.

Sie erlauben es, verschiedene LAyouts für unterschieldiche Bildschirmgrößen bereitzustellen und Inhalte optimale darzustellen.

HTML ( Hypertext Markup Language)

Strukturiert die Inhalte einer Website und ermöglicht Verlinkungen zwischen Dokumenten

Css (Cascading Style Sheets)

Definiert das visuelle Design von HTML-Inhalten, einschließlich Layouts, Farben und Schriftarten.

HTML strukturiert die Inhalte, während CSS für das visuelle Erscheinungsbild sorgt und Anpassungen für verschiedene Bilschrimgrößen ermöglicht.

Um Nutzenden auf verschiedene Endgeräten ein einheitliches Nutzungserlebnis zu bieten und die Usability zu verbessern.

Die ERstellung felxibler Layouts, die Anpassung von Inahlten an verschiedenen Geräten und die optimale Nutzung des verfgbaren Platzes.

Der sichbare Bereich einer Website auf einem bestimmten Bildschirm, der durch Media Queries gezielt angepasst werden kann.