Webseiten sind alle als Textfluss aufgebaut. Code ist nichts anderes als Text. Die visuelle Darstellung und Interpretation für Menschen dieses Textflusses 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.
Um wirklich eine responsive Webseite zu haben, gilt folgender Grundsatz pro Webpage.
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.
Lernen wir nun den Umgang mit der Formlosigkeit.
Das Format im Webdesign ist flexibel. Wir wissen dennoch zwei wichtige Aspekte.
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 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. 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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
Media Queries | Breakpoints | Grid
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.
@media only screen and (max-width: 500px)
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%.
W3 Schools Media Queries (Media Rules)
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 ganze Liste an Features auf W3schools.com hier eine Auswahl zum Einstieg.
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.
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.
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.
«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
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.
So wird in der Umsetzung viel Flexibilität gegeben.
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.
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.
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.
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.
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.
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.
Eine anspruchsvolle Reise durch eine sich ständig wandelnde Welt mit vielen Herausforderungen, die es zu meistern gilt. Die Veränderungen betreffen nicht nur die Technik, sondern auch die Art und Weise, wie Inhalte erstellt und organisiert werden. Lass uns eintauchen.
Möchtest du Google Analytics mit anonymisierter IP-Adresse zulassen?
