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.
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!
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.
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.
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.
Worttrennungen oder Themen zu den Möglichkeiten vom Einsatz von Typografie im Web gibt es hier.
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.
Ellipsis: Schneidet den Text ab und ersetzt ihn mit (...) den drei Punkten.
Clip: Schneidet den Text beim letzten ganzen Buchstaben vor Box-Ende ab.
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.
Das Schema zeigt verschiedene Optionen von Textlängen die in einer Beziehung zueinander stehen.
Egal ob Fotografien, statische Infografiken oder Illustrationen, Bilder können in zwei Möglichkeiten vorhanden sein.
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)
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.
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.
Ein fixes Bildverhältnis sollte sich immer in der Grösse des Containers anpassen, also ein responsive Image sein.
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.
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
Responsive Images W3school
Responsive Image Generator
Image File Types - Sitepoint.com
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).
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.
Bilder sollten für verschiedene Bildschirmauflösungen aufbereitet sein. Manuell wird dies mit den Endungen @2x und @3x gemacht.
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.
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.
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.
Es gibt verschiedene Webformate für Bilder.
Ideal für Fotografien oder Grafiken mit komplexeren Bildmuster.
Früher ideal für Grafiken mit einfachen Formen. Maximal 256 Farben.
Können Animationen enthalten und ist populär bei Memes
Ist eine Weiterentwicklung des GIFs und erlaubt zusätzlich Transparenz.
PNG-8 (8Bit = 256 Farben)
PNG-24 (24Bit = 16.777216 Millionen Farben)
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.
Um zu wissen, ob ein Bild ein fixes Seitenverhältnis hat oder nicht muss man seine Einsatzorte kennen.
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.
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.
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.
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.
Diese Logik ist besonders relevant, wenn in einer Bildsituation mehrere Akteure:innen miteinander agieren. Es also nicht nur ein Focal-Point gibt.
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.
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.
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.
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.
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.
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).
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.
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.
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.
Es ist die zweite Responsiveness im Webdesign.
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?
