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.
Und alles wird anders.

Alles ist editierbar

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

Wichtig

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

Text Overflow

Variabler Text

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

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 Textoverflow umgehen kann.

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

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

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.

Wenn Texte zusammen finden

Text zu Text

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

Responsive Images

Umgang mit Bilder

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)

Refresh-Link: responsive Images

© 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 Responsive Image

Fixed Ratio

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. (No crop)

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
Verlinkungen

Multiple Bildverwendungen

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

Bildverlinkungen via Teaser

Viele Webseiten arbeiten mit Teaser, um auf andere Inhalte zu verweisen. Viele dieser Teaser besitzen Bilder und diese Bilder sind meistens die Originalbilder aus 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 als Inline-Image mit Alt-Tag versehen sein.

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.

Flexible Images

Variables Verhältnis

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

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.

Die Königsdisziplin

Variable Bild-Text-Kombi

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 diese Class/Container (z. B. Blog-Teaser-Box) gelten und nicht pro Content-Element (z. B. spezifischer Blogeintrag) 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.

Business as usual

Bildkuration

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.

Gif-Animation von den klassischen Business-Bilder.
Die Klassiker unter den Businessbilder. Handshake. Wassertropfen. Sustainability.
Gif-Animation von den klassischen Business-Bilder.

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.