Responsive Web Design (RWD) - digitalideation/studio_web1_2024 GitHub Wiki

Anmerkung zum Inhalt:
Die Bilder und Texte im vorliegende Kapitel stammen zu wesentlichen Teilen aus der Website Webdesign Essentials von Boris Périsset und wurden vom Autoren freundlicherweise zur Verfügung gestellt.

Was bis vor einigen Jahren noch als «Feature» angesehen werden konnte, ist heute in den meisten Fällen eine Selbstverständlichkeit geworden. Ist eine Website auf einem Smartphone nicht oder nur umständlich bedienbar, löst das im besten Fall ein Stirnrunzeln aus oder sie wird, vermutlich die Regel, schleunigst wieder geschlossen und nach einer Alternative gesucht.

Responsive Design im Zusammenhang mit der Gestaltung von Inhalten im Webkontext ist weit mehr als eine «Anpassung» von Layouts und Stylings auf unterschiedliche Ausgabeformate. Viel mehr geht es dabei darum, den Umgang mit der Formatlosigkeit zu erlernen.

--

Die Aussage, dass heute sämtliche Inhalte im Web auf allen verfügbaren Geräten zugänglich sein soll, wäre zu kurz gegriffen. In erster Linie geht es darum zu verstehen, an wen wir unser Produkt richten bzw., wer unsere Benutzer sind, was diese im Sinn haben und wie wir ihren Bedürfnissen und Erwartungen gerecht werden können. Dabei kommt es in der Praxis durchaus vor, dass für gewisse Applikationen kaum Zugriffe von einem Smartphone oder Tablet aus zu erwarten sind. Umgekehrt gibt es wiederum solche, die sich insbesondere an kleine, mobile Ausgabegeräte fokussieren.

In den meisten Fällen aber müssen wir uns aus Gründen der User Experience (UX) vom Gedanken an fixe Formate lösen und versuchen, das Design an unsere Inhalte auszurichten und diese als dynamisches, fluides Element zu betrachten, welches es darzustellen und interpretierbar zu machen gilt.

Es ist undenkbar, für alle erdenklichen Devices und Ausgabeformate verschiedene Versionen der Code-Base anzulegen. Nicht nur in finanzieller Hinsicht sondern auch aus Gründen des Unterhalts. Die definierte HTML-Struktur (HTML-DOM) soll sich auf allen Devices durchziehen. Ändert die HTML-Struktur, muss dies mit CSS-Grid oder Javascript überbrückt werden.

--

Das Format im Webdesign ist flexibel. Wir wissen dennoch zwei wichtige Aspekte.

Die flexible Breite
Die Breite wird durch den jeweiligen Device definiert. Da wir nicht alle Device-breiten kennen, müssen wir auf die Breite mit prozentualen Proportionen reagieren. Die Breite ist der dominante Teil, die Höhe reagiert auf die Breite und verdrängt den Inhalt nach unten.

Die flexible Höhe
Die Höhe wird durch den Inhalt sowie die gegebene Breite definiert. Webseiten bauen auf unserer Lese-Logik auf. Statt zu blättern wird alles untereinander gereiht oder dann weiter verlinkt.

--

Da wir die Flussbreite nicht kennen, müssen wir in proportionalen Verhältnissen denken statt in fixen Grössen. Relative Werte werden meist in einer prozentualen Form wieder gegeben. Entweder von Null bis Hundert oder dann von Null bis Eins (mit Kommas).

Ein Element nimmt sich 0-100 % des Platzes, in dem es eingebettet ist. Wichtig dabei zu merken ist Folgendes: Es ist wie beim Parent-Child Prinzip.

Parent basiert:
Der Parent ist dabei das Ganze und darin sind die Child-Elemente, die sich ihren Platz nehmen. Nicht immer ist der «Parent», also die 100% klar ersichtlich. In den meisten Fällen ist der Prozentwert in der Abhängigkeit der HTML-Verschachtelung. Also ein Layout basierter Wert.

Er kann aber auch durchaus eine Schriftgrösse oder eine andere Abhängigkeit sein.

Relative Werte sind das A und O für eine responsive Designlogik. In CSS stehen uns diverse Optionen als Grundlage für unsere relationale Gestaltung zur Verfügung:

• Relation zum Browserfenster
• Relation zur (Standard-)Schriftgrösse
• Minimale und maximale Werte
• Relation zur Bildschirmgrösse (Media Queries)
• Rastersysteme (Grids)

--

Damit sich der Wert vom Layout basiertem Prozent unterscheidet, wird die Prozentzahl als 0-100vw oder vh angegeben.

Insbesondere der vw-Wert (dominante Breite) ist spannend fürs responsive Design, da er dramatisch auf die Grössenunterschiede des Viewports reagiert. Zu merken ist auch, dass alle relativen Werte an unzähligen Stellen eingefügt werden können. z. B. 10vw als Höhenabstand zwischen zwei Elementen.

--

Die Werte em und rem (Root-em) sind ebenfalls relative Werte und beziehen sich auf die definierte Schriftgrösse (font-size) des Eltern-Elements (em) bzw. der im Root (html) definierten Standard Schriftgrösse (rem):

Der em-Wert kann und soll nicht nur als Schriftgrösse herhalten. So kann die Schriftgrösse als Referenz auch für Abstände (z.B. Margin und Paddings), Distanzen von relativ positionierten Elementen oder anderen Layout bedingten Abhängigkeiten mit der Schriftgrösse genutzt werden.

Der Root-em behält immer die HTML-Font-Size (Default 16px) als Standard-Wert und somit kann sein Wert nicht vererbt werden. Die Font-Size des HTML/Body kann aber sehr wohl auf verschiedenen Media-Queries unterschiedlich gross sein.

em-/rem-Werte sind sinnvoll, da sie ihre Grösse proportional zu ihrer Basis verändern. Stellt man also die Basis um (z.B. bei Media Queries oder via Browsereinstellung), verändern sich die Grössen proportional zur Basis mit.

--

Je nach Viewport brauchten Elemente mehr oder weniger Raum. Damit man auf diese Layout-Bedürfnisse eingehen kann, kann man eine Mindestgrösse oder Maxmimumgrösse für ein Element definieren.

Beispiele:

Mindesthöhe:
Wenn auf Desktop der Inhalt kleiner als das gewünschte Layout, aber auf Mobile der Gleiche Inhalt grösser als der Viewport wird, ist braucht man die responsive Höhen Angaben. Min-Height. z.B. min-height: 100vh.

‍Maxmiale Breite:
Möchte man, das gewisse Layouts oder Bilder nicht überdimensional gross haben, wenn man das Layout auf einem 5K Bildschirm anschauen würde, so kann man das Layout mit einer maximalen Breite versehen. Dabei dürfen Layout-Teile kleiner sein, aber nie grösser. z.B. max-width: 1920px.

--

Mittels Media Queries können wir einem Element (Class) verschiedene Zustände (Values und Features) pro Medium (Device, Screen, Print) zusprechen.

Je nach Design ändern sich die Verhältnisse pro Device. Mit den Media Queries definiert man CSS-Properties für die neuen Verhältnisse.

Beispiel
@media only screen and (max-width: 600px) {
    column {
        width: 50%;
    }
}

Dies immer nur dann, wenn das Styling und/oder das Layout sich verändern soll.

Es gibt verschiedene Media-Types (Medien Typen) die angesprochen werden können. Standardmässig werden alle angesprochen, aber man kann zwischen print, screen und speech als «Media Type Values» unterscheiden.

Dazu kommen die Features zu den jeweiligen Values. Diese spezifizieren ein Medium (Media Type) noch genauer. Also z. B. die Breite eines Device oder die Orientierung (Portrait, Landscape) oder das Seitenverhältnis, die Bildschirmauflösung etc.

Im CSS können beliebig viele Media Queries definiert werden.

--

Um die unterschiedlichen Grids oder Layouts anzuwenden, wird der Punkt für die Media Queries definiert. Dieser Punkt heisst Breakpoint und richtet sich nach dem Design. Dennoch wird er meist nach der dazu passenden Devicegrösse benannt.

Aber nochmals. Das Design definiert den Breakpoint. Nicht das Device.

--

Grids sind Satzspiegel die sich repetieren. Ein Raster (Webstandard war ein 12er-Raster für Desktop) welches sich auf die jeweilige Screengrössen herunterbricht.

Zwölf, weil dies eine gut teilbare Zahl ist und somit eine grosse Vielzahl an Satzspiegeln auf kleineren Devices eröffnet.

Layout-Relevanz:
Grids sowie Satzspiegel werden erst wirklich relevant, wenn die Komplexität des Inhaltes dies erfordert. Man kann durchaus einfachere Webseiten ohne Satzspiegel gestalten und je nach Situation ein Layout definieren. Grids können in einem Team aber helfen, die Gestaltungskonventionen anzuwenden, was die Konsistenz einer Seite erhöht.

Vokabular:

«Column» für die vertikalen Spalten.

«Row» für die horizontalen Spalten (nicht oben abgebildet)

«Gutter» für den Abstand zwischen den Spalten.

«Offset» für den Startpunkt des Rasters

--

Dieser relative Wert ist für die Display-Setting «Grid» vorgesehen. So lassen sich Einheiten einfach bilden, Pro Zeile eines Grids werden die Fractions gezählt und dies ergibt das Ganze (100%).

‍

Für Designer ist es eine schlaue Art, Layouts zu beschreiben, auch wenn nicht alles mit einem «Grid» umgesetzt wird. Es erspart genaues berechnen von Verhältnissen und ermöglicht es rascher und gleichzeitig präziser ein Layout zu vermessen.

• Web Design Essentials (Boris Périsset, ehrenamtliches Web-Projekt)
• The fundamentals of responsive web design (Tristan Le Breton, 99designs Blog)
• W3 Schools – Media Queries (Media Rules)