von Andy Pillip

Die Vorschau-Funktion ist eine Lüge!

Die Kontext-Collage könnte eine Vorschau für Adaptive Content im CMS sein

Die so viel benutzte Frontend-Vorschau im CMS zeigt nur eine von vielen möglichen Ansichten eines Artikels.

Es fehlen gute Werkzeuge im CMS, um Inhalte für das Responsive Web zu testen, und die Ansicht in verschiedenen Kontexten begreifbar zu machen.

Texte müssen nicht nur ins CMS gebracht und aktuell gehalten werden, sondern auch so strukturiert werden, das eine Darstellung auf verschiedenen Geräten (Responsive Design) und in verschiedenen Kontexten (Adaptive Content) möglich ist.

Aufgabe des CMS ist es, Autoren bei eben dieser Strukturierung zu unterstützen, und das möglichst benutzerfreundlich.

Das Problem mit der Frontend-Vorschau aktuell

Die Darstellung eines Texts im WYSIWYG-Editor des CMS unterscheidet sich oft bereits von der Ansicht auf der Webseite (egal ob responsive oder nicht) – denn die Zeilenlänge ist eine andere, manchmal sogar die Schriftart.

Im Grunde ist bereits hier das Grundprinzip von Responsive Design wieder­zu­finden: Der Text passt sich an seine Umgebung an, einmal im Editor und einmal in der Webseiten-Vorschau.

Genau deshalb entseht bei der Arbeit mit dem CMS der Wunsch, das eben Geschriebene in einer Vorschau der Webseite zu sehen. Autoren optimieren möchten die Vorschau dann natürlich optimieren: Es werden Sätze umgestellt, Trennfugen gesetzt, im schlimmsten Fall sogar geschützte Leerzeichen zum Platzhalten eingefügt – um den Zeilenfall in der Vorschau zu optimieren.

Die Realität ist aber, dass diese Vorschau nur eine von vielen möglichen Ansichten ist. Das CMS sollte dazu motivieren, nicht unr den Unterschied zwischen Editor und Desktop-Seite zu erforschen, sondern eben auch die vielen anderen Darstellungs­möglich­keiten.

Benötigt werden dazu Funktionen, die es benutzer­freundlich ermöglichen, Texte gut zu strukturieren und adaptiv zu halten, sowie zu verstehen dass Texte möglichst isoliert funktionieren müssen.

Responsive Vorschau

Eine mögliche Lösung wäre, die Vorschau in verschiedenen Größen anzubieten, ähnlich zu responsive.is: In der Bedienleiste der Vorschau (die die meisten CMS ohnehin anbieten) finden sich Funktionen um die die Größe des Vorschaufensters zu ändern.

So werden Autoren damit konfrontiert, dass es verschiedene Darstellungen der Seite – und damit des Artikels – gibt, und können diese wechseln und das Verhalten des Textes beobachten.

Nachteil hier ist, dass die Vorschau immer maximal auf das von den Autoren verwendete Gerät vergrößert werden kann – und dass immer noch nicht kommuniziert wird, dass der Artikel oder Teile davon in anderen Kontexten verwendet werden, also möglichst isoliert funktionieren müssen.

Zudem werden für Adaptive Content zusätzlich zum Artikeltext auch Meta­informationen benötigt (wie zum Beispiel Titel und URL der Seite für Google Suchergebnisse), die in der Vorschau auf der Webseite überhaupt nicht gezeigt werden.

Responsive WYSIWYG-Editor

Nachdem die Texte also möglichst isoliert funktionieren sollten, bietet sich die Option an, auf die Vorschau komplett zu verzichten.

Um das Verhalten des Textes in verschiedenen Größen beurteilen zu können, könnte der Editor selbst diese Funktion anbieten, und den Text auf Knopfdruck unterschiedlich weit laufen lassen.

Schwierig dabei ist, dass der Editor nicht den vollen Platz bekommt, und besonders lange Zeilenläufe nicht erzeugt werden können. Allerdings beschränkt ein gutes Design die Zeilenlänge ohnehin auf ein gut lesbares Maß.

Die Verwendung der Metainformationen in anderen Kontexten wird dadurch aber immer noch nicht wirklich deutlich.

Kontext-Vorschau

Die Verwendendung in verschiedenen Kontexten könnte verdeutlicht werden, indem zusätzlich zur (Responsive) Webseitenvorschau auch verschiedene Kontexte angeboten werden.

Entweder in einer Collage verschiedener Rich-Snippets, wie Google sie nennt, oder eine Auswahl, die nur eines dieser Snippets zeigt. Einige Ideen dafür wären Vorschauen für

  • Google Suchtreffer (z.B. mit Bild und Terminliste)
  • Link auf Facebook oder Google+
  • Link auf einer anderen Seite
  • Teaser in einem Feedreader
  • E-Book-Download in iTunes

Vollständig kann diese Vorschausammlung nicht sein, schließlich geht es bei Adaptive Content darum, für möglichst viele Szenarien gerüstet zu sein, und Integrationen anderer Dienste nachzurüsten. Aber es lässt sich damit die Idee hinter adaptiven Inhalten vermitteln.

Eine solche Vorschau-Collage könnte das CMS unter dem Formular für die Seite anbieten, zusammen mit einer Vorschau auf dem Smartphone – schließlich pflegen die meisten Autoren die Seite immer noch am Arbeitsplatz am großen Bildschirm und benötigen in erster Linie die kleinste Ansicht (Mobile First).

Eure Meinung?

Ich würde mich über Eure Gedanken zu dieser Lösung freuen!

Lassen sich damit Responsive Design und Adaptive Content vermitteln? Hilft dies den Autoren, ihre Inhalte hinsichtlich dieser Kriterien zu optimieren?