Portaldesign & Joomla
Beim Relaunch von oeffentlichen-dienst.de musste das vertraute Erscheinungsbild erhalten, zugleich aber in ein responsives Gantry-5-Template, eine neue Navigation und eine modernisierte Joomla-Struktur überführt werden. Der Praxisfall zeigt, warum Portaldesign von Inhaltstypen, Modulen und Nutzerwegen ausgehen muss.
Ausgangspunkt: kein leerer Entwurf, sondern ein gewachsenes Portal
oeffentlichen-dienst.de enthielt bereits zahlreiche redaktionelle Beiträge, Rechner, Formulare, Weblinks, Newsletterfunktionen und Anzeigenbereiche. Das bestehende Erscheinungsbild sollte deshalb nicht durch eine beliebige neue Oberfläche ersetzt werden. Aufgabe war, seine prägenden Merkmale auf eine wartbare Joomla- und Gantry-5-Basis zu übertragen.
Dafür wurde die Website zunächst in eine Entwicklungsumgebung kopiert. Im neuen Template entstanden die benötigten Modulpositionen, bevor Desktopansicht, Inhalte und Funktionen schrittweise nachgebaut wurden. Die Gestaltung folgte damit der tatsächlichen Portalarchitektur statt einer isolierten Startseitenansicht.
Das vertraute Erscheinungsbild als responsives System neu aufbauen
Der Desktopauftritt wurde im Gantry-5-Framework rekonstruiert und anschließend für kleine Displays eigenständig weiterentwickelt. Farben von Schaltflächen und Überschriften, Navigation, Header und Abstände mussten in beiden Ansichten zusammenpassen.
Auch das Logo wurde als SVG neu erstellt. Eine programmierte Jahreszahl und die responsive Anpassung von Logo und Header machten daraus kein starres Bild, sondern einen Bestandteil des Templates. Gerade bei einem informationsreichen Portal muss die visuelle Identität in wechselnden Breiten funktionieren, ohne der Navigation oder dem Inhalt den Platz zu nehmen.
Seitentypen bestimmen die gestalterischen Regeln
Das Portal bestand nicht nur aus Joomla-Beiträgen. Suchergebnisse erhielten eigene Template-Overrides, Weblinkskategorien wurden durch ein programmiertes Modul-Override ersetzt und mehrere Rechner mussten nach einer geänderten Ordnerstruktur weiterhin funktionieren. Hinzu kamen Kontakt-, Feedback- und Vergleichsformulare, Tooltips, Newsletterelemente und Anzeigen im Header.
Jeder dieser Seitentypen bringt andere Anforderungen an Breite, Gewichtung und Bedienung mit. Ein konsistentes Portaldesign entsteht daher nicht durch eine einzige Schablone, sondern durch gemeinsame Grundregeln und gezielte Ausgaben für Suche, Navigation, Formulare, Rechner und redaktionelle Inhalte.
Mobile Navigation ist eine Strukturentscheidung
Im Oktober 2022 wurden Mobilansicht, responsive Darstellung und die Navigation für Desktop und kleine Bildschirme separat bearbeitet. Die aktuelle Inhaltsbasis wurde mehrfach in die Entwicklungsumgebung übernommen, damit das Layout nicht nur mit Testinhalten, sondern mit der tatsächlichen Inhaltsfülle und den vorhandenen Seitentypen geprüft werden konnte.
Das ist besonders bei umfangreichen Menüs entscheidend. Was auf dem Desktop als breite Orientierung funktioniert, muss mobil priorisiert, verdichtet und anders bedient werden. Die mobile Fassung war deshalb kein verkleinerter Nachbau, sondern eine eigene Anordnung innerhalb desselben Gestaltungssystems.
Gestaltung und technische Auslieferung treffen sich im Browser
Nach dem eigentlichen Relaunch wurden auch die sichtbaren Folgen der technischen Auslieferung bearbeitet. CSS-Anpassungen dienten der Kontrolle von Layoutverschiebungen. Ein eigenes Menümodul reduzierte die dokumentierte Zahl der DOM-Elemente von über 4.000 auf unter 2.000. Ein als PNG geladenes Feedback-Banner wurde durch WebP ersetzt.
Zusätzlich wurden Preload-Anweisungen und die Reihenfolge von Skriptaufrufen getestet. Diese Arbeiten verändern nicht zwingend den Entwurf auf dem Papier, aber seine Wahrnehmung: Navigation, Schriften, Banner und Inhaltsblöcke sollen beim Laden stabil an ihrer vorgesehenen Position erscheinen.
Was sich aus dem Projekt ableiten lässt
- Bestand zuerst verstehen: Bei einem Portal-Relaunch bestimmen vorhandene Inhalte, Funktionen und Nutzerwege den sinnvollen Gestaltungsrahmen.
- Seitentypen sichtbar unterscheiden: Beitrag, Suche, Rechner, Formular und Weblinkliste brauchen gemeinsame Grundregeln, aber nicht dieselbe Anordnung.
- Responsive Gestaltung im Template verankern: Navigation, SVG-Header und Modulpositionen müssen für verschiedene Breiten geplant werden.
- Mit realen Inhalten testen: Wiederholte Inhaltsimporte zeigen, ob das Layout auch mit der tatsächlichen Portalstruktur trägt.
- Performance als Teil der Gestaltung behandeln: DOM-Größe, Bildformat und Layoutstabilität beeinflussen, wie ruhig und verlässlich eine Seite wirkt.
Vom gewachsenen Bestand zum belastbaren Portaldesign
Bei oeffentlichen-dienst.de entstand das neue Erscheinungsbild aus der Verbindung von Inhaltsarchitektur, responsiver Navigation, Template-Entwicklung und technischer Optimierung. Das Ergebnis ist kein losgelöstes Redesign, sondern eine visuelle Ordnung für einen komplexen Joomla-Bestand.
Der Projektverlauf ist in der Fallstudie oeffentlichen-dienst.de zusammengefasst.