Loading...
Responsive Design
Work in Progress

Responsive Design

Gestalten mit der Logik des Codes. Vergiss die Device-Grössen. Vergiss das Format. Es ist nicht relevant. Es existiert nicht. Nur das Design ist da.

Design als Fluss

Be Water my Friend

Webseiten sind alle als Textfluss aufgebaut. Code ist nichts anderes als Text. Die visuelle Darstellung und Interpretation für Menschen dieses Textflusses (der Code) ist unsere Aufgabe.

Wir müssen lernen, den Inhalt mit unseren Designangaben in Wasser zu verwandeln. So kann der Inhalt in beliebige Gefässe fliessen und sieht immer gut aus.

Responsive Design heisst nicht ein Webdesign für Desktop, Tablet und Mobile zu erstellen, sondern den Umgang mit der Formatlosigkeit zu lernen.

© Bruce Lee «Be Water my Friend»
1

Responsive Logik

Bedingungen

Um wirklich eine responsive Webseite zu haben, gilt folgender Grundsatz pro Webpage.

Ein HTML-File für alle Devices

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.

Ein File pro Seite heisst auch eine Code-Basis. Dies bedeutet weniger und einfacherer Unterhalt.

Zudem bleibt so der Inhalt auf allen Devices gleich. Davon profitieren User*innen wie auch Content-Manager*innen.

Für Designer*innen bedeutet dies, dass ihre Designs inhaltlich sowie optisch konsistent sein sollten.

Lernen wir nun den Umgang mit der Formlosigkeit.

Drei Screens. Ein Handy, ein Tablet und ein Desktop. Als Referenz, dass alles auf einem HTML File aufbaut.
© Webdesign Essentials
Drei Screens. Ein Handy, ein Tablet und ein Desktop. Als Referenz, dass alles auf einem HTML File aufbaut.
2

Identität des Formats

Was wissen wir?

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.

Diagramm um zu zeigen, dass sich die Breite durch das Gerät definiert und die Höhe sich durch den Inhalt ergibt. Die Breite als Dominanter ist.
© Webdesign Essentials
Diagramm um zu zeigen, dass sich die Breite durch das Gerät definiert und die Höhe sich durch den Inhalt ergibt. Die Breite als Dominanter ist.
3

Responsive

Flow

Da wir die Flussbreite nicht kennen. Müssen wir in proportionalen Verhältnissen denken statt in fixen Grössen. Also unser Layout dementsprechend analysieren und interpretieren.

Relative Werte werden meist in einer prozentualen Form wieder gegeben. Entweder von Null bis Hundert oder dann von Null bis Eins (mit Kommas).

Wireframe von Boxen mit Prozentangaben. Verdeutlicht wird, dass bei der Verschachtelung das «Child» sich immer nach dem «Parent» ausrichtet.
© Webdesign Essentials
Wireframe von Boxen mit Prozentangaben. Verdeutlicht wird, dass bei der Verschachtelung das «Child» sich immer nach dem «Parent» ausrichtet.

Relative Werte sind das A und O für eine responsive Designlogik.

Prozent

%

Prozent ist einfache Mathematik. Man hat das Ganze und bricht es in 100 Teile. Es ist aber die Ausgangslage vieler relativen Werte.

Also Hinterfrage dein Verständnis über Prozent.

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.

Layout basierter Wert

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.

asdasd
@ Webdesign Essentials
asdasd
5

VW und VH

View-Width und View-Height

Die Breite oder Höhe des jeweiligen Viewports in Prozent.

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.

© Webdesign Essentials
6

EM

Relativ zur Schriftgrösse

Der Standard-Wert des EM eines Elementes ist seine Font-Size.

Zentrales Merkmal für die Wertbestimmung ist das Vererbungsprinzip. Ist die Font-Size 1EM wird geschaut, was die Schriftgrösse des Parent-Elementes ist und schlussendlich die Body Font-Size oder HTML Font-Size als Basis genommen.

Der EM Wert 1em ist äquivalent mit 100% des Parent. Wohl, weil viele EM Werte grösser als 100% sind.

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.

© Webdesign Essentials
7

REM

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 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.

fr

Fractions

Fractions ersparen einem das Berechnen genauer Prozentangaben. Der Browser rechnet für uns.

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.

© Webdesign Essentials
8

min und max

Nehmen und Geben

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.

© Webdesign Essentials
9

Wenn das Layout sich ändert, müssen die neuen Layout-Angaben gemacht werden.

Media Queries | Breakpoints | Grid

Media Queries

Differenzen des Gleichen

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: 500px)

Dies immer nur dann, wenn das Design nicht mehr stimmt.

Drei Schemen von Webseiten-Verhältnissen in drei Viewport Grössen. Damit klar wird, das auf unterschiedlichen Grössen verschiedene Verhältnisse angewendet werden müssen.
© Webdesign Essentials
Drei Schemen von Webseiten-Verhältnissen in drei Viewport Grössen. Damit klar wird, das auf unterschiedlichen Grössen verschiedene Verhältnisse angewendet werden müssen.
10

Legende

Gut zu sehen sind die relativen responsiven Grössen. Auch wenn die physische Grösse kleiner wird, muss z. T. die relative Grösse vergrössert werden. Wie hier von 30 % auf 50 % und danach auf 100%.

Links

W3 Schools Media Queries (Media Rules)

Media Queries - Die Möglichkeiten

Es gibt verschiedene Media-Types (Medien Typen) die angesprochen werden können. Standardmässig werden all 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.

Die gesamte Liste

Die ganze Liste an Features auf W3schools.com hier eine Auswahl zum Einstieg.

Breakpoints

Design abhängig

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.

DIagramm von Breakpoints für die verschienden Devices.
DIagramm von Breakpoints für die verschienden Devices.
11

Grids

Satzspiegel fürs Web

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 helfen in einem Team die Gestaltungskonventionen anzuwenden, was die Konsistenz einer Seite erhöht.

Grid-System auf verschiedenen Screengrössen. Von Computer über Tablet, Smartphone zur Watch.
© Webdesign Essentials
Grid-System auf verschiedenen Screengrössen. Von Computer über Tablet, Smartphone zur Watch.
12

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

Referenzdesign

Ein Referenzdesign ist eine Gestaltung auf einem fixen Format. Es dient als Ausgangslage – als Null-Punkt, für die responsive Umsetzung.

Referenz Design

Unsere Ausgangspunkte

Gestaltungsentwürfe werden aus gutem Grund mit Design-Programmen gelöst, die nicht 100 % responsive sind. So sind wir schnell, frei sowie ästhetisch.

Wir arbeiten mit Sketch, Figma, Illustrator oder anderen Design Prototyping Tools und nehmen diese Designentwürfe als Ausgangspunkt für die Webdesign-Umsetzung.

Wir benötigen mindestens zwei Referenzpunkte. Eine Mobile- (portrait), sowie eine Desktop-Referenz.

Mehr Budget oder Zeit ermöglichen auch noch Mobile (landscape) sowie Tablet (landscape und portrait). 

Die Gestaltung eines Referenz-Designs bedingt die Grundkenntnisse einer responsiven Gestaltung.

Diese fixen Layouts werden nicht pixelgenau, sondern prozentual oder als Variable definiert.

So wird in der Umsetzung viel Flexibilität gegeben.

Gestaltungsreferenz einer Webseite mit Vermassungen die in Prozent statt Pixel definiert sind.
© Webdesign Essentials
Gestaltungsreferenz einer Webseite mit Vermassungen die in Prozent statt Pixel definiert sind.
12

Buchtipp von A Book Apart

Responsive Design - Ethan Marcotte

Responsive Design - Book Pack

Design Analyse

THE Big Picture

Von Oben nach Unten, von Aussen nach Innen und von Gross nach Klein.

Wir müssen lernen ein Referenzdesign (Sketch, Illustrator, Handskizze etc.) richtig zu analysieren um die Verschachtelungen, das Boxmodell, die Positionierung sowie die Display-Settings daraus abzuleiten.

Sei es für uns oder fürs Design-Handoff.

Dabei analysieren wir das Design von Aussen nach Innen, also von den grossen Verhältnissen und Abhängigkeiten zu den kleinen.

Wir nutzen unser Wissen über die Webseiten Anatomie und ihren Atomen, Molekülen und Organe.

Zudem versuchen wir die Seite von Oben nach Unten zu lesen um die Ordnung und Hierarchie besser zu verstehen.

Anders als in Layout-Programmen müssen wir lernen die «Parent-Child» Abhängigkeiten zu lesen. Damit können wir vom Parent zum Child die Layout-Parameter definieren.

Eine schematische Darstellung einer Inhaltsbox. Links als Design, rechts als Wireframe. Im Wireframe wird das Design analysiert und die Umsetzung geplant.
© Webdesign Essentials
Eine schematische Darstellung einer Inhaltsbox. Links als Design, rechts als Wireframe. Im Wireframe wird das Design analysiert und die Umsetzung geplant.
13

Tipp

Mir hilft es, mein fertiges Design mit einer Handskizze in seine Bausteine zu zerlegen. Dabei nutze ich ganz grobe Kästchenskizzen um die Verschachtelung und Abhängigkeiten besser zu verstehen und zu kennzeichnen.

Design Umsetzung

Clever Planing

Die verschiedenen Grössen richtig anwenden.

Haben wir das Design analysiert und die Verschachtelung definiert, gilt es zu entscheiden, wo wir welche Grössen einsetzen.

Auch hier arbeiten wir uns von den grossen Layout-Muster zu den kleinen Mikrolayouts hinunter.

Die grossen Verhältnisse sollten in relativen Grössen definiert werden.

Wichtig ist der Unterschied zwischen den unterschiedlichen relativen Werten zu kennen und richtig einzusetzen.

Ziel ist es, die Layout-Parameter so zu definieren, um möglichst wenig Code zu produzieren. Dies auch in Bezug auf das responsive Verhalten.

schematische Darstellung einer Inhaltsbox die auf Desktop horizontal und auf mobile vertikal angeordnet ist.
© Webdesign Essentials
schematische Darstellung einer Inhaltsbox die auf Desktop horizontal und auf mobile vertikal angeordnet ist.
14

Bildlegende

Sind die Layout-Parameter in diesem Beispiel relativ, so müsste man «nur» den Breakpoint definieren, wo die Box von horizontal ins vertikale wechselt. Alle anderen Parameter wären responsiv. Was einfach im Unterhalt ist da weniger Code geschrieben wurde.

Responsive Logik

Wie geht das nun?

Die Logik dieser Design-Möglichkeiten bedingt ein umdenken in der Gestaltung.

Wir arbeiten mit einem System von relativen Proportionen statt exakten Grössen. Wir fokussieren uns insbesondere auf die Layout-Wechsel, da dort unsere Designästhetik besonders gefragt ist.

Wir müssen uns auch den variablen Inhalten bewusst werden. Dies schauen wir im nächsten Kapitel an.

Zum Variablen Inhalt

15

Wir müssen entspannter mit der Präzision der Gestaltung umgehen. 

Wir müssen lernen, die Gestaltung zu dirigieren, statt absolut zu positionieren.

Be water my friend

Das Zusammenspiel all dieser Regeln ermöglicht es, ein perfektes Resultat zu erzielen und vor allem. Das variable Zusammenspiel der verschiedenen Aspekte ist mehr als die Summe aller Teile.

Design Fundamentals

Eine Reise durch eine sich stetig veränderbare Welt. Unzählige Hürden gilt es zu meistern. Die stetigen Veränderungen betreffen nicht nur die technischen Voraussetzungen, sondern der allgemeine Umgang mit Inhalt und Inhaltskuration. Die Veränderung als Ausgangslage für die Gestaltung ist eine komplexe Angelegenheit. Tauchen wir ein.

Scroll Snap
On
Off