Unser Frontend-Team wurde vom Schweizer Radio und Fernsehen beauftragt, ein spannendes Parallax-Konzept einer sendungsbegleitenden Website über das internationale rote Kreuz zu realisieren.

Die Herausforderung dabei war, die Website auch auf allen gängigen iPads performant zugänglich zu machen. Mittels frühem Prototyping und contentspezifischer Performanceoptimierung schufen wir eine hochperformante Parallax-Website - auch für iPads. Zudem wurde für Smartphones und ältere Browserversionen eine mobile Alternative entwickelt.

Die Challenge

Parallax-Websites gibt es viele. Die allermeisten sind jedoch nicht iPad fähig und wenn Sie es doch sind, ist die Performance oft sehr schlecht. Selbst kreativste Parallax-Konzepte können dann die User-Experience nichtmehr positiv beeinflussen, denn das Scrollen muss immer komfortabel sein.

Unsere Aufgabe war es, ein solches Konzept mit sehr guter Performance aufs iPad zu bringen. Es bestand seitens Kunde bereits ein Basiskonzept, dass es galt, auf Desktops und iPads zu realisieren. Um die Realisierbarkeit und die erreichbare Qualität beurteilen zu können, wurde ein testbarer Prototyp entwickelt, der diverse kritische Aspekte beleuchtete. Gemeinsam mit dem SRF besprachen und verbesserten wir diesen regelmässig. Er bildete die Entscheidungsgrundlage für das weitere Verfahren.

Der Prototyp

für die erste Testphase

development_protoype
entwickeln & testen

Aus den Erfahrungen des Prototypen konnten wir nun ein solides Basisframework auf die Beine stellen, welches uns als Entwicklungsgrundlage diente. Als Grundlage bauten wir eine eigene Scroll-Engine, die sämtliche Benutzerinputs - von der Maus bis zum Finger - prüft und selbstständig die Bewegung der Elemente (hardwarebeschleunigtes CSS3) übersetzt. So hatten wir beste Kontrolle über die Performance bei unterschiedlichen Eingabetechniken - aber auch die Arbeit, vieles spezifisch zu realisieren. Da das Projekt aus digitalen Reportagen aus fünf Ländern bestand, entschlossen wir als erste Iteration ein Land zu realisieren, um danach wiederum aus den Erkenntnissen zu lernen und die anderen Länder schnell implementieren zu können.

Performance optimieren

Es stellte sich heraus, dass die Performanceoptimierung der Website stark contentabhängig war. Mittels «AnimationFrame-Technik», gutem predecoding und pre-resizing von Images und sorgfältiger Wahl von Effekten und Animationen, konnten wir so eine hohe Performance erreichen. Gemeinsam mit dem SRF testen und verbesserten wir in einer intensiven Phase zahlreiche Aspekte der Website iterativ.

Das Ergebnis

Die viersprachige Microsite zur SRF-Dokumentation über das rote Kreuz ist eine Microsite, die eigentlich nicht «Micro» ist. Fünf digitale Reportagen mit über 300 Contentseiten und 200 Videos liefern mittels gutem storytelling auf emotionale Art und Weise relevante flankierende Informationen, die einen echten Mehrwert zur Sendung darstellen. Selten hat eine umfangreiche Parallax-Website eine so gute Performance auf iPads erreicht, wie diese. Das trägt sicherlich auch dazu bei, dass diese Parallax-Website intensiv auf dem iPad besucht wird.

Ein herzliches Dankeschön geht an das Team bei SRF, dass uns fachkompetent unterstützt hat und unermüdlich getestest, sowie Content gepflegt und geliefert hat!

Gefällt dir diese Casestory?