Design-Relaunch ausschließlich per CSS

Die Einführung eines neuen Design ist in der Regel mit einem gewissen Aufwand verbunden. Neben dem eigentlichen Entwurf muss das Design auch umgesetzt und der Öffentlichkeit präsentiert werden. Das jedoch ist im laufenden Betrieb eines Content-Management-Systems gar nicht so einfach. Um die Ausfallzeit der Homepage für die Benutzer zu minimieren, bereiten wir natürlich alles in einer Kopie vor und stellen diese dann - nach Abschluss der Arbeiten - live. Aber auch die Redakteure einer Internetseite möchten gerne kurze Ausfallzeiten und möglichst keine Doppelpflege der Daten auf zwei Systemen vornehmen.

Beim Restaurant "Nuraghe" stand genau so ein Design-Neustart an. Bei der Übernahme der Homepage vom früheren Dienstleister war keine Zeit für Absprachen zu einem neuen Design geblieben. Der Auftritt wurde mit dem bestehenden Design nur vom bestehenden älteren CMS auf Contao übertragen. Dabei wurde die von Contao explizit unterstützte Trennung von Inhalt (HTML5), Funktion (Javascript) und Design (CSS) genutzt, womit die Grundlagen für flexible Layoutanpassungen gegeben waren. Diese Trennung der Komponenten wirklich konsequent zu nutzen und sich nicht aus Bequemlichkeit oder wegen Termindrucks auf eine Vermischung einzulassen, hat große Vorteile, wie der Design-Relaunch gezeigt hat. Zusätzlich verwendeten wir bei nuraghe.de von Beginn an {less}, eine dynamische Stylesheet-Sprache. Dies erlaubt uns eine effiziente Definition und Verwaltung von Design-Eigenschaften, die vom {less}-System in durch die Web-Browser direkt nutzbare CSS-Dateien übertragen wird. Wir sprechen daher im weiteren immer nur von CSS.

Da wirklich alle Design-Elemente der Nurage-Homepage über Stylesheets definiert werden, mussten nur neu erforderliche Design-Elemente in Form von Grafiken bereitgestellt werden. Danach wurde im laufenden Betrieb durch Austausch der CSS-Datei der Design-Wechsel vollzogen. Da Inhalte und Funktionen zu keinem Zeitpunkt angetastet wurden, mussten diese trotz des völlig neuen Erscheinungsbildes nicht nochmals gesondert überprüft werden. Auch die Redakteure konnten während der Design-Umstellung ohne Unterbrechung weiterarbeiten.

Durch die zentrale Steuerung des Designs durch eine einzige Datei ergibt sich der Vorteil, dass die Umstellung durch einfaches Zurückspielen der alten CSS-Datei jederzeit wieder rückgängig gemacht werden kann. Da aber alles nach Plan lief und dem Kunden das Design sehr zusagt, wird das wohl nicht nötig sein.

PS: Den Facebook-Button haben wir danach noch eingebaut, das müssen wir fairerweise zugeben.

Flexibilität durch Technologie

• Konsequente Trennung von Inhalt, Funktion und Design spart spätestens bei einem Relaunch eine Menge Geld und Zeit.
• Das Redesign einer Homepage ausschließlich durch CSS-Änderungen ist auch bei größeren Projekten und größeren Umstellungen möglich.