Geschockte Menschen sind ganz natürlich!

Wenn Redakteure das Layout zerstören – Warum sieht mein CMS nach kurzer Zeit so kacke aus?

Als Redakteur mit umfangreichen Zugriffs- und Editierrechten sollte man sich seiner Privilegsituation bewusst sein und die Gestaltungsrichtlinien seines Projekts im Schlaf kennen: Aspect Ratio für Seitenlayout X, Breakpoints für diverse Viewports, Textformatierungen und Co. ergeben im Idealfall ein einheitliches Gesamtbild, das die Corporate Identity (CI) des Unternehmens in Print- und Onlinemedien zielgruppenorientiert repräsentiert.

Klingt nach viel Verantwortung? Ist es auch! Leider zeigt die Erfahrung, dass es viel leichter ist, sich nicht an layoutbasierte Richtlinien zu halten, anstatt den strengen Regeln des Styleguides Folge zu leisten – vielleicht auch, weil man sie einfach nicht gut genug kennt, im Zweifel für den Angeklagten. Es folgen daher nun einige Tipps und Tricks aus dem Redaktionsalltag, um die Freundschaft zu den lieben Frontendlern nicht zu riskieren (an dieser Stelle einen lieben Gruß in die erste Etage!).

Styleguide – kann man das essen?!

Nein, der Styleguide ist dein bester Freund: Auch wenn es mit ihm manchmal etwas anstrengend ist, weiß man, dass man sich stets auf ihn verlassen kann – und ohne ihn geht es auf gar keinen Fall.

Styleguide zur Unterstützung kreativer Prozesse
Der Styleguide beinhaltet Richtlinien für die kreativen Prozesse im Redaktionsalltag.

Denn der Styleguide ist die Basis einer einheitlichen Firmenpräsenz und wird in Gemeinschaftsarbeit mit unterschiedlichsten Gewerken aus Online und Print zu Beginn eines Projektes in akribischer Feinarbeit entworfen (und bei neu erstellten Elementen brav erweitert). Ziel ist es, dass Redakteure hier sämtliche Gestaltungsrichtlinien und Layoutspezifikationen bis ins letzte Detail beschrieben wissen.

Wir legen daher jedem Projektverantwortlichen ans Herz, sich zu Projektbeginn bereits mit dieser Thematik zu befassen und sich die (ja, zugegebenermaßen lange) Zeit zu nehmen, um ein solches virtuelles Nachschlagewerk im Team zu konzipieren, designen und im Projektverlauf stetig weiterzupflegen. Auf Dauer hilft es in der alltäglichen redaktionellen Arbeit sowie frontendseitigen Entwicklung immens weiter, besonders, wenn neue Kollegen in ein Projekt einsteigen.

Nur mit den umfassenden Richtlinien eines Styleguides kann die visuelle Seitenformatierung definiert werden, um den folgenden beliebten Fehlern durch Redakteure vorzubeugen.*

Mistake #1
Die Welt denkt: „Desktop first“

Heutzutage besuchen immer mehr Menschen eine Website über ihr Smartphone. Es ist daher für eine optimale Userexperience unerlässlich, eine Internetpräsenz im sogenannten „Responsive Webdesign“ zu entwickeln, denn unterschiedliche Endgeräte beeinflussen die Darstellung sowie Bedienbarkeit einer Website. Die Konzeption des Designs folgt daher stets dem Ansatz „Mobile first“: Sie startet beim kleinsten Device und endet beim Größten, dem Webbrowser.

Der redaktionelle Alltag spielt sich größtenteils in der Desktopview ab, sprich wir arbeiten am PC und kreieren neuen Content für unsere User. Dabei wird gerne aus den Augen verloren, dass die neuen Inhalte nicht nur am PC, sondern auch auf mobilen Endgeräten gut aussehen sollten.

Websitebesucher mit mobilem Endgerät
Responsive Webdesign: Optimale Website-Darstellung auf allen gängigen Endgeräten.

Besonders kritisch sind hier beispielsweise selbst gebastelte Tabellen im RTE, die sich in kleineren Breakpoints unsauber übereinander schieben, oder etwa in der Desktopview in mehreren Spalten und Reihen angeordnete Elemente, die in der Mobileview in einer falschen Reihenfolge ausgegeben werden, da ohne umschließende Container gearbeitet wurde. Auch eine Perle: Zeilenumbrüche einfügen, bis die Text-Bild-Anordnung in der Desktopview stimmig ist – auf dem Smartphone haben wir dann einfach eine große Lücke. #why

Unser Tipp: Was nicht im Styleguide entwickelt wurde, sollte nicht händisch in Eigenregie gebastelt werden – an irgendeiner unbedachten Stelle knallt es bekanntermaßen immer. Wenn sich in der redaktionellen Arbeit neue designtechnische Anforderungen ergeben, ist der nächste Schritt ein Meeting mit der Frontendentwicklung.

Mistake #2
Bildredaktion: „Aspect Ratio hilft gegen Kopfschmerzen, oder?“

Ansprechender Content besteht nicht nur aus einer reinen Textwüste, sondern wird gekonnt mit guten, hochwertigen Fotos aufgewertet. Wenn mehrere Redakteure für neuen Content zuständig sind, treffen viele unterschiedliche Meinungen, abweichende Geschmäcker und kreative Geister aufeinander. Es ist demnach davon auszugehen, dass in kürzester Zeit jeder seinen eigenen Stil für eine Artikelstruktur entwickelt und schnell keine übergreifende Formsprache mehr vermittelt wird.

Photoshop zur Bildbearbeitung
Die Bildbearbeitung ist ein essentieller Bestandteil redaktioneller Arbeit: Farbkontraste und Seitenverhältnisse werden optimiert.

Dem sollte man entgegensteuern, indem man einerseits einen standardisierten Aufbau eines Artikels im Redaktionshandbuch definiert und andererseits die freie Bildwahl durch fest vorgegebene Formate sowie Auswahlkriterien für die Bildredaktion einschränkt. Es sollten stets Bilder mit hohem Farbkontrast gewählt werden, bei denen das Hauptmotiv zentriert im Fokus steht – wir erinnern uns an das Stichwort: optimale Darstellung auf mobilen Endgeräten.

Die Auswahl von Bildern mit stimmigen Seitenverhältnissen (Aspect Ratio) gehört zum 1×1 der Print- und Online-Redaktion. Bild-Text-Verhältnisse spielen hierbei ebenso eine Rolle wie unterschiedliche Spaltenanordnungen.

Dabei einen klassischen Fauxpas bitte unbedingt vermeiden: In Spalten wird niemals ein Bild im Format Hochkant neben ein Landscape gesetzt. Dies war in einem, von der Frontendentwicklung designtem 50/50- oder 33/33/33-Element mit Sicherheit so nie vorgesehen und kann daher auch nur seltsam auf den User wirken.

Mistake #3
Freie Bildwahl: Stockphotos sind das neue Art Design

Das vermeintliche Problem an der Sache ist der Fakt, dass gute Fotos auch gutes Geld kosten und leider nicht jede Redaktion in einen hochwertigen Content-Pool vom Grafiker investieren möchte oder kann. An dieser Stelle wird (leider) gerne gespart und voreilig auf kostenlose (leider oft langweilig-wirkende) Stockphotos zurückgegriffen, die nur wenige Emotionen auslösen (der Klassiker: „lächelnde blonde Frau mit Headset“ neben der Kontaktadresse).

Hiermit wollen wir keinerlei Stockphotos degradieren – wir verwenden sie ja häufig selbst. Wir wollen nur sagen, dass unique content immer besser ankommt, als statisch wirkende, frei erhältliche Stockfotografien. Weiter im Text..

Bildauswahl in der Redaktion
Die richtige Bildwahl ist nicht immer einfach. Wichtig: Das wesentliche Motiv ist im Fokus.

Hier ist immer zu bedenken, dass ggf. viele andere Mitbewerber identische Motive im Einsatz haben, wodurch Individualitätspunkte beim Leser verloren gehen könnten – immerhin kennt man das Bild bereits von zahlreichen anderen Seiten und ist wenig überrascht, erneut das breite Grinsen der blonden Dame mit Headset zu sehen. Zudem muss häufig Zeit in eine aufwändige Photoshop-Nachbereitung investiert werden, um den gewünschten Farbkontrast, Zuschnitt o. Ä. zu erzielen.

Hier sollte die Redaktion abwägen, wie „unique“ der Content sein soll und entsprechende Konsequenzen ziehen.

Tipp: Unbedingt einen Redaktionsplan erstellen und regelmäßig (frühzeitig) aktualisieren, um als erste Redaktion mit frischem Content und aktuellen Bildern am Start und in den SERPs zu sein. Außerdem: Sollte sich der Content der eigenen Portale auf Bereiche wie z. B. Lifestyle oder Fashion beziehen, so sollte man durchaus einmal die Anschaffung einer ordentlichen Kamera überdenken – selbst geschossene Bilder wirken für solche Portale authentischer 🙂 

Mistake #4
More is more: Das Revival von Word Clipart und Corel Draw

Wer erinnert sich nicht an die bunte heile Welt von „Word Clipart“ und „Corel Draw“. Auch im TYPO3 Backend gibt es gewagte RTE-Funktionen, die es Redakteuren erlauben, alte Clipart-Kenntnisse direkt auf das Web anzuwenden: Bunte Schriften, unterschiedliche Schriftarten und -größen oder kurios eingebundene Bilder sind hier nur der Anfang.

Um der CI treu zu bleiben, wird zum Projektstart eine einheitliche Formsprache im Styleguide definiert: Jeder Button, jeder Link und jedes Wort haben eine genormte Optik, die bestmöglich auf die Zielgruppe des Unternehmens ausgerichtet ist. Nur diese Formatierungsoptionen sollten den Redakteuren im Backend zur Auswahl stehen, sodass es hier zu keinem Zeitpunkt zu Missverständnissen oder kreativen Ausschweifungen kommen kann. Wir haben die RTE-Funktionen daher stets auf „Default“ gesetzt und ergänzen unsere individuell entwickelten Klassen und Frames in jedem Projekt.

Tipp: Achtet auf formatierten Text, dieser kann negative Auswirkungen auf die Frontendausgabe haben. Wer Textpassagen kopieren und einfügen möchte, kann dies gerne tun – aber bitte vorab die Formatierung löschen, etwa in einem Texteditor.

Fazit:

…ohne Styleguide geht es wirklich nicht, denn Webdesign der Redaktion in Eigenregie kann nur in den seltensten Fällen wirklich zum Ziel führen. Redaktion und Frontendentwicklung sind im besten Fall ein eingespieltes Team, das gemeinsam das kreiert, was Websitebesuchern ein einmaliges Surferlebnis auf allen Endgeräten ermöglicht: Ein stimmiges Designlayout mit einheitlicher Formsprache und aussagekräftigem Bildmaterial.

Welchen Problemen begegnet Ihr so im Redaktionsalltag? Schreibt uns Eure Erfahrungen gerne in die Kommentare!

* Ja, wir nehmen uns hier selbst auch nicht aus – man lernt ja aus seinen Fehlern. 🙂

Bildquellen

Avatar

Über Lisa Kristin Noffke

Betreut als Online-Redakteurin und Projektmanagerin bei der Marketing Factory seit 2015 unterschiedliche Kundenprojekte.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.