Adobe Experience Manager vs. WordPress: Die Authoring-Erfahrung im Vergleich

Vielen Dank, WordPress und Gutenberg, dass Sie die blockbasierte Bearbeitung zum Standard für das Erstellen von Webseiten gemacht haben. In diesem Artikel werde ich die neue Authoring-Erfahrung in WordPress mit der Erfahrung von Adobe Experience Manager (AEM) vergleichen, einem Content-Management-System für Unternehmen, das auch die blockbasierte Bearbeitung umfasst. Ich habe sowohl WordPress als auch AEM für mehrere Unternehmen (z. B. Informatica und Twitter) implementiert und musste feststellen, dass die Authoring-Erfahrung zwar für technisch nicht versierte Autoren von entscheidender Bedeutung ist, aber von Entwicklern oft vernachlässigt wird.

Hinweis : Mit dem Begriff „Erstellungserfahrung“ beziehe ich mich auf die Benutzererfahrung für diejenigen Personen, deren Ziel es ist, Inhalte auf einer Website zu erstellen und zu veröffentlichen. Ich beziehe mich nicht auf die Leute, die die veröffentlichten Inhalte konsumieren werden. Wenn Sie noch nie über das Autorenerlebnis nachgedacht haben, finden Sie hier eine Einführung von Eileen Webb, die auch in Smashing Book 5 zu sehen war.

Adobe Experience Manager ist im Vergleich zu WordPress ein komplexes System mit einer steilen Lernkurve, insbesondere für Entwickler. Gleichzeitig ist AEM einfacher zu bedienen als etabliertere und teurere Content-Management-Lösungen, wodurch AEM irgendwo zwischen kostenlosen und sehr kostspieligen Lösungen angesiedelt ist.

Aus technischer Sicht ist AEM ein Konglomerat von Open-Source-Technologien mit einigen Berührungen von Adobe, wodurch AEM irgendwo zwischen Open-Source- und proprietärer Software platziert wird. Es sind diese Berührungen von Adobe, die das System glänzend und benutzerfreundlich machen. Beispielsweise war ein visueller Drag-and-Drop-Seitenersteller die Standardmethode zum Erstellen von Seiten in AEM – lange bevor WordPress Gutenberg geboren wurde.

Werfen wir einen Blick auf einige der Funktionen, die das Autorenerlebnis überdurchschnittlich verbessern.

Komponenten (Blöcke)

Eine der wichtigsten Ideen für Websites ist das Konzept einer Komponente (oder eines Blocks im WordPress-Jargon). Eine Komponente stellt einen Inhalt dar, der bestimmten Regeln folgt, anstatt ein Blob von irgendetwas zu sein. Sie können beispielsweise eine Videokomponente haben, bei der der Autor nur einen Youtube-Link einfügen und Youtube-spezifische Einstellungen steuern kann. Oder Sie können eine Zitatkomponente haben, bei der der Autor ein Zitat in ein Textfeld und den Namen der zitierten Person in ein anderes Textfeld einfügt. Sie können sogar eine Layoutkomponente haben, die andere Komponenten enthält und diese auf einem mobilen Gerät untereinander anzeigt, während diese Komponenten auf einem großen Bildschirm über drei Spalten verteilt werden.

Ein Autor weiß genau, was er von einer bestimmten Komponente zu erwarten hat, und kann sie leicht mit den entsprechenden Inhalten füllen. Ebenso wichtig sind die langfristigen Vorteile und neuen Möglichkeiten, die mit dem in den letzten Jahrzehnten vorherrschenden Ansatz der alten Schule „Ein Textfeld für alle Inhalte“ nicht realisierbar wären:

• Wenn eine Komponente eine Datumseingabe erfordert, kann der Komponenten-Authoring-Dialog eine Datumsauswahl anstelle eines reinen Textfelds anzeigen, was es dem Autor erleichtert, ein Datum mit dem richtigen Format auszuwählen.
• Wenn ein Designer möchte, dass der Name einer zitierten Person über dem Zitat statt unter dem Zitat angezeigt wird, kann der Entwickler den Code einfach neu anordnen, da das Zitat und der Name getrennt gespeichert werden. Wenn das Zitat und der Name auf die altmodische Weise gespeichert würden, müsste der Entwickler den Namen manuell aus dem Text-Blob extrahieren und vor das Zitat verschieben.
• Wenn ein Angebot vom Englischen ins Deutsche übersetzt werden muss, kann das Angebot bei einem Übersetzungsdienst eingereicht werden. Wenn der Übersetzungsdienst dieses Angebot bereits übersetzt hat, kann er die gespeicherte Übersetzung zurückgeben. Wenn das Zitat Teil eines längeren Absatzes wäre, anstatt eigenständig zu sein, wäre die Übersetzung viel schwieriger und würde wahrscheinlich einen menschlichen Übersetzer erfordern.
• Wenn einem Video ein Transkript fehlt und es daher gehörlose Benutzer daran hindert, es zu konsumieren, kann die Komponente mit einem zusammenfassenden Text ergänzt werden, der das Video für gehörlose Benutzer zugänglicher macht.

Die komponentenbasierte Bearbeitung wird von Benutzern von AEM bereits seit einiger Zeit angenommen, und aufgrund der Einführung von Gutenberg in WordPress 5.0 sind komponentenbasierte Editoren nun der De-facto-Standard für die Erstellung von Webseiten.

Hinweis : Leonardo Losoviz taucht tiefer in die Implikationen von Blöcken im Kontext von WordPress ein.

Fragmente

Inhaltsfragmente und Erfahrungsfragmente sind neue Begriffe, die die AEM-Szene seit einem Jahr beherrschen. Ich werde diese beiden Konzepte einfach als Fragmente zusammenfassen. Im Wesentlichen ermöglichen Fragmente Autoren, neutrale Inhalte zu erstellen, die über das Web, Mobilgeräte, soziale Medien und andere Kanäle verwendet werden können.

Fragmente werden außerhalb eines Seiteneditors erstellt und sind im Vergleich zu einer Komponente weniger eigensinnig darüber, wie ihre Daten verwendet werden. Stellen wir uns ein Fragment namens „Zitat des Tages“ vor, das Autoren einmal täglich mit einem neuen Zitat aktualisieren. Nun kann der zitierte Text dieses Fragments an verschiedenen Stellen verwendet werden:

• Ein Fußzeilen-Widget zeigt das Zitat des Tages am Ende jeder Seite an. Sobald ein Autor das Fragment aktualisiert, aktualisiert sich auch die Fußzeile. Das Fragment bestimmt, was angezeigt wird, während das Fußzeilen-Widget bestimmt, wie das Zitat angezeigt wird.
• Eine Zitatkomponente ermöglicht es Autoren, ein Zitat aus vergangenen „Zitaten des Tages“ zu importieren und es dem Blogbeitrag hinzuzufügen.
• Ein Plugin fügt der Homepage einen „Zitat des Tages teilen“-Button hinzu. Immer wenn jemand auf diese Schaltfläche klickt, nimmt das Plugin das Zitat des Tages und formatiert es, um Best Practices für das Teilen über Facebook, Twitter und E-Mail zu erfüllen.

In WordPress ähneln Widgets und Menüs Fragmenten: Autoren erstellen Menüpunkte in einer neutralen Oberfläche, dann zeigen Entwickler diese Elemente als Teil des Themas auf eine Weise an, die für das Thema sinnvoll ist. Wenn das Design durch ein neues Design ersetzt wird, bleiben diese Menüelemente erhalten und können auch im neuen Design angezeigt werden, auch wenn das neue Design möglicherweise ganz anders aussieht als das vorherige.

Ich gehe davon aus, dass Fragmente weiter verbreitet werden, auch wenn das Konzept in verschiedenen Systemen unterschiedliche Namen hat. Tatsächlich hat Matt Mullenweg bereits angekündigt, dass sich sein Team derzeit darauf konzentriert, „die Blockschnittstelle auf andere Aspekte des Content-Managements zu erweitern [einschließlich der Erstellung] eines Navigationsmenüblocks [und] aller Widgets auf Blöcke zu portieren“.

Seitenvorlagen

Seitenvorlagen können als übergeordnete Komponenten bezeichnet werden, da sie mehrere andere Komponenten enthalten. In AEM können Autoren Vorlagen erstellen, die Komponenten wie eine Kopfzeilenkomponente an einer festen Position fixieren und gleichzeitig flexible Bereiche definieren, in denen Komponenten auf Seitenbasis hinzugefügt werden können.

Ein wichtiger Aspekt dabei ist, dass ein solch flexibler Bereich einschränken kann, welche Komponenten hineingehen können. Auf diese Weise können Sie Seitenvorlagen für verschiedene Zwecke erstellen:

• Vorlage Nr. 1: Artikelseitenvorlage
  Kopfzeile, Titel, Inhaltsbereich und Fußzeile sind festgelegt. Der Autor kann die Titelkomponente aktualisieren, aber nicht entfernen. Der Autor kann Text-, Bild- und Videokomponenten in den Inhaltsbereich ziehen.
• Vorlage Nr. 2: Zielseitenvorlage
  Nur ein Logo und eine Titelkomponente oben auf der Seite sind festgelegt. Der Autor kann aus einer Reihe von Zielseiten-spezifischen Komponenten wählen, die darauf optimiert sind, Besucher in Kunden umzuwandeln.

Berechtigungen und Arbeitsabläufe

Es ist unwahrscheinlich, dass jeder Autor in einem großen Team in der Lage sein sollte, kritische Vorlagen wie die Artikelseitenvorlage zu ändern. Um zu verhindern, dass Personen die Website versehentlich und unwiderruflich beschädigen können, ist es wichtig zu definieren, wer welchen Teil der Website ändern kann. Willkommen beim Konzept der Berechtigungen und Workflows. Dieses Konzept ist weder neu noch besonders, aber für große Teams wichtig.

Eine typische AEM-Site umfasst die eigentliche Produktionswebsite und mindestens eine produktionsähnliche Site, auch Staging genannt . Autoren können Inhalte auf einer privaten Staging-Site veröffentlichen, bevor sie sie auf der öffentlichen Produktions-Site veröffentlichen. Der Prozess der Veröffentlichung von Inhalten für die Bereitstellung, gefolgt von der Veröffentlichung von Inhalten für die Produktion, kann als Workflow bezeichnet werden. Eine andere übliche Art von Workflow ist, dass der Inhalt einen Genehmigungsprozess durchlaufen muss, bevor er auf der Produktionsseite veröffentlicht werden kann, und nur bestimmte Personen in der Lage sind, auf die Schaltfläche „In Produktion veröffentlichen“ zu klicken.

Berechtigungen und Workflows sind Funktionen, die in kleinen Teams vernachlässigbar sind. Wenn ein Team jedoch wächst, werden diese Funktionen entscheidend für die Produktivität und den Erfolg des Teams. Obwohl AEM mit den Grundlagen zum Erstellen von Workflows geliefert wird und Entwickler AEM für jeden spezifischen Bedarf zum Laufen bringen können, erfordert es einige Codeänderungen und ist nicht mit einem Fingerschnippen implementiert. Dies gilt umso mehr für WordPress. Es wäre schön, ein Authoring-freundliches Tool zu haben, um benutzerdefinierte Workflows zu erstellen.

Bearbeitungsmodi

In AEM können Autoren jede Seite schnell in verschiedenen Modi bearbeiten und anzeigen. Der Autor wechselt zwischen den Modi, je nachdem, welche Aufgabe erledigt werden muss:

• Um Komponenten anzuordnen und ihren Inhalt zu bearbeiten, wählen Sie den Bearbeitungsmodus .
• Um zu ändern, wie Komponenten auf einem iPad angeordnet werden sollen, wählen Sie den Layoutmodus .
• Um sich den Inhalt wie ein Besucher anzusehen, wählen Sie den Vorschaumodus .

Es gibt ein paar weitere Modi, die je nach Einrichtung der Website angezeigt werden. Ein ideales Szenario ist, dass A/B-Tests und Personalisierung durch die Integration von AEM mit Adobe Target eingerichtet werden. Mit dem Targeting -Modus können Autoren definieren, wann bestimmte Komponenten angezeigt werden sollen, basierend auf dem Standort, dem Alter, der Verweisseite, der Tageszeit usw. eines Besuchers.

Integrationen in AEM sind vergleichbar mit Plugins in WordPress, jedoch mit dem Unterschied, dass AEM-Integrationen komplexer und in der Regel maßgeschneidert sind. Insbesondere die Integration von AEM Target kann schmerzhafter sein, als es Vertriebsmitarbeiter glauben machen.

Abgesehen von der Entwicklungskomplexität und dem Geld kann die Folge eines solchen Aufwands zu einem hervorragenden Authoring-Erlebnis führen. Das Konzept der Bearbeitungsmodi zeigt, wie ein einfaches Dropdown-Menü Autoren die Möglichkeit bietet, eine Reihe von Aufgaben zu erledigen, während sie auf einer einzigen Seite bleiben.

Visueller Single-Page-Editor

Wenn Sie sich die Screenshots in diesem Artikel ansehen, müssen Sie festgestellt haben, dass der Seiteneditor von AEM nicht nur komponentenbasiert, sondern auch visuell ist: Wenn eine Komponente aktualisiert wird, wird die Änderung sofort sichtbar und der Autor muss keine Vorschau in einem öffnen neues Fenster. Ein ziemliches Feature. Obwohl Seitenersteller im WordPress-Ökosystem allgegenwärtig sind, muss das Team hinter WordPress noch eine Best Practice für die visuelle Bearbeitung definieren. Lassen Sie mich noch einen Schritt weiter gehen und fragen: Was passiert, wenn Sie visuelle Editoren mit Single-Page-Anwendungen (SPAs) verheiraten?

SPAs sind Websites, bei denen sich das Navigieren von einer Seite zur anderen nahtlos anfühlt, da der Browser nicht die ganze Seite neu laden muss. Einige beliebte Websites wie Gmail und Facebook sind SPAs, die meisten Websites im Internet jedoch nicht. Ein Grund für die eher geringe Akzeptanz ist, dass das Erstellen von SPAs schwierig ist, und das Pflegen von SPAs mit Tausenden von Seiten ist noch schwieriger. Derzeit gibt es zwei Hauptmethoden zum Verwalten von Inhalten in SPAs:

• Der Inhalt einer Website wird durch Aktualisieren des Codes aktualisiert. Das ist offensichtlich nicht authoringfreundlich.
• Die Verwaltung der Inhalte erfolgt in einem CMS, das vom besucherseitigen Teil der Website entkoppelt ist. Die Inhalte aus dem CMS werden über eine API konsumiert, beispielsweise von einer React-App. Die Autorenschnittstelle sieht anders aus als die zusammengestellte Website, die der Besucher sehen wird.

Die Implementierung eines visuellen Editors und einer SPA für sich allein ist bereits eine schwierige technische Herausforderung. Einen visuellen Editor zu haben, der mit einem SPA funktioniert, ist fast unbekannt. Das Team von Adobe arbeitet an der Unterstützung von SPAs in AEM und versucht dabei, die Vorteile ihres bestehenden Systems nicht zu gefährden. Auch wenn 2018 vielversprechende erste Versionen für die AEM-Community veröffentlicht wurden, bleibt noch viel zu tun.

Zusammenfassung

Adobe Experience Manager verfügt über mehrere nützliche Funktionen, die bereits Eingang in beliebte Open-Source-Projekte gefunden haben oder finden werden. AEM hat die in diesem Artikel hervorgehobenen Konzepte nicht unbedingt erfunden, aber es lässt sich sicherlich gut als eines der Authoring-freundlichsten Systeme auf dem Markt kommerzialisieren.

Das Konzept der Komponenten wurde mit der Einführung von Blöcken in WordPress zum Mainstream. Das Konzept der Fragmente, Seitenvorlagen, Berechtigungen und Workflows ist zumindest teilweise in WordPress implementiert und wichtig für Teams mit vielen Autoren, die Inhalte auf mehreren Kanälen bereitstellen.

Das Authoring-Erlebnis kann noch weiter verbessert werden, indem ein visueller Editor mit Bearbeitungsmodi und Unterstützung für Single-Page-Anwendungen verwendet wird. Ein solcher Editor ist schwierig zu implementieren, aber wie die Bemühungen von Adobe zeigen, könnte die verbesserte Erfahrung die Mühe wert sein und es schließlich auch in WordPress schaffen.

Weiterführende Lektüre

• „Aufbau einer besseren Authoring-Erfahrung“, Eileen Webb
• „Authoring: Umgebung und Tools“, Adobe Help Center
• „Entwurf eines benutzerfreundlichen Web-Content-Management-Systems“, Christopher Hallahan
• „Autorenerfahrung“, Rick Yagodich