Loading...
Variabler Inhalt
Work in Progress

Variabler Inhalt

Nicht nur die Form ist im Web responsive, sondern auch der Inhalt. Ein Kapitel über die Herausforderung für alle Fälle eine gute Lösung bereitzuhalten.

Alles ist editierbar

Und alles wird anders.

Webseiten ändern die Inhalte im Laufe der Zeit. Darum haben auch wir CMS-Systeme. Wir können stetig am Inhalt arbeiten.

Dies gehört genauso zum Webdesign wie viele andere Aspekte auch.

Für Designer*innen stellen diese stetigen Veränderungen eine grosse Herausforderung dar. 

Es ist die zweite fundamentale Komponente des Responsive Design. Der variable Inhalt.

Hier ein paar Strategien für den bestmöglichen Umgang.

GIF-Animation bei der von einem Dunklen Bild mit kurzem hellem Text auf ein helles Bild mit hellem langen Text gewechselt wird.
© Webdesign Essentials
GIF-Animation bei der von einem Dunklen Bild mit kurzem hellem Text auf ein helles Bild mit hellem langen Text gewechselt wird.
1

Randnotiz

Nutzt der Kunde einen H4-Titel im CMS-Richtext-Editor. Ein H4 Titel, der noch nie gestylt wurde, weil er im Design nicht vorkam. So ist nicht der Kunde schuld!

Variabler Text

Text Overflow

Grundsätzlich müssen wir Text so einplanen, dass die Textmenge sich immer ausdehnen kann. Dass also jegliche Länge, kein Überlagern oder Überlappen von anderen Inhalten bewirkt.

Soweit der Grundsatz.

Aber es gibt zwei Möglichkeiten dem entgegenzuwirken.

1. Text-Schulung

Es lohnt sich mit den Menschen, welche den Inhalt auf der Webseite erfassen über Text- und Wortlängen und Web-Typografie zu sprechen. So kann schon vieles verhindert werden. 

Zu wissen wo, welcher Text, in welcher Länge sinnvoll ist, ist eine umfassende Aufgabe die Funktionalität, SEO und Inhaltsstrategien vereint.

2. Text-Overflow Nutzen

Wenn ein Parent-Container seinem Inhalt nicht mehr Platz geben kann (...) und somit der Inhalt aus dem Layout bricht, so regeln die Overflow Einstellungsmöglichkeiten das Verhalten.

Verschiedene Textlängen für eine «Teaser-Text-Box» um die visuellen Schwierigkeiten zu zeigen.
Verschiedene Textlängen für eine «Teaser-Text-Box» um die visuellen Schwierigkeiten zu zeigen.
2

Weiterführende Inputs

Worttrennungen oder Themen zu den Möglichkeiten vom Einsatz von Typografie im Web gibt es hier.

Web-Typografie

Text Overflow Einstellungen

Es gibt Einstellungen wie man mit Text-Overflow umgehen kann.

Doch damit dies funktioniert muss der Container bereits folgende CSS-Properties haben:

overflow: hidden; Schneidet den Text beim Box-Ende ab.

overflow: scroll; ermöglicht das scrollen innerhalb des Parent-Containers.

white-space: nowrap; Macht, dass der Text in der Textbox nicht selbstständig bricht, sondern auf einer Zeile weiterläuft.

Text-Overflow

Ellipsis: Schneidet den Text ab und ersetzt ihn mit (...) den drei Punkten.

Clip: Schneidet den Text beim letzten ganzen Buchstaben vor Box-Ende ab.

Text zu Text

Wenn Texte zusammen finden

Besonders in Übersichten von Inhalten wird man als Gestalter*in gefordert.

Es gilt gute Layouts für alle Arten von Content zu generieren. Keine einfache Aufgabe. 

Dabei kann man sich Inhaltsbezogen verhalten und jedem Objekt seinen Raum zusprechen oder am grössten Inhalt anpassen oder Layouts bezogen Inhalte abschneiden.

Wichtig ist vor allem, dass man sich dieser Problematik bewusst ist.

Dies kann man während der Gestaltung relativ gut abfangen, in dem man bewusst verschiedene Titellängen während der Gestaltung setzt.

Verschiedene Textboxen in verschiedenen Textlängen sowie verschiedene Layout-Möglichkeiten.
© Webdesign Essentials
Verschiedene Textboxen in verschiedenen Textlängen sowie verschiedene Layout-Möglichkeiten.
4

Bilderklärung

Das Schema zeigt verschiedene Optionen von Textlängen die in einer Beziehung zueinander stehen.

Umgang mit Bilder

Responsive Images

Egal ob Fotografien, statische Infografiken oder Illustrationen, Bilder können in zwei Möglichkeiten vorhanden sein.

Fixes Seitenverhältnis

Bilder, bei denen die gesamte Bildfläche von Bedeutung ist und nichts weggeschnitten werden darf, sollten mit fixen Seitenverhältnissen arbeiten.

Inhaltliche Bilder sind im HTML gesetzt (img-Tag)

Variable Seitenverhältnis

Bilder, die einen Umraum besitzen und einen klaren Fokuspunkt, können mit variablen Seitenverhältnissen arbeiten. Dies ermöglicht mehr Gestaltungsoptionen sowie Einsatzgebiete für die Bilder.

Hintergrund Bilder sind im CSS gesetzt (background-image CSS-Property).

Mittels der «Object-Fit» CSS Property können reguläre Bilder, gleich wie Hintergrundbilder eingesetzt werden.

© Webdesign Essentials
5

Video Erklärung

Beim Team-Bild sollten alle Menschen immer ersichtlich sein, bei der Landschafts ist dies nicht zwingend notwendig. Der kurze Clip zeigt dieser grundlegende aber essentielle Unterschied.

Fixed Ratio

Fixed Responsive Image

Ein fixes Bildverhältnis sollte sich immer in der Grösse des Containers anpassen, also ein responsive Image sein.

100 % width statt 650px und das Seitenverhältnis nicht ändern.

Für die Bildkuration ist dies der Standardfall. Die Bildkuration muss nur noch wissen, welches Seitenverhältnis (Aspect-Ratio) und ob es ein Hoch- oder Querformat ist und kann auf Bildsuche gehen.

Eigentlich...

Bild des FC Zürich Fussballteams. Ein Bild wo bestmöglich kein Spieler abgeschnitten werden sollte.
© FCZ
Bild des FC Zürich Fussballteams. Ein Bild wo bestmöglich kein Spieler abgeschnitten werden sollte.
6

Responsive Images

Flexible Bildgrössen

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

Aspekte für Responsive Images

Relative Grösse

Bilder sollten, wenn immer in Prozent in ihrer Breite (Standard) oder Höhe definiert werden. Niemals beide Seiten mit Prozent versehen (dann verhaut es das Ratio).

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 Viewport-Grössen herunter.

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 den meisten Web-Tools auf 2-10 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 Bild mit idealer Performance und adäquater Bildschirmauflösung ist um die 2500 Pixel (Maximale Breite oder Höhe). Ausser alle Facetten können vom CMS abgefangen und ideal gerendert werden.

Formate

Es gibt verschiedene Webformate für Bilder.

JPG

Ideal für Fotografien oder Grafiken mit komplexeren Bildmuster.

GIF

Früher 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.

Multiple Bildverwendungen

Verlinkungen

Um zu wissen, ob ein Bild ein fixes Seitenverhältnis hat oder nicht muss man seine Einsatzorte kennen.

Bildverlinkungen via Teaser

Viele Webseiten verweisen mit Teaser auf andere Inhalte. Viele dieser Teaser besitzen Bilder und diese Bilder sind meistens die gleichen Bilder wie auf der Detailseite.

Ist dies der Fall, gibt es bereits 2 Varianten, wie das Bild eingesetzt wird. 2 responsive Varianten. Was schon 4-8 Formate entsprechen könnte.

Dies kann auf komplexeren Seiten schnell noch deutlich mehr sein.

Wir müssen die Verknüpfungen und Anwendungen der Bilder bewusst werden, um eine Antwort auf die Frage nach ihrem Seitenverhältnis geben zu können.

SEO Tipp

Bilder die als Teaserbilder verwendetö werden, können als Background-Images ohne Alt-Text sehr gut funktionieren, aber das Bild auf der effektiven Detailseite sollte mit einem HTML-Image-Tag sowie Alt-Tag versehen werden können.

Schema von 4 Screens die alle mit dem gleichen Bild arbeiten. Das Bild ändert aber in seinem Format und seiner Grösse.
© Webdesign Essentials
Schema von 4 Screens die alle mit dem gleichen Bild arbeiten. Das Bild ändert aber in seinem Format und seiner Grösse.
7

Das Hauptbild

Das Hauptbild einer Detailseite wird oft und sinnigerweise als Teaserbild verwendet. Oder als Open Graph Image, wenn das Bild in den sozialen Medien geteilt wird.

Variables Verhältnis

Flexible Images

Die Planung eines variablen Bildes ist gar nicht so einfach. Aber machbar.

Man sollte vom Design ausgehend die extremsten Seitenverhältnisse ausfindig machen und von dort aus eine flexible Bildzone sowie den Fokuspunkt definieren.

Als Standard, kann man auch mit dieser Formel arbeiten.

Ein Quadrat mit einem Raster um die Fokuszone, Ergänzungszone sowie die Schutzzone für Bilder zu beschreiben.
© Webdesign Essentials
Ein Quadrat mit einem Raster um die Fokuszone, Ergänzungszone sowie die Schutzzone für Bilder zu beschreiben.
8

Diese Logik ist besonders relevant, wenn in einer Bildsituation mehrere Akteure*innen miteinander agieren. Es also nicht nur ein Focal-Point gibt.

Bildaufbau für variable Bildverhältnisse

Das Bild quadratisch planen. Innerhalb der Fokuszone (A) befindet sich der Focal-Point (das inhaltliche Bildzentrum). Die Ergänzungszonen (B) sind für Quer oder Hochformatige Bilder gedacht und die Schutzzone (C) ist nicht inhaltlich relevante Bildinformation.

Der Bezugspunkt kann im Webdesign eingestellt werden. Damit ändert sich auf der Bildaufbau.

Bildaufbau-Optionen

Die Veränderung der Bildkomposition ändert je nach Ausrichtung des Bezugspunktes.

Der Bezugspunkt ist der Ort von wo aus sich ein variables Bild verändert. Ist es Mittig-zentriert, sollte sich das Geschehen im Bild auch zentrieren.

Gewisse CMS-Systeme lassen je nach Bild den Focal-Point als Bezugspunkt markieren.

Variable Bild-Text-Kombi

Die Königsdisziplin

Wenn Bild und Text aufeinandertreffen, kann extrem viel passieren.

Besonders, wenn man (nach dem Launch) nur mit dem CMS arbeitet und kein «Styling» pro Inhaltsobjekt vornimmt.

GIF-Animation bei der von einem Dunklen Bild mit kurzem hellem Text auf ein helles Bild mit hellem langen Text gewechselt wird.
Webdesign Essentials
GIF-Animation bei der von einem Dunklen Bild mit kurzem hellem Text auf ein helles Bild mit hellem langen Text gewechselt wird.
9

Bild-Text-Kombo Probleme

Priorität

Wir müssen für die Bild-Text-Kombination aus dem Kontext des Inhaltes entscheiden, ob im Zweifelsfalle der Text oder das Bild mehr Priorität hat. Dies muss als allgemeine Regel für dieses Element (z. B. Blog-Teaser-Box) gelten und nicht pro Inhalts-Element (z. B. spezifisches Bild eines Blogeintrages) jeweils neu entschieden werden.

Textlänge

Text-Boxen in Bildern sollten flexible die Wortlänge adaptieren. Gleichzeitig muss eine max. Limite definiert werden. Besonders auf Mobile-Devices ist die Textlänge eine Platzfrage im Bild. Oft wird dann das Bild und der Text separiert.

Kontrast

Die Textfarbe ist in der Regel gegeben. Bilder können aber jegliche Tonalität aufweisen. Daher muss sichergestellt werden, dass die Lesbarkeit des Textes gegeben ist.

Entweder wird ein unauffälliger Schlagschatten (im Kontrast zur Textfarbe) hinter den Text gelegt oder das ganze Bild kriegt einen Farbverlauf (meist von Schwarz/Weiss in die Transparenz).

Platzierung

Wenn wir mit Bilder mit variablen Seitenverhältnissen arbeiten, muss sichergestellt werden, dass der Text und das Bild sich nicht zu stark in die Quere kommen. Es löst die Frage nach der Priorität aus oder die Textplatzierung definiert für alle zukünftigen Bildern in welchem Bereich das Bild nicht-essentielle Bildinformation hat und den Text nicht stört.

Focal-Point & Responsiveness

Der Focal-Point ist der Punkt im Bild wo die Aufmerksamkeit und die Botschaft des Bildes am stärksten konzentriert wird. Besonders auf Mobile-Devices buhlen Bilder und Texte um ihren Platz. Der Entscheid, welcher Aspekt entscheidender ist, muss von der Informations-Architektur gefällt und vom Design gelöst werden.

Bildkuration

Business as usual

Während eines Webseiten-Lebens kann so einiges passieren mit dem Inhalt einer Webseite.

Die ersten schönen Fotoshooting-Bilder können billigen Stockimages weichen und so auch das schönste Layout zunichtemachen.

Für jedes Projekt gilt es zu klären, mit welchen Bildern gearbeitet wird und wie die Zukunft der Bildkuration geplant ist. So lassen sich bereits viele Fragen klären und die Bebilderung optimieren.

Das Augenmerk auf variable Inhalte lohnt sich.

Es ist die zweite Responsiveness im Webdesign.

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