Moderne Neurochirurgie, responsive und in zehn Sprachen

Die Avicenna Klinik in Berlin genießt weltweit hohes Ansehen bei der Behandlung von Hirn-, Wirbelsäulen- und Gelenkerkrankungen. Sie bietet innovative Therapiekonzepte, modernste Ausstattung, Hotel-Ambiente und eine sehr persönliche Betreuung der Patienten.

Im Zuge des Relaunches sollte die Website dem internationalen Renommee der Klinik auch online einen würdigen Rahmen verleihen. Dieser Anspruch erforderte ein ganzheitliches Konzept bei der Realisierung der neuen Website.

Die Migration der bestehenden Website-Inhalte

Die große Menge an bestehenden Inhalten und das bereits gute Suchmaschinen-Ranking der alten Website machten eine akribische Vorarbeit unabdingbar. So erfolgte die Aufarbeitung, Umstrukturierung und Erweiterung der vorhandenen Texte, Grafiken, Videos und des neuen Seitenbaums in enger Zusammenarbeit mit dem Kunden und den SEO-Experten von 42DIGITAL.

Die Migration der bestehenden Inhalte in das neue CMS und deren anschließende Übersetzung in neun weitere Sprachen, darunter u. a. Hebräisch und Arabisch, stellten dabei eine weitere Besonderheit dar.

Die Verbesserung der Benutzerführung

Ziel der neuen Website war es, dem Besucher die Inhalte, trotz der großen Menge, besser konsumierbar zu machen. Dafür wurde die Navigationsstruktur deutlich vereinfacht, indem u. a. die vorher getrennten Menü-Punkte „Erkrankungen“ und „Therapien“ zu einem neuen Punkt „Erkrankungen & Therapien“ zusammengefasst. Durch diese Änderung ist der Website-Besucher in der Lage die Erkrankung und die dazugehörigen Therapiemöglichkeiten auf einen Blick zu erfassen.

Flexibles Design und robuste Software

Die neue Website sollte für die Besucher einfach zu bedienen sein, den modernen und innovativen Anspruch der Klinik widerspiegeln und sich technisch und optisch deutlich von den Mitbewerbern absetzen. Aber auch die Redakteure, welche die Inhalte der Website pflegen, sollten das CMS mühelos verwenden können.

Das Design

Der Designprozess begleitete das Projekt von Beginn an. In der konzeptionellen Phase wurde durch Mockups evaluiert, wie die vorab definierten Website-Inhalte am besten angeordnet werden können. Vor allem der modulare Aufbau der Website stellte eine Herausforderung dar. Parallel zur Entwicklung der Mockups wurden bereits erste Website-Prototypen programmiert, um zu schauen wie sich der Aufbau in verschiedenen Situationen verhält. Nach der Freigabe der Mockups durch den Kunden wurden keine ganzen Seiten in Photoshop gestaltet, sondern die einzelnen Module, die sich in verschiedenen Kontexten wiederfinden lassen. War ein Modul fertig gestaltet, wurde das Design auf das Modul im Website-Prototypen adaptiert. Das sparte zum einen viel Zeit bei der Gestaltung und Umsetzung, zum anderen ließen sich so deutlich schneller Änderungen am Design vornehmen. Das Resultat war ein umfangreicher Styleguide.

Eine weitere Besonderheit stellten die internationalen Website-Besucher dar. Die Website wird von allen Kontinenten aus besucht. Das Design muss weltweit verstanden werden und in verschiedensten Sprachen funktionieren. Das erforderte Recherchearbeit z. B. bei der Auswahl der richtigen Schriftart, der Suche nach passenden Elementen, Symbolen und Piktogrammen und der Verwendung der richtigen Farben.

Das Backend

Anforderungen

Die alte Website basierte auf der Blogsoftware „WordPress“, welche durch die vielen Inhalte in sieben Sprachen schwer zu pflegen war und nicht mehr zuverlässig funktionierte. Bei der Wahl des CMS waren für uns folgende Punkte entscheidend:

  • Das CMS muss für jede Sprache verschiedene Inhalte und Seiten-Strukturen darstellen können.
  • Das CMS muss einen automatisierten Import neuer Sprachen ermöglichen.
  • Das CMS muss viele Redakteure und verschiedene Benutzerrollen verwalten können.
  • Diese Redakteure müssen das CMS in ihrer Sprache bedienen können.
  • Das CMS soll langfristig durch eine große Community, die es pflegt und erweitert, bestehen können.
  • Das CMS soll als Open Source zur Verfügung stehen.

TYPO3

Nach einem großen Abwegungsprozess, mit welchem System wir nun fortfahren würden, fiel die Wahl auf TYPO3, womit wir bereits seit 2002 erfolgreich Websites realisieren. Für die neue Website der Avicenna Klinik wurde das System von uns um zahlreiche Inhaltsmodule erweitert. Dadurch lassen sich Texte und Bilder auf jeder Unterseite durch ein individuelles Layout anordnen.

Damit Besucher, die mit Fachbegriffen gespickten Informationen zu Krankheitsbildern und Behandlungsmethoden, finden, entschieden wir uns dazu, auf die von TYPO3 mitgelieferte Suche indexed_search zu verzichten und stattdessen auf den mächtigen Suchserver elasticsearch zu setzen. Dieser basiert, wie auch sein Mitstreiter Solr, auf der Such-Engine Lucene, bringt jedoch einen einsteigerfreundlich RESTful-Webservice auf Basis von JSON mit.

Um den Suchdienst mit Inhalten zu füllen, wird jede Sprachversion der Website einmal täglich mit dem Elasticsearch-Plugin River Web durchforstet. Dieser bietet die Möglichkeit mit CSS-Selektoren die einzelnen Unterseiten strukturiert im Such-Index abzulegen. Eine selbstentwickelte TYPO3-Erweiterung schickt nun die Suchanfrage des Benutzers, unter Verwendung von Techniken, wie einer unscharfen Suche, an den Suchserver und bereitet die zurückgegebenen Ergebnisse auf. So finden auch Nutzer ohne großes Latinum Krankheitsbilder, wie „Meralgia paraesthetica“.

Um den internationalen Besuchern bereits beim ersten Aufruf der Website einen hohen Komfort zu ermöglichen, erkennt TYPO3 automatisch die im Browser des Besuchers eingestellte Sprache und leitet ihn zur passenden weiter. Verwendet der Browser des Besuchers eine Sprache, in der die Website nicht übersetzt wurde, wird er automatisch auf die englische Version der Website weitergeleitet. Ein manuelles Wechseln der Sprache durch den Besucher ist weiterhin durch eine Sprachauswahl im Kopfbereich der Website möglich.

1.560 Seiten und 40.780 Inhaltselemente in zehn Sprachen hätten das händische Einpflegen der Texte in jeder Sprache zu einem sehr langen Prozess werden lassen. Deshalb entschiedenen wir uns für den Einsatz einer TYPO3-Erweiterung, die den Ex- und Import zu übersetzender Inhalte ermöglicht.

Das Frontend

Die neue Website sollte responsive werden, d. h. auf einer Vielzahl von Geräten und Bildschirmgrößen angepasst und bedienbar sein. Die Auswertung der Besucherstatistiken, der alten Website, ergab, dass die Besucher viele unterschiedliche Geräte, Browser und Browser-Versionen verwenden. Wir haben deshalb großes Augenmerk auf eine hohe Browser-Kompatibilität und Frontend-Performance gelegt. Dies beinhaltet das Zusammenfassen und Minifizieren von JavaScript-, CSS-, und HTML-Dateien, den Einsatz von Caching-Mechanismen und die Reduzierung der Bildgrößen. Die aktuelle Auswertung der Besucher-Statistik zeigt, dass 41 % der Website-Besucher die Website vom Smartphone aufrufen. Unsere Maßnahmen zur Reduzierung der Ladezeiten und Steigerung der Frontend-Performance erleichtern diesen Nutzern das Surfen auf der neuen Website der Avicenna Klinik.

Zahlreiche SEO-Maßnahmen an der Website selbst sorgen dafür, dass diese weiterhin gut bei Google und Co. gefunden wird. Dafür wurde gemeinsam mit den SEO-Experten von 42DIGITAL ein umfangreicher Maßnahmenkatalog erarbeitet, der anschließend von uns umgesetzt wurde.

Das Webhosting

Um die Ladezeiten der neuen Website drastisch zu reduzieren, wird diese bei Servivum auf schnellen SSD-Webservern gehostet. Die Server-Konfigurationen wurden dabei speziell an die Bedürfnisse der neuen TYPO3-Website angepasst. Die Reduzierung der Ladezeiten erhöht zum einen die Verweildauer der Website-Besucher und macht zum anderen die Bearbeitung für die Redakteure angenehmer, da auch das TYPO3-Backend schnell lädt.

Die kontinuierliche Erweiterung der Website

Die neue Website der Avicenna Klinik wird von uns im Rahmen einer Website-Service-Vereinbarung kontinuierlich gepflegt und erweitert. Unsere Arbeiten umfassen u. a. die Erweiterung der Inhalte auf Kundenwunsch, die Aktualisierung der eingesetzten Software, die Überwachung der korrekten Funktionsweise der Website, die Erweiterung und Entwicklung neuer Funktionen und die Anpassung des Designs. So ist sichergestellt, dass die Website auch langfristig den hohen Erwartungen der Avicenna Klinik und auch der Website-Besucher entspricht.

Zur Projektvorschau

Philip Isik

Philip kennt alle HTML-/CSS-Spezifikationen und rezitiert daraus fließend. Aus den Kundenwünschen leitet er Lösungen mit Weitblick ab.