Diction: Website-Relaunch sorgt für Performance-Steigerung

Hintergrund

Diction ist ein internationales Übersetzungsbüro mit Hauptsitz in der Schweiz und Niederlassung in Vancouver (Kanada). Der Sprachdienstleister hat sich auf die Bereiche Recht, Finanzwesen und Marketing spezialisiert. Er arbeitet mit neuesten Technologien und bietet seinen Kunden 24/7-Erreichbarkeit – ist also ziemlich innovativ. Was man von der alten Diction Website nicht sagen konnte.

Diese war im Laufe der Jahre sehr unübersichtlich und fehleranfällig geworden. Sie hatte eine schlechte Performance und die Darstellung sowie Navigation waren nicht für die Nutzung auf mobilen Endgeräten optimiert. Ein Website-Relaunch war also dringend nötig. Durch ihren SEO-Dienstleister MADMEN war Diction auf uns aufmerksam geworden. Unsere Designvorstellungen und unser technisches Konzept haben Diction überzeugt. Und so wurden wir als ausführende Digitalagentur ins Boot geholt.

Elisabeth Rettelbach | Leiterin Marketing, Texterin bei Diction

„Die Zusammenarbeit mit coma war sehr eng und lief hervorragen. Wir sind von unserer neuen Website begeistert.“

Aufgabe

Den Auftakt des Projekts machte ein Workshop, den wir mit allen wichtigen Stakeholdern von Diction veranstaltet haben. Dadurch konnten wir sämtliche Anforderungen und Rahmenbedingungen für den Website-Relaunch bereits frühzeitig sehr genau definieren:

Mobile First: Die Nutzung der Website muss auf Smartphones und Tablets uneingeschränkt möglich sein.
Gute Performance: Die Website muss technisch einwandfrei, schnell und sicher sein.
Einfach zu bedienendes Backend: Diction will die Inhalte in Eigenregie pflegen.
Gutes Suchmaschinen-Ranking: Dieses war vor dem Relaunch bereits sehr gut und sollte erhalten bleiben.
Corporate Identity: Der Auftritt (Inhalt und Design) muss dem Unternehmensbild entsprechen.
Einfache und sichere Kontaktmöglichkeiten: Ohne langes Scrollen, Klicken und Suchen. Die Kontaktformulare müssen bot-sicher sein.
Integration von Trust-Elementen: ISO-Logos, Top-40-Badge, Kunden- und Partnerlogos müssen gut sichtbar verankert und erweiterbar sein.
Begrenztes Budget: Da Diction die Seiten selbst befüllen wollte, musste der Workflow entsprechend angepasst werden.

Lösungen

Prozessoptimierung durch enge Zusammenarbeit von UX, Design und Webentwicklung

Für einen möglichst schlanken Workflow haben wir den klassischen Projektablauf modifiziert. UX, Design und Programmierung haben ihre Aufgaben nicht nacheinander (Wasserfallprinzip) abgearbeitet, sondern von Anfang an sehr eng miteinander zusammengearbeitet. Das Problem, dass konzeptionelle Anforderungen erst ganz am Ende des Projekts in der Programmierung für massive Schwierigkeiten und Zeitverzögerungen sorgen, konnte bei dieser Arbeitsweise erst gar nicht auftreten.

Bereits für den ersten Entwurf haben wir einen Prototyp erstellt. Dieser wurde sukzessive optimiert und weiter ausgebaut. Dadurch konnten wir auf zeitaufwändige Wireframes und Grafikdesigns verzichten. Die Abstimmungen über das Design fanden direkt im Content-Management-System statt. Hier konnte der Kunde ganz real sehen und erleben, wie die fertigen Seiten aussehen und funktionieren.

Technische Umsetzung mit WordPress, Gutenberg und Stackable

Wir haben die neue Diction-Website mit dem Content-Management-System WordPress umgesetzt und dabei mit dem WordPress-Block-Editor Gutenberg sowie der Block-Library Stackable gearbeitet. Diese Kombination bot zahlreiche Vorteile:

WordPress ist ein, auch für Nicht-Webprofis einfach zu bedienendes CMS. Diction kann die Website damit bequem selbst pflegen – zumal Diction bereits Erfahrung mit dem System hat.
Der Aufbau der Seiten mit wiederverwendbaren Blöcken und eine Musterseite mit allen zur Verfügung stehenden Blöcken bieten Diction die Möglichkeit neue Inhalte, aber auch komplett neue Seiten selbst anzulegen.
Die Block-Library Stackable erlaubt umfangreiche Designoptionen und -varianten, die alle den Designvorgaben des Kunden-CIs entsprechen. Das bietet Diction größtmögliche Gestaltungsfreiheit.

Zum Befüllen der Seiten haben wir die betreffenden Diction-Mitarbeitenden in der Bedienung des CMS geschult. Eine zusätzliche Guideline unterstützt sie bei der täglichen Pflege und zeigt live, wie es funktioniert.

Performance-Steigerung durch technische Optimierung

Die alte Website hatte extrem lange Ladezeiten. Eine deutliche Steigerung der Performance war deshalb eines der zentralen Anliegen für den Website-Relaunch. Wir haben dafür auf Basis von Google Page Speed und Lighthouse Test einen umfangreichen Maßnahmenkatalog ausgearbeitet und umgesetzt:

100 Millisekunden werden als maximale Reaktionszeit definiert. Sie gibt den Rahmen für die Performance vor.
Der Code für die Cascading Style Sheets wird minimiert und unkritische CSS nachgeladen.
Auf dem Server wird die Text Compression aktiviert.
Um die Downloadzeiten für Ressourcen zu minimieren, werden textbasierte Assets komprimiert, JavaScript optimiert und HTTP Caching genutzt.
Um die Reaktionsgeschwindigkeit des Servers zu erhöhen, werden Applikationslogik und Datenbankabfragen optimiert, sowie die Server-Hardware aktualisiert.
Bilder werden optimiert/komprimiert und in unterschiedlichen Größen für den Einsatz auf verschiedenen Endgeräten (responsive Images) eingebunden.
Beim initialen Aufruf einer Seite werden nur die Bilder im sichtbaren Bereich geladen. Offscreen-Bilder werden nachgeladen.
Nicht benötigte Assets des WordPress-Themes werden entfernt.
Unveränderte statische Assets werden langfristig im Browser des Users gecacht, um nicht bei jedem Besuch neu geladen werden zu müssen.
Um schneller auf Formulare und Bilder zugreifen zu können, erhalten sie ein Label bzw. ein ALT-Attribut.

SEO – Gutes Ranking soll noch besser werden

Schlechtes Suchmaschinen-Ranking ist vielfach der Anlass für einen Website-Relaunch. Nicht so bei Diction. Dank SEO-Spezialist MADMEN hatte die alte Website bereits ein sehr gutes Ranking bei Google und Co. Und diese guten Platzierungen sollten auch über den Relaunch hinweg erhalten bleiben bzw. sogar noch verbessert werden. Eine ziemliche Herausforderung: Denn in der Regel führt ein kompletter Relaunch erst mal zu Einbußen beim Suchmaschinen-Ranking, weil die neuen Seitenstrukturen und Inhalte von den Suchmaschinen noch nicht indiziert sind.

Wir haben deshalb das Thema Suchmaschinenoptimierung von Anfang an bei der Umsetzung mitberücksichtigt und sehr eng mit MADMEN zusammengearbeitet. Ein umfangreicher SEO-Anforderungskatalog, laufende SEO-Checks sowie eine deutliche Performance-Steigerung sorgen dafür, dass die Seite – auch weiterhin – Top-Platzierungen erzielt.

Diction

Diction AG