Der neue Look „OpenCulturas Next“

Warum ein frisches Design notwendig war

OpenCulturas begann mit einem einfachen, eher nur für Mobilgeräte geeigneten Basisdesign, in der Annahme, dass darauf aufbauende Projekte ohnehin ein individuelles Design (technisch „Theme“) bevorzugen würden. Wir haben uns geirrt. Es stellte sich heraus, dass verschiedene Integrator:innen entweder keine dedizierte Drupal-Expertise hatten oder es schwierig fanden, die Prinzipien zu verstehen.

Andererseits führt die Verwendung des OpenCulturas Basisdesigns mit einigen CSS-Anpassungen nicht wirklich zu einer Website mit einem Look & Feel, das man von einer Kulturplattform erwarten würde. Intern nennen wir das alte Design den „Schlauch“, wenn wir über seine Einschränkungen sprechen.

Schließlich gibt es die Technologie: Das Basisdesign verwendet viele inzwischen veraltete SASS-Methoden. Und zugegebenermaßen bot es nie wirklich eine gute Basis für ein Sub-Theme, machte es sogar unnötig schwierig.

Prinzipien des neuen Designs

• Leicht anpassbar – soll nicht mehr als grundlegende CSS-Kenntnisse erfordern
• Zugänglich und inklusiv – soll keinerlei Barrieren schaffen, allen Menschen gleichermaßen dienen
• Selbsterklärend – solide Dokumentation bereitstellen; spezielle Framework-Kenntnisse sollen keine Voraussetzung sein

Lest weiter unten, wie das konkret umgesetzt wird.

Unsere Designentscheidungen: Eure Optionen

Nach vielen Beratungsgesprächen und der Betrachtung der verschiedenen Designentscheidungen, die von Website-Betreibern getroffen wurden, haben wir uns entschieden, mehr Designoptionen standardmäßig anzubieten. 

Hero-Layouts

Es gibt jetzt 4 vorgefertigte Designs, aus denen ihr wählen könnt. Plus eine „benutzerdefinierte” Variante, um ein eigenes Raster zu erstellen.

Unberührt bleibt die Titelkomponente, bei der ihr weiterhin konfigurieren könnt, ob das Profilbild oder das „Typ”-Label enthalten sein soll.

Einfach anpassbar: Das Erscheinungsbild mit wenigen Textzeilen ändern

Es sind keine besonderen technischen Kenntnisse erforderlich, um OpenCulturas an ein grundlegendes Hausdesign anzupassen. Neben dem Logo tragen folgende Designelemente viel zum gesamten Designcharakter bei: Farben, Schriftarten, Rahmen und Abstände.

Es sind nur grundlegende CSS-Kenntnisse erforderlich, um ein frisch installiertes OpenCulturas anzupassen. Wie bisher können CSS-Variablen (technischer Begriff: CSS custom properties) mit einem CSS-Injektor überschrieben werden. Ein Muster zum Starten wird bereitgestellt. 

Das neue Design bietet viel mehr Variablen. Es kann jetzt sogar das gesamte Teaser-Design (Ränder, Hintergrund, Schatten usw.) an derselben Stelle geändert werden, an der bisher im Wesentlichen die Farben geändert wurden.

Neue variable Schriftart: Montserrat

Variable Schriftarten sind ein Segen für die Ladeleistung von Seiten. Anstatt mehrere Stile einer Schriftfamilie (normal, fett, fett-kursiv) zu laden, könnt ihr lediglich eine einzige Schriftart modifizieren (vorausgesetzt, diese Technik ist integriert). Montserrat von Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral und Jacques Le Bailly ist eine solche Schriftart.

Wählt eine zufällige Stärke zwischen 100 (Thin) und 900 (Black) und verleiht eurer Website einen einzigartigen Look allein durch Typografie. Wir wollen euch nicht suggerieren, was modern aussieht und was nicht. Werft einen Blick auf die folgenden Beispiele für die Schriftstärke von Überschriften und entscheidet selbst.

„Und was ist mit unserer Hausschrift?”

Wir alle wissen: Es ist nicht ratsam, eine Schriftart von einem Drittanbieter ohne die Zustimmung der Nutzer:innen zu laden. Montserrat ist in eurem OpenCulturas-Setup enthalten, ganz ohne Cookie und ohne dass Dritte beteiligt sind.

Falls ihr eure Hausschrift verwenden möchtet, aber nicht sicher seid, wie ihr sie von eurem eigenen Webserver ausliefern könnt, fragt uns gern!

Neue Icons: Phosphoricons

OpenCulturas Next verabschiedet sich aus der Abhängigkeit von der Icon-Schriftart FontAwesome und sagt Hallo zu Phosphoricons von Tobias Fried nebst Mitwirkenden aus der Community.

Wir haben die Art und Weise, wie Icons integriert werden, radikal verändert. Keine Anpassungen mehr nach radikalen Änderungen mit einer neuen Schriftart-Version. Von nun an gibt es zwei Möglichkeiten, die Icons in eurem OpenCulturas-Next-Design zu ändern:

• Einfach: Platziert eure benutzerdefinierten SVGs in einem dafür vorgesehenen Ordner und schreibt die einzelnen CSS-Platzhalter um, damit stattdessen diese Dateien verwendet werden.
• Fortgeschritten: Legt in einem benutzerdefinierten Sub-Theme, das auf OpenCulturas Next basiert, neue oder geänderte Icons in einem dafür vorgesehenen Ordner ab und führt einen Preprozessor aus.

Lest in jedem Fall die entsprechende Readme-Datei.

Verbesserungen für ein noch zugänglicheres und inklusiveres Design

Das neue Design sollte wesentlich besser mit Rechts-nach-links-Sprachen (RTL) funktionieren. Obwohl uns noch keine Installation z. B. in Hebräisch oder einer arabischen Sprache bekannt ist, wussten wir von einigen physischen Werten im CSS, die Anpassungen für RTL-Sprachen erfordern würden. OpenCulturas Next hat dies beseitigt, indem konsequent mit logischen anstelle von physischen Werten gestaltet wird. Ein Beispiel: Anstatt das Lesezeichen-Symbol „rechts“ vom Titel zu positionieren, wird es nun „am Ende der Leserichtung“ positioniert.

Wir legen weiterhin einen Schwerpunkt darauf, Webportale zu erstellen, die assistive Technologien wie Screenreader, reine Tastaturnavigation usw. berücksichtigen. Der 2025 eingeführte Dark-Mode ist (natürlich) ebenfalls vollständig integriert. Darüber hinaus führt das neue Design den ausgedehnten Einsatz von Icons ein. Dies soll Menschen mit Konzentrationsschwierigkeiten oder Sprachbarrieren dabei helfen, die richtige Information oder Interaktionsmöglichkeit schnell zu finden.

Neue Layout-Optionen – eine neue Abhängigkeit und eine neue Herausforderung

Sich vom „Schlauch“-Layout zu verabschieden bedeutet, den verfügbaren Bildschirmplatz besser zu nutzen (während der geringere Platz auf Smartphones und Tablets weiterhin berücksichtigt wird).

Die gegebenen Seiten sind jedoch komplett linear aufgebaut, ein Abschnitt unter dem anderen. Kein guter Ausgangspunkt für ein Design, das viel Platz hat, um Elemente nebeneinander zu platzieren.

Also haben wir uns entschieden, den Layout-Builder von Drupal einzubinden (siehe unten) und führen ein neues Baukastenprinzip ein. Es gibt ein neues Inhaltselement namens „Container-Abschnitt“, das zwei Zwecken dient:

• Setzen von individueller Überschrift, Einleitungstext und weiterführendem Link für Ansichten und weitere Elemente
• Option, das aus diesen Feldern zusammengesetzte „Intro” auf breiteren Bildschirmen horizontal neben einer Ansicht anzuordnen

Wenn eine benutzerdefinierte Überschrift vorhanden ist, verschwindet jede vordefinierte Überschrift in einer gegebenen Ansicht (z. B. „Orte“ in der Ansicht für die Startseite). Gleiches gilt für einen benutzerdefinierten weiterführenden Link. 

Dieser Baustein kann auch im alten Design verwendet werden, aber man sollte lieber nicht versuchen, die Einleitung im Schlauch-Layout „nebeneinander“ anzuordnen.

Dieses Prinzip ist auch im gegebenen „Teaserabschnitt“ verfügbar. Es muss kein zusätzlicher Textblock mehr für eine benutzerdefinierte Überschrift oberhalb eingefügt werden.

Begrenzung der Textbreite

In breiten Layouts ist es unerlässlich, die Textlänge auf eine lesbare Breite zu beschränken. Solche Absätze würden jedoch unschön aussehen, wenn horizontal zu viel Leerraum folgt.

Wir haben das Standardlayout für Artikel und FAQ optimiert, indem wir den Fließtext in die optische Mitte verschoben und Medienelemente sowie einige Inhaltselemente unterhalb des Haupttextes nach außen gerückt haben.

Da einfache Seiten sowohl für Landingpages als auch für Seiten mit sehr viel Text verwendet werden, konnten wir keine Layout-Regeln für den Fließtext festlegen, die für beide Anwendungsfälle geeignet wären. Stattdessen haben wir dem Feld „Layoutschalter“ eine neue Option hinzugefügt. Nutzt diese, um das Layout von z. B. eurer Datenschutzerklärung oder eurem Impressum zu optimieren.

Layout-Builder

OpenCulturas profitiert jetzt von Drupals eingebautem Layout-Builder, der es Site-Buildern ermöglicht, das Layout jedes Inhaltstyps (und Taxonomietyps) einfach zu ändern. Mit mehr horizontalem Platz auf größeren Bildschirmen könnt ihr nun entscheiden, wo die einzelnen strukturierten Daten in den Standardlayouts platziert werden sollen.

OpenCulturas unterstützt noch keine benutzerdefinierten Layouts für einzelne Inhalte. Diese Funktion steht jedoch auf der Roadmap.

Utility-Klassen für Layout-Builder-Blöcke

Einige Expertise-Anpassungen an Layoutabschnitten und -blöcken können leicht durch das einfache Setzen einer benutzerdefinierten Klasse erreicht werden. Werft einen Blick in die Readme-Datei im Theme-Ordner oder nehmt an einem OpenCulturas Dojo teil, um eine Live-Demo zu sehen.

Die Herausforderung

Layout-Builder-Displays unterscheiden sich von dem, was ihr bisher in euren OpenCulturas-Seitenlayouts gesehen habt. Daher mussten wir eine Lösung finden, wie man die Layouts in einer gegebenen Installation umschalten kann, ohne Anpassungen zu zerstören, die ihr möglicherweise bisher vorgenommen habt. Der Wechsel zum neuen Design sollte keine Einbahnstraße sein. Ihr könnt immer noch zurückwechseln.

Wir haben Einstellungen entwickelt, um für jedes Entity-Bundle (Nodes und Taxonomiebegriffe) auf ein Layout-Builder-Layout umzuschalten. Wir empfehlen jedoch dringend, die Einstellungen in einer Staging-Umgebung zu testen und nicht direkt auf einer Live-Website.

Kontaktiert uns, wenn ihr ein temporäres Staging-Setup benötigt.

Manuelle Änderungen, die ihr in Betracht ziehen solltet

Um zum Ende zu kommen: Macht nach der Aktualisierung von OpenCulturas ein Backup und probiert das neue Design aus. Neben den Entscheidungen über die Design-Einstellungen und der Anpassung von CSS-Variablen solltet ihr (oder euer Dienstleister) die folgenden Empfehlungen zum Aufbau der Website berücksichtigen:

• Bildstile: Möglicherweise möchtet ihr die Größen von „Header-Bild“ und „Teaser-Bild groß“ ändern, um sie besser an eure Layout-Entscheidungen anzupassen.
• Optional eine Karte zu euren Seiten des Typs „Location“ hinzufügen: Die Ansicht, die diese neue dedizierte Anzeige enthält, wird nicht automatisch aktualisiert, oder vielleicht hattet ihr sie ohnehin kopiert. Es gibt eine neue Anzeige „Locations map by term attachment“ in der Locations-Ansicht unter profile/config/install/views.view.locations.yml
• Überprüft eure Startseite- und „Verwandt*“-Ansichten und passt gegebenenfalls die Anzahl der Teaser an. Wir haben die Standardeinstellung „6 Elemente“ beibehalten, aber einige Abschnitte sehen möglicherweise mit 4 oder 8 Elementen besser aus.
• Falls ihr die Ansicht „Entity reference: nodes view“ (/admin/structure/views/view/entity_reference_node/edit/er_node_references) individuell einsetzt, beachtet bitte, dass es ein neues Display gibt, mit dem ihr Referenzen filtern könnt. Damit ist es jetzt auch möglich, einen Termin in Artikeln zu „erwähnen“. Wenn ihr dies nicht zulassen möchtet, ändert die Ansicht in den Feldeinstellungen.

Selbsterklärendes Basis-Theme für Theme-Entwickler:innen

Eine persönliche Anmerkung der Autorin: Ich habe eine lange berufliche Geschichte, in der ich immer wieder in bestehende Projekte eingestiegen bin, um Designprobleme zu beheben. Es gibt so viele Webdesign-Frameworks da draußen, dass ich buchstäblich jedes zweite Mal eine neue Styling-Philosophie lernen musste. So oft habe ich mir eine Dokumentation gewünscht, die die Prinzipien auflistet und Neulingen zeigt, wo sie was finden können.

Deshalb habe ich eine solche Theme-Dokumentation für OpenCulturas Next geschrieben. Nur das Wesentliche, keine „read the f*ing manual“-Links zum kompletten Kompendium. Gedacht für beispielsweise die WordPress-Theme-Entwicklerin, die absolut in der Lage ist, ein robustes und schönes Webdesign zu erstellen, aber neu in den Theming-Konventionen von Drupal ist. Zusätzlich enthalten alle SCSS-Dateien Verweise auf andere Dateien, die in Beziehung stehen.

Das gilt auch für das Erstellen eines Sub-Themes, was jetzt auch wirklich wie gedacht funktioniert (Styling erben, gleiche Breakpoint-Mixins nutzen, nur kopieren, was geändert werden soll). Im Prinzip muss nur ein Befehl in die Konsole kopiert werden, und das eigene  Sub-Theme ist startklar. Steht alles in der Readme.

Ich hoffe, ihr findet alles zu eurer Bequemlichkeit vor. Wenn in den Anleitungen irgend etwas unklar ist oder Fragen offen lässt, lasst es mich bitte wissen.