Von der Idee zur Umsetzung.
Wir begleiten Webprojekte von der ersten Idee bis zur laufenden Weiterentwicklung. Strategie, Design, Entwicklung und Betrieb greifen bei uns sinnvoll ineinander – für Websites, Plattformen und individuelle Weblösungen.
Unsere Case Studies
Wir schaffen die Grundlage für ein funktionierendes Webprojekt.
Wir gestalten digitale Erlebnisse und entwickeln passende Inhalte.
Wir setzen Websites und individuelle Weblösungen technisch sauber um.
Wir sorgen für Zugänglichkeit, Stabilität und langfristige Betreuung.
Die Friedrich-Alexander-Universität Erlangen-Nürnberg (FAU) gehört mit rund 40.000 Studierenden zu den größten Universitäten Deutschlands. Ihr Webauftritt umfasst rund 1.100 eigenständige Websites – von Fakultäten und Departments bis hin zu klinischen und weiteren universitären Einrichtungen.
Im Zuge eines neuen Corporate Designs sollte die gesamte Weblandschaft der FAU technisch und gestalterisch modernisiert werden. Aufgabe war die vollständige Neuentwicklung eines zentralen WordPress-Themes, das auf rund 1.100 Websites einheitlich funktioniert, dezentral gepflegt werden kann und hohe Anforderungen an Barrierefreiheit, Performance und Skalierbarkeit erfüllt.
Das neue Corporate Design wurde von einer externen Agentur entwickelt und als Designsystem übergeben – nicht als fertige Website. Die Aufgabe von Mondula begann genau dort: aus statischen Layouts ein wartbares WordPress-Block-Theme zu bauen, das tausende nicht-technische Redakteur:innen an der Universität nutzen können, ohne das Corporate Design zu gefährden – während die bestehenden Websites weiterliefen.
Rahmenbedingungen:
Alle Zahlen stammen direkt aus dem Repository.
/
Blockarchitektur – zehn maßgeschneiderte Blöcke. Serverseitig gerenderte Blöcke mit render.php und React-Editor-Oberflächen: Portal-Menü, Teaser-Grid, großer Teaser, Event-Teaser, Logo-Grid, Testimonial, globale Suche, großer Button, Meta-Headline, Copyright-Hinweis. Jeder Block ist ein eigenständiger Ordner (block.json / edit.jsx / render.php / style.scss / editor.scss) – Blöcke lassen sich ergänzen oder entfernen, ohne den Build anzufassen.
Editor-Governance – Core-Blöcke auf Marke festgelegt. Statt Redakteur:innen frei in Gutenberg agieren zu lassen, wurden 19 Core-Blöcke – u. a. Heading, Image, Gallery, Cover, Media-Text, Table, Details, File, Buttons – mit theme-eigenen Styles, Block-Varianten und reduzierten Inspector-Controls überschrieben. Eine Seite, die eine Lehrstuhl-Sekretärin baut, sieht aus wie eine Seite der Design-Agentur.
Design-Tokens – theme.json als zentrale Quelle. Das Fakultäts-Branding wird über CSS Custom Properties abgebildet, gespeist aus theme.json v3, gespiegelt durch eine SCSS-Ebene (components/ui/variables, mixins, base). Farbe, Abstände und Typografie liegen an einer Stelle und erreichen sowohl Frontend als auch Editor-Canvas – keine Abweichung zwischen dem, was Autor:innen sehen, und dem, was Besucher:innen bekommen.
Die sechs Paletten
#04316aFAU zentral#fdb735Geisteswissenschaften/Phil#c50f3cWirtschaft & Recht/RW#18b4f1Medizin#7bb725Naturwissenschaften#8c9fb1Technische FakultätMigration – Abwärtskompatibilität als Feature. Eigene Module migrieren die Daten des Vorgänger-Themes direkt: Portal-Menü-Metadaten werden aus wp_postmeta gelesen und ins neue Format überführt, alte Bildlink-Post-Types werden zu Logo-Grids, alter Sidebar-Content taucht wieder im Block-Editor auf, Classic-Editor-Inline-Styles werden gezielt bereinigt, damit alte Bilder auf Mobilgeräten nicht mehr überlaufen. Niemand musste Inhalte neu eingeben – dieser Teil der Arbeit wird nie gezeigt, war aber der schwierigste.
Build & Tooling – ein Build, der sich selbst erkennt. Eine eigene Webpack-Konfiguration auf Basis von @wordpress/scripts scannt components/blocks/ zur Build-Zeit, generiert Entry-Points und Kopierregeln pro Block und schlägt bei Warnings fehl. Die lokale Entwicklung läuft in wp-env (Docker) – jede:r Mitwirkende bekommt mit einem Befehl eine identische WordPress-Instanz.
Internationalisierung – Übersetzungen in der Pipeline. Ein skriptgesteuerter i18n-Workflow: POT-Extraktion, PO-Updates, MO/PHP/JSON-Builds via WP-CLI, dazu ein eigenes Webpack-Plugin, das gebaute JS-Bundles ihren Übersetzungsdateien zuordnet, damit Editor-Texte korrekt aufgelöst werden. Deutsch läuft in Du- und Sie-Form. Eine fehlende Übersetzung lässt die CI fehlschlagen.
Ein öffentliches Uni-Theme wird von mehreren Teams mitentwickelt – deshalb wurde der Standard maschinell durchgesetzt. Jeder Pull Request auf dev durchläuft dasselbe Gate auf GitHub Actions, ein passendes npm run pr-check läuft lokal vor jedem Push:
Öffentliche Websites in Deutschland unterliegen BITV 2.0 / EN 301 549. Skip-Links, aria-expanded / aria-controls / aria-live im mobilen Menü und im Portal-Menü, sichtbare :focus-visible-Styles auf jedem interaktiven Element über mehr als 20 Komponenten-Stylesheets hinweg, sowie Reduced-Motion-Handling – von Anfang an Teil der Komponenten, nicht nachträglich aufgesetzt.
Das Ergebnis ist eine zentrale und skalierbare technische Plattform für den gesamten Webauftritt der FAU. Rund 1.100 Websites nutzen heute dasselbe Theme und sorgen damit für einen konsistenten Markenauftritt über alle Einrichtungen hinweg. Gleichzeitig können die jeweiligen Redaktionsteams ihre Inhalte eigenständig pflegen. Das System verbindet einheitliches Corporate Design mit hoher Flexibilität, verbesserter Performance und barrierefreier Nutzung nach WCAG 2.1 und BITV 2.0.
Ein gemeinsames System, unterschiedliche Anforderungen: Das Video gibt einen Einblick in die Umsetzung und zeigt, wie sich individuelle Webauftritte mit flexiblen Inhaltsbausteinen auf einer zentralen technischen und gestalterischen Basis realisieren lassen.