TYPO3 - So muss Backend!

Das Backend von TYPO3 ist darauf ausgelegt, eine effiziente und intuitive Verwaltung von Webseiteninhalten und -einstellungen zu ermöglichen. Das Backend ist der zentrale Arbeitsbereich für Redakteure, Administratoren und Entwickler. Es ist modular aufgebaut und in mehrere Hauptbereiche unterteilt, die verschiedene Funktionen und Werkzeuge bereitstellen. Je nach Rolle kann das Backend somit entsprechend mehr oder weniger Funktionen bereitstellen.

Wir beleuchten in diesem Artikel die Ansicht für Redakteure.

Oft gesehen und noch nie für gut befunden:

Der Redakteur hat kein optimal eingestelltes Backend.
Noch schlimmer: Der Redakteur hat einen Admin-Zugang.

Wir sehen den Redakteur des Backends als wesentliche Zielgruppe unseres Handelns.

Unser Anspruch ist, dass der Redakteur genau das sieht, was im Projekt respektive im Design definiert und freigegeben wurde. Jeder Schalter, jede Option und jedes Feld haben Auswirkungen auf das Frontend. Es gibt keine leeren Optionen, die nichts bewirken. Funktionen werden nicht zweckentfremdet. Es gibt nachvollziehbare Lösungen, die logisch sind und einfach angewendet werden können.

Die Kernpunkte sind:

• Der Redakteur ist ein Redakteur und kein Admin.
• Notwendiges ist für den Redakteur einfach aufzufinden und anzuwenden.
• Komplexe Dinge werden durch einfache Lösungen beherrschbar.
• Redundante Tätigkeiten werden so gelöst, dass sie einfach und zentral an einer Stelle lösbar sind.

Reduktion der Komplexität auf das Wesentliche ist der Schlüssel zu einem zufriedenen Redakteur.

Das Backend von TYPO3 ist horizontal dreigeteilt.

Links befinden sich die zentralen Funktionen, die Module. Hier entscheidest du, was du tun willst. Für eine einfache Content-Seite kann dies sehr reduziert und aufgeräumt sein.

In der Mitte ist der zentrale Seitenbaum, das Herzstück einer TYPO3-Installation. Hier sieht man die komplette Webseite als hierarchischen Baum. Hier entscheidest du, an welcher Stelle bzw. wo du etwas tun willst. 

Im rechten Teil sieht man nach Auswahl einer beliebigen Seite deren Inhalte. Dies ist der Ort, an dem Inhalte integriert, bearbeitet und organisiert werden. Das ist der Bereich, in dem also die Änderungen an Inhalten gemacht werden, wo sozusagen die Musik spielt.

Kurz zusammengefasst:

• Linker Bereich / Modulbereich - Was will ich tun?
• Mittlerer Bereich / Seitenbaum - Wo will ich etwas tun?
• Rechter Bereich / Contentbereich - Hier kann ich jetzt was tun!

Es gibt noch einen Bereich oben, der zusätzliche Funktionalitäten bereitstellt - die Top Bar -, die lassen wir mal außen vor.

Schauen wir uns also die Details an. Zur Veranschaulichung verwenden wir eine TYPO3-Demoinstallation, die wir für Schulungs- und Testzwecke verwenden, welche mit Demoinhalten befüllt sind.

Die linke Seite gehört den TYPO3-Modulen. In einer einfachen Ausbaustufe benötigt der Redakteur lediglich die Seitenansicht und die Dateiliste, der Ort, an dem Dateien und Bilder verwaltet werden. Zentrale Anlaufstelle für die Seitenstruktur und Inhaltsbearbeitung ist das Modul "Seite". Das gibt es immer.

Alle weitere Module, davon hat es zahlreiche, sollten nur bei Bedarf eingeblendet werden. Ein Admin sieht alles. Natürlich können kundenspezifisch auch eigene Module und Funktionalitäten eingehängt werden. Im einfachen Fall gibt es also zwei Optionen: Ich will Seiten- oder eben Dateien administrieren.

Das ist wie oben schon erwähnt das Herzstück einer jeden Webseite. Hier sieht man die Struktur der Seite auf einen Blick. Dies ist aus unserer Sicht ein wesentlicher Vorteil gegenüber anderen Systemen, da der Redakteur jederzeit einen vollständigen Überblick über die Struktur hat. Diese Transparenz ist im täglichen doing überaus hilfreich. 

Der Seitenbaum repräsentiert also die Seitenstruktur. Es gibt im Kern keinen strukturellen Unterschied von Frontend und Backend. Kenne ich die Struktur im Frontend, kenne ich sie auch im Backend.

Aus dem Seitenbaum, werden zugleich automatisch die Menüs generiert, d.h. die Struktur der Seite in den einzelnen Hierarchieebenen generieren zugleich die Navigationen für den User, was absolut sinnvoll ist. Wird also ein neuer Hauptmenüpunkt benötigt, so reicht es, eine neue Seite auf der obersten Ebene einzufügen und diese mit Inhalten zu befüllen.

Im Grunde kann man es sich vorstellen, wie im Windows Explorer. Die Verzeichnisse sind die einzelnen Seiten einer Webseite. In den Seiten liegen Inhalte, im Explorer sind es die Dateien. Das lässt sich natürlich gleichfalls auf Mac übertragen, hier ist es eben der Finder. Aus den Verzeichnissen, also den Seiten, werden automatisch die Menüs generiert.

Der Benutzer kann somit sehr einfach die Struktur der Seite administrieren. Der Ort für Inhalte ist dementsprechend immer die Seite, auf der der Inhalt angezeigt werden soll.

Im Contentbereich kommen die Content Elemente zum Einsatz. Das sind Inhaltselemente, die beliebig kombiniert werden können. Einfach vorzustellen sind diese als Bühnen, die Texte, Bilder, Videos, Teaserboxen, FAQs und vieles mehr sein können.

Die Reihenfolge der Elemente ist dabei flexibel. Die Aufgabe für Agenturen bei der technischen Umsetzung ist im Kern, das freigegebene Design in Content-Elemente und Plugins zu überführen. Der Redakteur designt nicht, er befüllt lediglich bereitgestellte Felder, die das Design mit dem Content zur Webseite verbinden. Dabei bleiben Content und Design vollständig separiert, d.h. man könnte das Design austauschen, ohne die reinen Daten zu verlieren oder eben den Content tauschen ohne das Design zu verlieren.

Die Aufgabe hier ist, es dem Redakteur so einfach und komfortabel wie möglich zu machen. Orientiert sich die Optik des Backends am Frontend, so ist es ein Leichtes, den Content entsprechend zu administrieren, ohne sich Listen oder kryptischen Bezeichnungen zu verlieren. Die Elemente werden analog zum Frontend genau so im Backend angezeigt, der Redakteur sieht also eine Preview der Inhaltselemente. What you see is what you get!

Werden Content Elemente explizit für einen Zweck erstellt, so können und müssen die Felder des Elements sinnvoll beschriftet sein, sodass der Redakteur weiß, was zu tun ist. Insbesondere bei Bildern ist es aus unserer Sicht Pflicht, die Abmessungen direkt am Feld verfügbar zu machen. Hinweisboxen weisen auf Wichtiges hin, sofern nötig. Validatoren prüfen die Inhalte, wo nötig, und weisen den Benutzer auf Abweichungen hin.

Das System unterstützt den User bei der Content-Pflege so gut es geht, dann ist echtes Content Management.

Die Dateiliste ist der Ort, an dem die Assets verwaltet werden. Dies können Bilder, aber auch Dokumente wie PDF oder Word-Dokumente sein. Auch hier lässt sich eine sinnvolle Struktur durch den Redakteur abbilden, in dem er die Verzeichnisse logisch nach Themen oder Menüpunkten strukturiert. Die Struktur der Verzeichnisse spiegelt sich dann auch in der URL zum abgelegten Asset wieder. Ebenso lassen sich SEO-Informationen am Asset pflegen.

Selbstverständlich können Assets per Drag & Drop vom Desktop ins TYPO3 gezogen werden, ebenso verhält es sich mit Verzeichnissen. Das klappt auch mit mehreren Dateien gleichzeitig. Vordefiniert sollte hier sein, dass Bilder direkt aus der Digitalkamera auf eine sinnvolle Größe heruntergerechnet werden. Auch TinyPNG kann integriert werden, sodass die Bilder bereits beim Hochladen auf das Web optimiert werden. Auch hier muss das System den User unterstützen, dass eben nicht 20MB-Bilder im Frontend auftauchen und die Ladezeiten versehentlich in den Keller gehen.