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.
Be Water my Friend

Design als Fluss

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 Designprinzipien 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 Formlosigkeit zu lernen.
© Bruce Lee «Be Water my Friend»
1
Bedingungen

Responsive Logik

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
Was wissen wir?

Identität des Formats

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

Responsive

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.

Percentages: Ein Element nimmt sich 0-100 % des Platzes, in dem es eingebettet ist.

Relative: Die Grösse steht im Verhältnis zu einer Basisgrösse. Mit .em statt in absoluter Grösse.

View Height (VH) & View Width (VW):  

Sie richten sich nach der Screengrösse. 100 vh entspricht 100 % der Bildschirmhöhe des jeweiligen Gerätes. Diese relative Grösse hat enorme Power. Besonders im Bezug aufs responsive Design.

Min. und Max: 

Es gibt Elemente die je nach Inhalt grösser werden auf kleiner Screens, sodass eine fixe Höhe oder breite nicht mit dem Inhalt mitgehen kann.

So können wir Elemente mit Min. oder Max. Grössen versehen, um dem Inhalt seinen gewünschten Platz zu geben.

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.
Differenzen des Gleichen

Media Queries

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

Media Queries - Die Möglichkeiten

Es gibt verschiedene Media-Types die angesprochen werden können.

Media Type Values

all (default)

Um alle Media-Types anzusprechen.

print

Wird für das Print-Styling genutzt.

screen

Wird für alle Devices von Mobile, Tablet oder Desktop genutzt.

speech

Wir für Screenreaders genutzt, welche Seite vorlesen.

Media Type Features

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

width

Pro Viewport / Device Breite können spezifische CSS-Properties angewendet werden.

min-width

Definiert die Mindestbreite für spezifische CSS-Properties

max-width

Definiert die maximale Breite für spezifische CSS-Properties

orientation

CSS Properties können für die verschiedenen Handhabungen der Devices angepasst werden. Also ob ein Mobile quer (landscape) oder hoch (portrait) gehalten wird.

resolution

CSS-Properties die auf spezifische Bildschirmauflösungen reagieren. Kann auch mit max- und min-resolution angegeben.

aspect-ratio

CSS Properties die auf ein spezifisches Seitenverhältnis reagieren. Kann auch mit max- und min-aspect-ratio angegeben werden.

Kombinationen

Es ist möglich und teilweise sinnvoll, diese Media Features und Media Types zu kombinieren.

and

Verbindet zwei Media-Queries miteinander.

comma-separated lists

Ermöglicht es eine der definierten Bedingungen zu nehmen und nicht alle (and).

not

schliesst spezifische Features oder Types aus.

only

Reduziert die Properties aus spezifische Types oder Features.

Design abhängig

Breakpoints

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 nach der dazu passenden Devicegrösse benannt.

Nochmals. Das Design definiert den Breakpoint. Nicht der Device.

DIagramm von Breakpoints für die verschienden Devices.
DIagramm von Breakpoints für die verschienden Devices.
11
Satzspiegel fürs Web

Grids

Grids sind Satzspiegel die sich repetieren. Ein Raster (Webstandard ist 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 Grids 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

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

Unsere Ausgangspunkte

Referenz Design

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

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

Wir benötigen mindestens ein Mobile (portrait), sowie ein Desktop Referenzdesign (Mehr Budget oder Zeit ermöglichen auch noch Mobile (landscape) sowie Tablet (landscape und portrait). 

Die Gestaltung eines Referenz-Design 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

Flexible Bildgrössen

Responsive Images

Responsive Images haben eine relative Breite und werden auf verschiedene Devices unterschiedlich aufbereitet.

Verschiedene Aspekte müssen berücksichtigt werden, um mit responsive Images zu gestalten.

Von der relativen Grösse, über das Device-Rendering zur Pixelauflösung über Aufbereitung sowie File-Typen muss vieles berücksichtigt werden.

Ein Überblick gibt es hier

Grafische Tabelle mit vier Bildern (Rechtecke von A-D) in einfacher Auflösung (1x) welche in doppelter Auflösung (2x) und dreifacher Auflösung (3x) skaliert werden.
© Webdesign Essentials
Grafische Tabelle mit vier Bildern (Rechtecke von A-D) in einfacher Auflösung (1x) welche in doppelter Auflösung (2x) und dreifacher Auflösung (3x) skaliert werden.
Aspekte für Responsive Images

Relative Size

Bilder sollten, wenn immer in Prozent (%) oder (EM) in ihrer Breite (Default) oder Höhe definiert werden.

Device Rendering

Bilder sollten für die spezifische Ausdehnung pro Device gerendert werden, um Ladezeiten möglichst akkurat zu halten. Die meisten Site-Builder/CMS rendern Bilder automatisch auf die jeweiligen Devices.

Pixeldensity

Bilder sollten für verschiedene Bildschirmauflösungen aufbereitet sein. Manuell wird dies mit den Endungen @2x und @3x gemacht.

Performance

Bilder sollten schnell laden. Ihre Grösse wird bei dem meisten Web-Tools auf 2-4 MB beschränkt. Umso kleiner eine Datei umso schneller ist die Webseite.

Aufbereitung

Abklärung

Zuerst abklären, in welcher Art das gewünschte Bild gerendert wird. Gibt es ein CMS-Script oder Tool, welche das Resizing automatisch macht, oder müssen die Bilder manuell für die Programmierung aufbereitet werden. Welche Versionen und Auflösungen.

Maximale Grösse

Der Designer muss vor allem die maximale Grösse definieren. In welcher Grösse und Qualität soll ein Bild auf dem neusten Hi-Resolution-Bildschirm haben. z. B. Ein 5K 27" Bildschirm hat eine Pixelauflösung von ca. 5120 x 2880 Pixel.

Ein für Bandwidth (Performance) und Bildschirmauflösung (Screenresolution) adäquate maximal Grösse ist um die 2500 Pixel (Maximale Breite oder Höhe).

Formate

Es gibt verschiedene Webformate für Bilder.

JPG

Ideal für Fotografien oder Grafiken mit komplexeren Bildmuster.

GIF

Ideal für Grafiken mit einfachen Formen. Maximal 256 Farben.

Können Animationen enthalten und ist populär bei Memes

PNG

Ist eine Weiterentwicklung des GIFs und erlaubt zusätzlich Transparenz.

PNG-8 (8Bit = 256 Farben)

PNG-24 (24Bit = 16.777216 Millionen Farben)

SVG

Sind Vektor basierte Bilder. Somit Vektorgrafiken bestmöglich mit SVG einbinden, da SVG extrem kleine Datenfiles erstellt.

SVG können ebenfalls Animation enthalten und per Code gezielt angesteuert und manipuliert werden.

THE Big Picture

Design Analyse

Von Oben nach Unten 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.

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

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.

Clever Planing

Design Umsetzung

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, kleine Mikrolayout Margins und Paddings können auch mit Pixel definiert werden.

Wichtig ist der Unterschied zwischen VH/VW sowie Prozent als relative Werte. VH/VW richtet sich nach der Screen-Grösse, während Prozent sich nach der Layout-Grösse (Inhalt und Verschachtelung) richtet.

Ziel ist es, die Layout-Parameter so zu definieren, um möglichst wenig Code zu produzieren. Dies auch im 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.

Wie geht das nun?

Responsive Logik

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.