Die Welt etwas näher
zusammenbringen

Dank unserer erfolgreichen Zusammenarbeit mit dem Reformationsjubiläum 2017 e. V. wurden wir von der Stiftung Friedensdialog der Weltreligionen und Zivilgesellschaft beauftragt, innerhalb eines Monats ihre neue, komplexe Seite (Ring for Peace) zu konzipieren, zu entwickeln und zu launchen. Hinzu kam die Bitte, eine zusätzliche Landingpage mit einem eigenen Framework und unabhängigen Funktionen für ein internationales Event aufzusetzen. Dieses sollte sowohl physisch als auch virtuell stattfinden. Sollte, schließlich kam aber alles doch ein klein wenig anders als gedacht.

www.ringforpeace.org

Die Idee hinter der Website

Für ihre Tätigkeit benötigte die Organisation 2020 eine neue Website mit sehr viel Kraft, schließlich wurde das statische Webangebot den Ansprüchen einer international tätigen Stiftung, die in einer vernetzten und interaktiven Welt Gespräche initiiert, Tagungen organisiert und humanitäre Projekte unterstützt, schlicht nicht mehr gerecht. Innerhalb kürzester Zeit sollten wir deshalb eine neue Website aufsetzen, mit der bereits die Pressekonferenz zur 1st Assembly on Women, Faith & Diplomacy unterstützt werden konnte. Doch war das überhaupt möglich?

Webplanung und Webkonzeption

Webplanung und Webkonzeption

Das Team von Religions for Peace hatte von Beginn an eine klare Vorstellung, wie ihre neue Website aussehen sollte und was sie leisten musste. So erhielten wir eine erste Grundstruktur und ein Basislayout, welches wir mit unseren UI-/UX-Designern sukzessive weiter ausarbeiteten. Die Struktur war dabei äußerst raffiniert. Sie musste in der Lage sein, eine differenzierte Kategoriensystematik abzubilden und verschiedenste Rich-and-Deep-Content-Inhalte wiederzugeben.

Der User musste dabei so schnell wie möglich seine gewünschten Daten erhalten, die wiederum in einem intuitiven Layout integriert waren. Hinzu kam eine 3D-Animation, mit der die Stiftung ihre Besucher begrüßen wollte. In mehreren Zoom-Meetings überlegten wir zunächst gemeinsam, wie wir das Webdesign zusätzlich optimieren konnten und machten uns dann an die Arbeit.

Ring for Peace Startseite
Ring for Peace Projektübersicht Startseite

Vorgaben

Die Startseite beginnt nun in der Hero Area mit einer 3D-Animation und dem Claim der Stiftung. Zusätzlich bauten wir einen Slider für die wichtigsten Stiftungsthemen und gaben diesen ein eigenes Farbschema, um die späteren Artikel und Content-Arten präzise zuordnen zu können. Hinzu kamen noch ein Magazin-, Presse- und Medienbereich plus eine Selbstbeschreibung und ein Suchmodul.

Anstatt einer klassischen Paginierung, auf der User gezwungen zwischen den Seiten wechseln, entschlossen wir uns, eine dynamische Nachladefunktionalität zu implementieren. Diese garantiert eine gute Usability, indem sie schnell und sicher reagiert, weil sie eben immer nur die benötigten Inhalte nachlädt und nicht die ganze Seite. Das bedeutet auch eine überzeugende Webperformance, und zwar nicht nur mit modernen Browsern, sondern auch mit älteren, was weltweit einen niedrigschwelligen Zugang erleichtert.

WordPress nutzen, erweitern und selbst definieren

Wordpress nutzen

Für die Webentwicklung nutzten wir WordPress und erweiterten es nicht nur bis an seine Grenzen, was wir gerne tun, sondern bohrten es für das umfangreiche Projekt regelrecht auf. Die klassischen WordPress-Funktionalitäten bauten unsere Developer um und schufen so eine ganz eigene Backend-Systematik, die mit der klassischen WordPress-Logik eigentlich nichts oder nur sehr wenig zu tun hat.

Das Frontend erstellten wir mit dem CSS-Framework (the beloved) Bulma. Schnell, clever, wartungsarm können Entwickler damit responsive bzw. fluide Inhalte deviceübergreifend optimal darstellen. Zusätzlich verbauten wir zahlreiche auf JavaScript basierende dynamische Content-Elemente. Dabei verzichteten wir auf das mittlerweile veraltete jQuery und verwendeten stattdessen Vanilla-JavaScript.

Auf ACF setzten unsere Webentwickler fürs Backend, um höchstmögliche Freiheiten beim Content-Management zu gewährleisten, und für die Mehrsprachigkeit auf WPML, das ultimative Standard-Plug-in.

Onlinemagazin-Funktionalität

Neben den Start-, Projekt- und Themenseiten fügten wir noch eine Magazinfunktion hinzu, die einen eigenen Editorialbereich mit hochklassigen Interviews beherbergen wird. Um hier visuell zu überzeugen, setzten wir ein Zitat-Element ein.

Obwohl wir unter Hochdruck am Projekt arbeiteten, war der Zeitdruck immens, so dass wir uns hinsichtlich Prozessgestaltung etwas überlegen mussten, um die Deadline einhalten zu können. Deshalb übergaben wir bereits während der Programmierung einzelne Content-Bereiche den Content-Managern von Religions for Peace, damit diese parallel die umfangreichen Inhalte einfügen konnten. Ihr konstruktives Feedback in Form von Bugfix-Tickets nutzten wir als eine Form des Testings und behoben reziprok die Fehler. Durch diese Zeitersparnis konnten wir die Testphase massiv verkürzen und den Termin nicht nur einhalten, sondern sogar noch eine weitere Aufgabe ausführen.

Ring for Peace Startseite und Magazin

Microsite für ein globales Livestreaming-Event

Für die internationale Konferenz 1st Assembly on Women, Faith & Diplomacy, die eigentlich als hybride Konferenz geplant war (vor Ort und virtuell), bekamen wir – pandemiebedingt – den Auftrag, eine eigenständige Eventpage zu entwickeln. Diese Seite war ursprünglich dafür gedacht, das Event zu streamen, die unterschiedlichen Speaker darzustellen sowie die einzelnen Veranstaltungen in einem Kalender abzubilden. Nun musste das Event auf ‚virtual only‘ umgestellt werden. Das hieß für uns, den Fokus auf die Eventsite zu intensivieren.

Weitere Funktionalitäten mussten kurzfristig angedacht, umgesetzt, aber auch integriert und abgebildet werden. Doch welche Technik war passend für ein großes, internationales, weltumspannendes Event wie dieses? Nach kurzem Abwägen entschlossen wir uns, einen One-Pager als Landingpage auf der Website zu implementieren, auf der ein Event-Livestreaming der Veranstaltung gezeigt werden soll. Für die völlig unabhängige Landingpage orientierten wir uns am Layout der Stiftungssite und versahen es in der Hero Area mit einem Störer.

Social Wall, Greeting Platform und Chat

Für die Welt dort draußen gab es ein Streaming-Fenster über Vimeo, das barrierefrei erreichbar war. Es wurde auf mehreren Social-Media-Plattformen geteilt und war für jedermann zugänglich. Zudem gab es spezielle Sonderveranstaltungen und Workshops, die wegen ihrer Interaktivität ausschließlich über Zoom-Räume besucht werden konnten. Natürlich war es für jeden Interessierten vorher möglich, sich anzumelden. Ach, übrigens: Die Einladesystematik und der Log-in kamen von uns. Wir ergänzten nun noch:

  • Social Wall – alle sozialen Medien werden auf einer Seite angezeigt und gebündelt,
  • Greeting Platform – alle Teilnehmer können Grußbotschaften schicken,
  • Chat – zusätzlich installierten wir einen Chat, was wir über Slack (Chatila) lösten,
  • Medientraining.

Darüber hinaus integrierten wir in die Navigation als Widget eine Echtzeituhr, die in den Ländern die jeweilige lokale Zeit anzeigt, und einen Countdown.

Ring for Peace Eventpage Navigation

Scroll-Animation

Auch die Navigation wurde aufgrund der neuen Anforderungen komplett umgebaut. Wir fügten eine Scroll-Animation hinzu, bei der die Navigation aufklappt und zu bestimmten Trigger-Punkten führt.

Letztendlich fügten wir der Landingpage ein Event-Plug-in hinzu, das zur Registrierung und Anmeldung genutzt werden konnte und last but not least für alle Teilnehmer die Möglichkeit bereithält, eine Begrüßungsnachricht zu verschicken. Die Eventteilnehmer erhielten per Mail einen Auto-Log-in, einen temporären Log-in, um an den Sonderveranstaltungen und Workshops teilnehmen und interaktiv kommunizieren zu können.

Schnelle Umsetzung auf hohem Niveau

Wir erstellten in einer rekordverdächtigen Höchstgeschwindigkeit die Stiftungs- und Eventsite und nutzten dabei unseren bewährten Workaround. Das Feedback der User und natürlich auch das der Stiftungsverantwortlichen war sehr gut. Als wir livegingen, waren alle froh, dass wir gemeinsam diese Herausforderung, einschl. Zusatzaufgabe mitten in der Entwicklung bestanden hatten.

Doch das war ja erst der Beginn! Eine Website muss sich schließlich weiterentwickeln, muss Luft und Mut zum Wachsen haben. Es gilt, neue Features zu implementieren und eine fortwährende Optimierung aller Elemente zu garantieren und auch SEO-seitig muss alles im Blick bleiben. Was nutzt schließlich die beste Seite, wenn sie nicht gefunden wird? All diese Arbeiten werden im Rahmen eines Betreuungsauftrags umgesetzt.

Ring for Peace

Religions for Peace mit Sitz in New York hat es sich seit seiner Gründung 1970 zur Aufgabe gemacht, die unterschiedlichen Weltreligionen miteinander im stetigen Dialog zu verbinden und so für den Weltfrieden zu werben. Sie wird dabei von mehr als einhundert Führungskräften aus allen Glaubensrichtungen vertreten und von der Stiftung Friedensdialog gefördert. Der Ring for Peace soll die Botschaft für Frieden und Verständigung als Marke widerspiegeln. | www.ringforpeace.org

Weitere Projekte