
Relaunch Love Life - Digitale Informationsplattform & Safer-Sex-Check
Kunde
Bundesamt für Gesundheit (BAG)
https://www.bag.admin.ch
Technologien
Headless CMS
React mit Next.js
Azure Cloud
Disziplinen
Beratung
Software Entwicklung
Eine Website als Zentrum der Kampagne
Die neue LOVE LIFE-Kampagne des Bundesamtes für Gesundheit BAG in Kooperation mit ROD Kommunikation und Blueglass ist eine der Massnahmen zur Umsetzung des Nationalen Programms «Stopp HIV, Hepatitis B-, Hepatitis C-Virus und sexuell übertragene Infektionen (NAPS)». Sie zielt darauf ab, das Wissen über sexuell übertragbare Infektionen sowie die sexualitätsbezogene Risikokompetenz und Handlungssicherheit in der Bevölkerung zu stärken.

Digitale Informationsplattform mit Safer-Sex-Check als zentrales Kommunikationsmittel
Alle Kommunikationsmassnahmen, sowohl online als auch offline, lenken die Aufmerksamkeit auf die LOVE LIFE-Website und den Safer-Sex-Check. Auf dieser Website LOVE LIFE - Sex, but safer gibt es wichtige Informationen zu Risiken, Schutz und Tests, sowie Adressen von Test- und Beratungsstellen. Um die Handlungs- und Risikokompetenz sexuell aktiver Menschen zu stärken, fokussiert die neue LOVE LIFE Kampagne auf persönliche, risikobasierte Schutz- und Testempfehlungen anstatt auf allgemeine Safer-Sex-Regeln für alle. Dazu wurde ein Safer-Sex-Check erarbeitet, der individuelle Handlungsmöglichkeiten aufzeigt.

Das Digital-Experiences-Team unserer Partner-Agentur Blueglass durfte diese umfassende Informationsplattform inkl. Online Safer-Sex-Check neu konzipieren, das Screen Design erstellen und umsetzen. Wir von Sitewerk waren in diesem Projekt für die technische Umsetzung verantwortlich.
Diese wichtigen Punkte mussten wir bei der technischen Umsetzung besonders beachten:
- Hohe Anforderung an die Skalierbarkeit mit bis zu sechsstelligen Anfragen pro Tag
- Abbildung der komplexen Regel-/Businesslogik für die zuverlässige Generierung der persönlichen Schutz- und Testempfehlungen
- Hohe Anforderungen an SEO sowie Caching und Server Side Rendering
Die Architektur der Digitalen Plattform Lösung
Für die Umsetzung dieses Projektes haben wir uns für eine Kombination aus einem Headless CMS, API-Architektur und Schweizer Hosting entschieden, um ein robustes und sicheres System zu schaffen. Diese Architektur ermöglicht eine sichere, flexible und skalierbare Lösung.

Die Umsetzung der Informationsplattform mit dem Headless CMS Strapi
Für die technische Implementierung wurde das als Open-Source-Software entwickelte CMS Strapi eingesetzt, um den Sicherheitsanspruch des Bundes und die weiteren vielfältigen Anforderungen zu erfüllen.
Das Headless CMS trennt das Backend, in welchem die Inhalte erstellt und verwaltet werden, vom Frontend, das die Inhalte anzeigt. Diese Trennung bietet mehrere Vorteile:
Bessere Skalierbarkeit
Inhalte können über verschiedene Kanäle (Webseiten, Apps, IoT-Geräte) hinweg zentral verwaltet und leicht an unterschiedliche Endpunkte ausgeliefert werden.
Modularität
Mit Strapi ist eine komponentenbasierte Umsetzung der Website möglich. So war auch die Einbindung des Safer-Sex-Checks ins gleiche CMS kein Problem. Diese Architektur ermöglicht es, einzelne Komponenten komplett unabhängig voneinander zu entwickeln und zu verwalten.
Schnellere Entwicklung
Entwickler können unabhängig voneinander am Backend und Frontend arbeiten, was den Entwicklungsprozess beschleunigt und verkürzt.
Skalierbar und Flexibel
Durch seine hohe Skalierbarkeit und Anpassungsfähigkeit von Strapi, kann das System problemlos erweitert werden, um wachsenden Anforderungen der Website gerecht zu werden

Headless Content Management Systeme (CMS) sind in aller Munde
Wenn Sie mehr zum headless CMS Strapi erfahren möchten, empfehlen wir Ihnen den Blog Artikel unseres erfahrenen Devs Alain.
Schweizer Hosting der kompletten Software-Lösung für den Bund
Es war eine Anforderung des BAG, dass die Website in der Schweiz betrieben wird. Daher fiel die Wahl auf die self-hosted Version von Strapi, die innerhalb der Microsoft Azure Cloud in einem Schweizer Rechenzentrum läuft.
Das Hosting in der Schweiz bietet besondere Vorteile:
Datenschutz und Sicherheit
Die Schweiz hat strenge Datenschutzgesetze, die einen hohen Schutz für gespeicherte Daten gewährleisten.
Hohe Verfügbarkeit und Leistung
Schweizer Hosting-Anbieter bieten moderne Infrastrukturen und Technologien. So wird eine hohe Verfügbarkeit und schnelle Ladezeiten garantiert.
Hervorragende Performance mit React und Next.js für das Frontend
Die Entscheidung, das Frontend mit React und Next.js zu erstellen, bringt zahlreiche Vorteile mit sich, insbesondere im Hinblick auf die Performance und Suchmaschinenoptimierung (SEO). Next.js ist ein leistungsstarkes Framework für React, das serverseitiges Rendering (SSR) unterstützt. Mit SSR wird der HTML-Inhalt der Webseite bereits auf dem Server generiert und nicht erst im Browser des Nutzers. Diese sofortige Bereitstellung der Inhalte reduziert die Ladezeit erheblich und verbessert die Performance der Webseite erheblich. Insbesondere bei mobilen Geräten oder langsameren Internetverbindungen ist dieser Geschwindigkeitsvorteil spürbar und wichtig für eine hervorragende Nutzererfahrung (UX).
Darüber hinaus ist SSR auch aus SEO-Sicht äusserst vorteilhaft. Suchmaschinen bevorzugen Webseiten, die schnell laden und deren Inhalte leicht zu indexieren sind. Da der HTML-Inhalt bei SSR bereits auf dem Server erstellt wird, können Suchmaschinen-Crawler den Inhalt der Seite schneller und effizienter analysieren. Dies kann zu einer besseren Platzierung in den Suchergebnissen führen und somit die Sichtbarkeit und den Traffic der Webseite erhöhen.
Zusätzlich zu diesen Vorteilen bietet Next.js eine Vielzahl weiterer Funktionen, die die Entwicklung und Wartung von Webanwendungen erleichtern. Dazu gehören unter anderem das automatische Code-Splitting, dynamische Routen, statische Exporte und die einfache Integration von APIs. Diese Features machen Next.js zu einer ausgezeichneten Wahl für moderne Webentwicklungsprojekte, die hohe Performance und SEO-Relevanz erfordern.

Es freut uns sehr, durfte Sitewerk einen Teil zu dieser wichtigen Aufklärungs-Kampagne beitragen.
Wollen Sie mehr über die Love Life Kampagne erfahren?
Weitere spannende Website Projekte
Referenzen