Designverantwortung von Redakteur:innen

TYPO3 bietet als Enterprise Content-Management-System viele Möglichkeiten, um Inhalte einer Internetseite über Content-Elemente oder auch Extensions bei der Befüllung flexibel für unterschiedliche Viewport-Auflösungen zu pflegen. Zum Beispiel über TYPO3-Templates. Ähnliche Möglichkeiten bietet Statamic bei der Pflege von Multimedia-Inhalten. Das bedeutet, dass je nach Logik und Intelligenz eines Content-Elements oder einer Erweiterung, die Darstellung eines Web-Inhalts in Form von Bildern, Videos, Texten oder auch die Kombination daraus, in den unterschiedlichen Auflösungen von Smartphone, Tablet, Laptop, Desktop-Rechner oder auch XXL-Monitoren in der jeweiligen Darstellungsform variieren kann. Diese sich anpassende Gestaltung einer Seite wird Responsive Layout bezeichnet. Darüber hinaus können Web-Inhalte auch für die jeweils unterschiedlichen Viewports ein- oder ausgeblendet werden, zum Beispiel bei der mobilen Darstellung im Vergleich zur stationären Darstellung. Das ermöglicht dem Redakteur und der Redakteurin, zum Beispiel bei Bildern, dieses Viewport gezielt auf das entsprechende Device, also das Endgerät des Users und der Userin, in einem dafür optimalen Seitenverhältnis anzupassen. Bei mobilen Endgeräten wie Smartphones oder Tablets bietet sich ein quadratisches Format oder das Hochformat an. Bei stationären Endgeräten wie einem Desktop-PC hingegen ist in den meisten Fällen ein Querformat ideal. Um hier jeder Auflösung gerecht zu werden, haben wir für das TYPO3 CMS eine eigene Extension entwickelt, über die die Fokus-Area bei einem Bild ausgewählt werden kann. Dieser Bereich wird dann bei allen Viewports, ob mobil oder stationär, automatisch angezeigt. Dann spricht man von Responsive Images. So ist sichergestellt, dass wichtige Informationen in einem Bild, egal ob mobil oder stationär, nicht abgeschnitten werden. Die gleiche Möglichkeit bietet Statamic mit dem Feature Focal Point, über das ebenfalls ein Bereich eines Bildes ausgewählt werden kann, welcher dann bei allen Viewports angezeigt wird.

Durch diese flexible Form der Content-Pflege erhalten Redakteure und Redakteurinnen, als Backend-Benutzer und Backend-Benutzerin immer mehr Verantwortung und mehr Möglichkeiten im Gestaltungsprozess der Website einzugreifen und somit das Design der Webseite in einer gewissen Form zu beeinflussen. Man spricht hier dann allgemein von Responsive Design. Generell muss hier von CMS zu CMS die Art der Content-Pflege unterschieden werden: Unterschiedliche CM-Systeme gehen auch unterschiedlich mit Web-Inhalten, der Form und der Gestaltung um. Bei TYPO3 und Statamic vergleiche ich die Pflege einer Website gerne mit der Metapher von Lego-Bausteinen: Stellen Sie sich vor, dass eine Webseite aus einzelnen Inhaltsblöcken besteht, die vergleichbar mit Lego-Bausteinen sind. Jeder Lego-Baustein ist für eine bestimmte Darstellung eines Inhalts verantwortlich. So gibt es zum Beispiel ein Lego-Baustein, der ein Bild mit Text darstellt und ein Lego-Baustein, der für ein Bildslider verantwortlich ist. Die redigierende Person hat dann zehn, fünfzehn oder sogar zwanzig unterschiedliche Lego-Bausteine für die Befüllung einer Webseite zur Verfügung. Diese Vorgehensweise ermöglicht der Redaktion im Vergleich zu gewöhnlichen TYPO3-Templates einen entscheidenden Nutzen: Die Inhalte geben das Design vor, nicht das Design die Inhalte. Jede Seite kann somit optimal aus Sicht des Inhaltes aufgebaut werden. Eine weitere Flexibilität von TYPO3 ist, dass eine Website im Nachgang um weitere Inhaltselemente oder Extensions erweitert werden kann. Wenn eine neue Darstellungsform gewünscht wird, kann diese als zusätzliche Version erweitert werden, sie ist somit responsive.

In der Konzeption und Entwicklung einer Website wird zusammen mit dem Auftraggeber oder der Auftraggeberin der Bedarf und die Anzahl der unterschiedlichen Content-Elemente oder Extensions und deren Flexibilität definiert und dann in der Programmierung umgesetzt. Diese Vorgehensweise, das sogenannte Responsive Design, beeinflusst natürlich den Aufwand in der Entwicklung einer Webseite entscheidend. In der Konzeptionsphase beschreiben wir die Funktionalität einer Extension bis ins Detail. Das hat den Vorteil, dass sowohl der Auftraggeber oder die Auftraggeberin im Frontend als auch der Programmierer oder die Programmiererin im Backend die Anforderungen genau kennen. Durch die Programmierung von individuellen Inhaltselementen oder Erweiterungen erhöht sich der Entwicklungsaufwand einer neuen Website entsprechend. Im ersten Moment beeinflusst diese responsive Art der Entwicklung natürlich das Budget einer Webseite. Der große Bonus im Nachgang ist jedoch, dass die Redaktion viel flexibler und schneller in der Pflege neuer Webinhalte ist. Daher rechnet sich eine individuelle Erweiterung mit Responsive Webdesign oftmals in kürzester Zeit durch die effizientere Pflege der Multimedia-Inhalte über den Online-Redakteur oder die Online-Redakteurin.

Bei vielen Content-Management-Systemen werden aus Kostengründen Templates verwendet. Templates sind Design-Vorlagen, die als Gerüst für Webinhalte oder für die Gestaltung dienen. Fehlende Bestandteile können dann in das Template eingesetzt werden. Diese Templates sehen eine bestimmte Anzahl und Form von Inhalten vor. Das bedeutet, dass das Template die Darstellung des Inhalts definiert. Wenn Sie eine andere Form des Inhalts möchten, dann ist meist ein aufwendiger Programmiereingriff im Template notwendig, da das Template diese Voraussetzung eigentlich nicht vorsieht.

Neben TYPO3-Templates und TYPO3 CMS gibt es Bootstrap als Frontend Framework, das bei der Entwicklung von Websites verwendet wird. Das Bootstrap Package beinhaltet einheitliche Bibliotheken, die zentral verwaltet werden. Diese einheitlichen CSS-Bibliotheken ermöglichen dem Entwickler und der Entwicklerin auf bestehende, sich wiederholende Funktionen wie Seitenraster, Typografie, Formulare, Buttons oder auch die Navigation zuzugreifen. Das CSS-Framework wurde 2010 von Twitter entwickelt, es ist quelloffen und ermöglicht in der Webentwicklung eine beschleunigte Umsetzung des Frontends einer Website. Jede einzelne Komponente des Bootstrap beinhaltet eine HTML-Struktur, die dazugehörigen CSS-Klassen und teilweise auch JavaScript Code. Das Framework ist komplett responsive, sodass die Darstellung von Inhalten einer Website auf unterschiedlichen Displaygrößen gewährleistet ist.

Durch die oben beschriebene Vorgehensweise in der Umsetzung einer Website, kann sowohl TYPO3 als auch Statamic durch Responsive Webdesign um wichtige und flexible Elemente oder Extensions erweitert werden. Im Repositority von TYPO3 gibt es je nach TYPO3-Version unterschiedliche Erweiterungen zum Download. Auch Statamic bietet in einer Art „App-Store“ Erweiterungen an, die die Basis-Version von Statamic erweitern. Aufgrund von unterschiedlichsten Anforderungen kann TYPO3 und Statamic um weitere Feature erweitert werden, die dem Online Marketing mehr Flexibilität bei der Pflege bieten. Das bedeutet in der Regel eine schnellere Pflege der Webinhalte. Im Hause der zeroseven design studios gibt es ein umfangreiches Portfolio an Extensions, die wir unseren Auftraggebern und Auftraggeberinnen je nach Anforderung in der Grundinstallation von TYPO3 und Statamic mitgeben.

Für uns sind SEO-Aspekte, also Aspekte der Suchmaschinenoptimierung, ein wichtiger Baustein in der Entwicklung von Responsive Webseiten. Neben der technischen Voraussetzung wie der Performance und das Bereitstellen von einem Bild in unterschiedlichsten Auflösungen, sollte ein Redakteur oder eine Redakteurin immer den Überblick der hierarchischen Überschriften auf der Website haben. Aus diesem Grund haben wir den Semantilizer entwickelt. Eine Erweiterung, die alle auf der Webseite verwendeten Überschriften in deren Hierarchie abbildet. Die Person der Redaktion sieht über diese Extension die Überschriften und erhält bei einer falschen hierarchischen Reihenfolge sofort eine Fehlermeldung. Der Fehler kann direkt über den Semantilizer korrigiert werden, ohne dafür den Inhaltsbaustein mit der verwendeten Überschrift öffnen zu müssen.

Bei der Pflege von Webinhalten hat ein Redakteur oder eine Redakteurin viele Gestaltungsmöglichkeiten, wenn er oder sie mit Flächen und Farben arbeitet. Diese Flexibilität bietet je nach Umfang der Extension natürlich auch Risiken. Je flexibler die redigierende Person mit Farben umgehen kann, umso höher ist die Gefahr, dass die Website zu bunt wird. Je nach Projekt erweitern wir unsere Content-Elemente um die Möglichkeit von Hintergrundfarben. Die Hintergrundfarben können entweder über einen vordefinierten Hexwert mit Pulldown-Menü ausgewählt werden oder, wenn in der Redaktion noch mehr Flexibilität gewünscht ist, erweitern wir unsere Inhaltselemente mit einem Steuerrad, das dem Prinzip eines Farbkreises entspricht. Darüber kann eine individuelle Farbe auswählt werden. In vielen Fällen gehen wir einen Schritt weiter und erweitern die Inhaltsbausteine um zwei Farbkreise oder zwei Pulldown-Menüs, so kann dem entsprechenden Content-Element auch ein Farbverlauf hinterlegt werden. Hier erweitern wir unsere Content-Elemente natürlich um die Funktionalität, dass das Inhaltselement ab einer bestimmten Farbsättigung den Text der im Baustein verwendet wird, automatisch schwarz oder weiss darstellt. Die Redaktion muss sich somit nicht um die Darstellung der Textfarben kümmern. Auch bei die automatische Anpassung von Textfarben zählt zum Responsive Webdesign.

In unserem Blogbeitrag „Neue TYPO3 Blog-Erweiterung“ haben wir unsere Blog-Extension bereits etwas ausführlicher vorgestellt. Angelehnt an die TYPO3-Funktionalität der Blog-Erweiterung, haben wir eine identische Blog-Erweiterung für Statamic entwickelt. Diese Extension ist für mich zu einer der wichtigsten Erweiterungen geworden. Ohne es zu planen, hat die Blog-Extension bei uns in den meisten Projekten die News-Extension ersetzt. Die Blog-Extension bietet gegenüber der News-Extension oder eines News-Plug-ins viele Vorteile und mehr Flexibilität für die Redaktion. Ein News-Beitrag hat zum Beispiel immer eine feste und eine starre Struktur in der Darstellung der Folgeseite: Klickt der User oder die Userin auf der Übersichtsseite auf einen Beitrag, dann ist er oder sie auf der Folgeseite. Die Blog-Erweiterung ermöglicht eine komplett individuelle Gestaltung jeder Folgeseite. Darüber hinaus bietet diese Blog-Erweiterung auch die Möglichkeit Kategorien, Tags und den Autor oder die Autorin zu pflegen. Allein diese Editing-Feature ermöglichen uns in der Konzeption einer Website, diese Blog-Erweiterung auch für Referenzen oder Produkte einzusetzen. Wir haben bereits vollständige Webseiten ausschließlich mit dieser Blog-Extension umgesetzt. Auch das ist eine Option. Ein weiterer Pluspunkt ist, dass nur eine Extension für News- und Blog-Beiträge verwendet werden muss und nicht zwingend zwei Erweiterungen notwendig sind. Auf Grundlage der Blog-Extension entstand unsere Referenz-Extension. Diese ist ideal für unterschiedliche Referenzen auf einer Webseite geeignet. Unsere Referenz-Erweiterung ist so flexibel, dass es sogar für Produkt-Darstellungen genutzt werden kann. Die Produkte können dadurch extrem flexibel gepflegt und verwaltet werden.

Der Speicherplatz auf Webservern ist heute relativ günstig geworden. Das bietet unseren Auftraggebern und Auftraggeberinnen den Vorteil, dass wir die Bilder, die über das Content-Management-System gepflegt werden, in unterschiedlichsten Auflösungsstufen rendern. Das hat weniger etwas mit einer individuellen Erweiterung zu tun, sondern mit einer Grundkonfiguration von TYPO3 oder Statamic.
Das Bild-Processing, sprich das Herausspeichern der Bilder wird in der Regel von den Erweiterungen Imagemagick oder Graphicsmagick im Hintergrund übernommen. Hierzu erhält das CMS durch die redigierende Person die Spaltenbreite pro Bild pro Viewport. Durch diese Information ist das CMS dann in der Lage durch die Anzahl der Spaltenbreite eines Bildes, die Bilder in der entsprechenden Auflösung zu rendern. Das Seiten-Layout einer Website verfügt in der Regel über zwölf Spalten, ein Bild belegt dabei eine bestimmte Spaltenbreite. Das bedeutet, wir pflegen Bilder immer in einer möglichst hohen Auflösung. Bei uns ist derzeit das kleinste Maß in der Auflösung 5120 Pixel. Das entspricht dem 5K iMac-Monitor. Wird in TYPO3 oder Statamic ein Bild in dieser Auflösung gepflegt, generiert das CM-System je nach Einstellung der Auflösung unterschiedliche Bildgrößen. Wir gehen teilweise in Projekten von Auftraggebern und Auftraggeberinnen so weit, dass wir Bilder in 200 Pixel Schritten und teilweise sogar kleiner rendern. Das bietet den Vorteil, dass beim Aufrufen der Seite mit einem iPhone 14, ein anderes Bild für die Darstellung verwendet wird, wie beim Aufrufen der Seite mit dem iPhone 14 Pro. Somit ist die Wahrscheinlichkeit sehr groß, dass wir für die vielen verschiedenen Displayauflösungen, die es heute auf dem Markt gibt, eine möglichst nahe Auflösung des Bildes für den User und die Userin anbieten. Das optimiert die Ladegeschwindigkeit einer Responsive Seite. Diesen Benefit greifen wir in den Einstellungen unserer Erweiterung für die Media-Elemente auf. Wir erlauben der Redaktion, pro Viewport auszuwählen in welchem Seitenverhältnis und in welcher Spaltenbreite das Bild auf dem jeweiligen Display angezeigt werden soll. Unterm Strich hat die redigierende Person dadurch natürlich mehr Aufwand in der Pflege der Website, da sie für jeden Viewport eine andere Spaltenbreite und ein anderes Seitenverhältnis auswählen kann. Jedoch ist somit gewährleistet, dass der User und die Userin für seine und ihre Voraussetzung die optimale Darstellung der Inhalte erhält. Diese Vorgehensweise unterstützt die Philosophie von Google: "Der Nutzer steht an erster Stelle, alles Weitere folgt von selbst." So heißt der erste von zehn Grundsätzen, die Google wenige Jahre nach der Gründung formulierte und bis heute gelten.

Um unseren responsive Websites mehr Abwechslung mit Bildern zu ermöglichen, haben wir die Galerie-Extension entwickelt. Wie der Name schon sagt, handelt es sich hier um eine Extension, die dem Redakteur und der Redakteurin ermöglicht Bilder in eine Galerie zu integrieren. Dabei haben wir unserer Extension mehrere Logiken mit auf den Weg gegeben. Um die Pflege möglichst einfach zu halten, kann die Redaktion mehrere Bilder statt nur einzelne Bilder oder sogar ein ganzes Datei-Verzeichnis auswählen. Hier sollten natürlich mehr Bilder im Verzeichnis vorhanden sein, als die Anzahl, die über die Galerie-Extension ausgewählt wird. Per Zufallsgenerator, also random, werden dann bei jedem Seitenaufruf unterschiedliche Bilder angezeigt. So erhält die Responsive Seite immer ein anderes Erscheinungsbild. Zusätzlich kann die Redaktion auswählen, ob die Bilder rotieren sollen oder, ob sie einmalig statisch geladen werden. Standardmäßig stehen hier vier unterschiedliche Layouts bzw. Templates zur Verfügung, die ausgewählt werden können. Natürlich können die vier Layouts auf Wunsch des Auftraggebers und der Auftraggeberin erweitert werden.

Damit die Redaktion einen schnellen Überblick hat, welche Extension mit welchen Einstellungen abgespeichert wurde, verfügen unsere Erweiterungen für TYPO3 und Statamic über eine Custom-Preview. Über diese Funktion werden die wichtigsten Parameter der Extension in der Content-Übersicht der Responsive Seite dargestellt. Das ermöglicht eine schnelle und einfache Pflege der Erweiterungen.

Sie sehen anhand dieser Extension, welche Gestaltungsmöglichkeiten wir den Redakteuren und Redakteurinnen unserer Statamic- und TYPO3-Websites ermöglichen. Das schafft viel Freiraum in der Pflege und Gestaltung der Websites. Weg von statischen Templates und Templates ohne Wiedererkennungswert, hin zu flexiblen und modularen Bausteinen, die der Redaktion die Chance für ein ansprechendes, dynamisches und einzigartiges Design in der Content-Pflege ermöglichen.