Webkrauts

Responsive Webdesign: Probleme mit Blindtext und Platzhalterbildern

Content is lorem ipsum dolor (*hier schönes Foto)

Blindtexte und Platzhalter für Bilder gehören seit Einführung des Desktop Publishings zum festen Bestandteil des Werkzeugkastens aller Layouter und Webdesigner, die Probleme damit ebenso. Was bei fixen Gestaltungsrastern unter Mühen noch in der Endfassung bereinigt werden konnte, sorgt bei responsiven Layouts für gravierende Probleme schon in der Planungsphase.

»Fangen Sie schon mal an, Inhalte folgen zeitnah.« Webdesigner kennen diese Kundenaussagen, mit Beginn der Arbeit ist wohl jeder von uns in der Versuchung, sofort die Bookmarks zu Blindtextgeneratoren und Tools für die Generierung von Platzhalterbildern zu öffnen, wohl wissend, dass »zeitnah« in vielen Fällen mit »unmittelbar vor Online-Stellung« zu übersetzen ist.

Was wir selbst lieben…

Wir alle wissen, dass ohne die finalen Texte und Bilder keine Website freigeschaltet werden kann. Das weiss natürlich auch der Kunde. Leider gibt es immer noch und immer wieder eine Art stille Übereinkunft mit den Kunden, sich zunächst um Design und Frontend zu kümmern. Wäre das nicht so, hätten wir schon zu Zeiten fixer Layouts vehement die Lieferung der Bilder und Texte angemahnt und das auch klar kommuniziert. Es ist für gestaltungsaffine Webdesigner natürlich klasse, ein cooles oder tolles Design zu entwerfen und auch der Frontendentwickler interessiert sich eher für die performante und raffinierte Umsetzung als für die Einbindung von Bildern und Texten. Es hat früher ja auch immer irgendwie alles geklappt, es gab kleine Kollateralschäden im längst umgesetzten Seitenlayout, wenn der Kunde ein paar mehr Fotos zeigen wollte oder die idealtypischen Textinhalte und -mengen erheblich erweitert oder radikal gekürzt hatte. Vielleicht musste man das Gestaltungsraster modifizieren und ein oder zwei DIVs oder Klassen im CSS ergänzen, aber am Ende blieben diese Probleme überschaubar und führten nicht zu einer benutzerunfreundlichen Seite.

Totalverlust der Kontrolle

Mit dem Siegeszug responsiver Webseiten mussten wir viele überkommene und eingefahrene Aspekte unseres Workflows relativieren, vergangenes Jahr hatte ich das hier thematisiert, im diesjährigen Adventskalender beleuchtet Renate Hermanns die Notwendigkeit einer guten Planung und Konzeption. Es war ja nicht so, dass das Wasserfallprinzip früher gut gewesen wäre, aber es erfüllte angesichts fixer und unabänderbarer Parameter der Ausgabe seinen Zweck. Die gravierendste Änderung innerhalb des responsiven Webdesigns ist nun aber der Verlust dieser wichtigen Parameter, die auch eine weitgehend tolerante Nutzung von Blindtexten und Platzhalterbildern ermöglichten. Wir können heute eben nicht mehr vorhersagen, wer welche Inhalte mit welchem Gerät wo nutzen will.

Unser Workflow beruht zumindest im Idealfall darauf, dass sich die Ausgabe primär an den Inhalten orientiert. Jeder Nutzer hat ein Recht, schnell und zuverlässig an die Inhalte zu kommen, die er auf der Webseite erwartet. Der mobile Nutzer möchte, dass die wichtigen Inhalte entsprechend der Relevanz zu sehen sind – dieses unausgesprochene Versprechen muss jede Website einhalten. Technisch gesehen reden wir von hierarchisch lineariserten oder linearisierbaren Inhalten. Die Frage lautet also immer: was sollen wir wo und für wen für welche Bildschirmgößen und Bandbreiten ausgeben?

Das »wie« und »für wen« wird bestimmt durch das »was« der Inhalte. Wir sind damit genaugenommen zur Untätigkeit verdammt, solange keine finalen Inhalte vorhanden sind, die wir in sinnvolle Kategorien ordnen und nach Relevanz der Darstellungsvarianten sortieren. Klar ist nur: Sowohl bezüglich der Bedeutung, als auch bezüglich der Auswahl und Menge haben Blindtexte oder Platzhalterbilder keinerlei Relevanz und bieten auch keinerlei Anhaltspunkte für eine nutzerorientierte Darstellung der finalen Inhalte. Wenn wir aber schon in der Planungsphase nicht wissen, was am Ende an tatsächlichem Inhalt kommuniziert werden soll, können wir auch keine Strategie entwickeln, welche Teile dieser Inhalte auf unterschiedlichen Ausgabegeräten für eventuell unterschiedliche Nutzergruppen und vielleicht auch mittels unterschiedlicher Aktionen optimiert, hervorgehoben, versteckt oder modifiziert werden müssen. Jeder Versuch einer entsprechenden Umsetzung mit inhaltsleerem Füllmaterial gleicht damit einem Blindflug.

Die Tücken moderner Layouts

Auf den ersten Blick erscheinen die Probleme profan und leicht lösbar – beispielsweise, ob finale Fotos nun im Hoch- oder Querformat oder gar gemischt geliefert werden. Die Tücken zeigen sich aber bei der Umsetzung: da gerade moderne Designs auf eine vertikale Abfolge einzelner Layoutmodule mit horizontalen Grids und damit auf begrenzte Höhen einzelner Inhaltslemente zumindest bei größeren Bildschirmen setzen, sind Bildbeschnitte fast immer notwendig, um ungewollte Weissräume zu vermeiden. Hier kommt es dann schnell zu faulen Kompromissen. Ein typisches und nicht selten unlösbares Problem ist auch die Lieferung eines Hochformats mit dem Hinweis »bitte in die Animation im Kopfbereich einsetzen«, da der ensprechende Beschnitt für ein Panoramaformat ungeeignet ist.

Die Stolperfallen der oft sehr designlastigen Gridlayouts gelten ebenso für die Texte. Was als Klickdummy mit Blindtexten noch so wunderbar harmonisch und ästhetisch klar daherkommt, erweist sich dann oft nur noch als Idealbild, sobald die Inhaltselemente mit den gelieferten Texten gefüllt werden sollen. Probleme bereitet dabei nicht nur die Menge, sondern auch die Darstellung zusammenhängender oder klar getrennter Textblöcke, die dann so gar nicht in die dafür angedachten Drei- oder Vierspalter passen wollen und den lesenden Nutzer verwirren.

Gern übersehen werden auch die Längen von Überschriften in schmalen Grid-Kästen, die leichtsinnig mit »Lorem ipsum dolor« schnell angelegt und mit einer schönen, großen Typo gestaltet werden. Die Harmonie des Layouts leidet merklich, wenn der gelieferte H2-Text am Ende doch etwas länger wird und beispielsweise »Kunst und Avantgarde in Ostwestfalen-Lippe nach 1920 im Spiegel abstrakter Werke von Hans Arp und unter Einfluss der Veröffentlichung der Dada-Laut- und Simultangedichte von Hugo Ball und Tristan Tzara aus dem Cabaret Voltaire in Zürich« lauten soll, und natürlich verbittet sich der SEO-Berater jedwede Kürzung.

Selbst disziplinierte Kunden können nur selten die Textmengen einhalten oder Bildinhalte garantieren, die noch am Ende der Konzeptionsphase eingeplant sind. Jeder Webdesigner, der selbst Texte erstellt, kann das bestätigen. Bevor wir die ewige Hauptschuld bei unseren Kunden suchen, sollten wir selbst zunächst die Bookmarks zu den vermeintlichen Helferlein ignorieren und stattdessen dem Kunden offen kommunizieren, warum wir eben nicht »einfach schon mal anfangen« können. Sachlich und transparent darauf angesprochen, verstehen das auch Kunden mit geringer Medien- und Webkompetenz. Wir selbst benötigen dann vor allem die Disziplin, nicht »doch mal eben« mit dem Design oder raffinierten CSS-Spielereien anzufangen.

Wenn es nicht anders geht

Es gibt Projekte und Kunden, bei denen es trotz klarer Kommunikation und trotz Einsicht in die Gefahren dennoch nicht anders geht, weil auf Grund der Entscheiderstrukturen nur geringe Zeitfenster für die Inhaltserstellung vorhanden sind, weil der Fototermin erst spät möglich ist oder der bevorzugte Texter keine Vakanzen frei hat. Natürlich muss man hier auch pragmatisch differenzieren: für Projekte »kleiner« Kunden, bei denen eine derart komplexe Strategie nicht einmal das Budget hergibt, können Blindtexte und Platzhalterbilder auch weiterhin eingesetzt werden. Wir müssen uns nur im Klaren sein, dass diese Praxis heikel ist. Bis zur Lieferung aller Bilder und Texte sollte die Umsetzung nicht bis ins letzte Detail ausgeführt werden, um unnötige Mehrarbeiten im Markup mit zusätzlichen Containern und Klassen ebenso zu vermeiden, wie zerschossene Layouts auf Grund völlig veränderter Content-Strategien und Inhaltsmengen.

In der Zusammenarbeit mit Eurem Kunden bietet sich die gemeinsame Planung an, in der festgelegt werden sollte, welche Inhalte wie und mit welcher Hierarchie dargestellt werden – das ist zumindest ein Vorteil, sofern schon ein Klickdummy vorhanden ist. Der Kunde kann sich dann darauf einlassen, was und wieviel er liefern muss oder will. Ähnliches gilt auch für die Fotos, hier kommt es auf die Anzahl und deren Bedeutung für die Inhalte an. Für die Texte lohnt sich eine simple Copy-Paste-Aktion der Textmenge in ein Word-Dokument als Vorgabe für den Kunden oder seinen Texter. Hier könnt Ihr auch farbig markieren, welche Absätze oder Textteile später in der Linearisierung eine hohe und welche eine geringe Relevanz besitzen.

Sparsam und zur rechten Zeit würzen

Ihr könnt Blindtexte und Platzhalterbilder kurzfristig überall dort einsetzen, wo die Gestaltung der finalen Inhalte unbedenklich ist. Das können Seitenbereiche für rein dekorative Fotos sein, Infoboxen als ergänzende oder erklärende Elemente zum primären Content oder auch Mengentext, der am Ende nur noch von den konkreten Inhalten ersetzt werden muss, wie zum Beispiel Impressumseite, AGB oder Texte zur Unternehmenshistorie. Relevante Inhalte wie Claims, Feature-Teaser, hervorgehobene Überschriften oder als Designelement fungierende Bilder sollten dagegen frühzeitig und ohne Einsatz von Platzhaltersubstituten festgelegt werden.

Wichtig ist schließlich noch das Timing. Hier gilt die Analogie zu den schönen Design-Templates, die Eure Kunden stets begeistern: je früher eine vorgefertigte und vermeintlich passende Konfektionsware von der Stange geholt wird, umso länger dauert später die Arbeit in der Flick- und Änderungsschneiderei. Informationsarchitektur, Inhaltsblöcke sowie Umfang von Text und Bildern sollten zwingend feststehen, bevor Ihr auch nur einen Blick auf Placekitten oder Bacon ipsum riskiert.