Margot Blanchard goes online
Das Hörspielprojekt „Margot Blanchard ermittelt” läuft nun schon seit drei Semestern. Wie es sich für ein gutes Projekt gehört, hat auch dieses eine eigene Website verdient. Stichwort Distribution: Dass jemand auf Spotify über unser Werk stolpert, wäre ein kleines Wunder.
Ziel der Webseite ist es, das Projekt „Margot Blanchard ermittelt” einfach und kompakt vorzustellen. Dabei sollte das Ganze visuell ansprechend sein und schnell und einfach zu den tatsächlichen Folgen weiterleiten. Des Weiteren stellen wir uns als Autoren und Macher des Projekts kurz vor. Dafür haben wir eigens einheitliche Fotos von uns schiessen lassen.
Die Website ist im bisherigen Erscheinungsbild gestaltet und so aufgebaut, dass sie ganz einfach um weitere Folgen erweitert werden kann. Zu jeder Folge habe ich einen kurzen Text verfasst, der erklärt, worum es in der jeweiligen Folge geht, und der sie ein bisschen schmackhaft machen soll.
Ich habe anfangs mit einem simplen HTML-Skelett begonnen. Dieses musste jedoch immer wieder angepasst werden, damit der HTML-Code den interaktiven Elementen gerecht wurde. Anschließend habe ich mit CSS und JavaScript den Text und die eingebetteten Spotify-Folgen gestaltet.
Die Website ist aktuell unter meiner persönlichen Domain zu finden. Sie ist visuell ansprechend gestaltet, ohne vom Fokus auf die Folgen abzulenken, und erfüllt ihren Zweck.
(vha)
Grafische Elemente
Die grafischen Elemente gab es zwar schon zuvor und sie wurden von Suena für die Spotify-Cover erstellt. Ich musste sie jedoch noch einmal separat im Illustrator aufbereiten, um sie sinnvoll in die Webseite einzufügen. Ich habe mehrere Varianten ausprobiert. Schlussendlich entschied ich mich für einen Hintergrund mit Farbverlauf und einer Silhouette mit Farbverlauf.
Interaktive Elemente
Obwohl ich schon die eine oder andere Webseite in diesem Studium programmiert habe, war es das erste Mal, dass ich mit interaktiven Scroll-Elementen gearbeitet habe. Entsprechend viel Mühe hatte ich damit. Grundsätzlich sind es zwei interaktive Elemente: der Snap von Artikel zu Artikel und das Hineinfliegen der Silhouetten.
Beim Snap hatte ich einige Probleme: Einmal snappte es nur zu einem bestimmten Artikel, ein anderes Mal snappte es konstant zwischen zwei Artikeln hin und her usw. Ich versuchte es sowohl mit JS- als auch mit CSS-Mechaniken. Vor allem der „About us”-Artikel bereitete mir Probleme, da dieser je nach Viewportgröße höher als 100 vh ist. Wenn es dort immer auf die Mitte snappte, konnte ich den oberen und unteren Teil des Artikels quasi nicht mehr lesen. Schlussendlich löste ich das Problem, indem ich das Snappen bei Artikeln mit Höhen von >100vh einfach deaktivierte. Enger Begleiter bei diesen Arbeiten war selbstverständlich der Claude Co-Pilot, der manchmal hilfreich war und manchmal weniger.
Dann sind da noch die Elemente, die hineinfliegen. Auch damit hatte ich mehr zu kämpfen als erwartet. Zunächst versuchte ich, sie als reguläre Div-Elemente in den Sektionen zu platzieren. Dies funktionierte leider nicht. Obwohl ich sie absolut platzierte, überlappten sie sich teilweise mit den Grafiken anderer Artikel. Dann versuchte ich, sie als „background-image” zu platzieren, aber ich konnte sie gar nicht mehr vernünftig formatieren. Schlussendlich fügte ich sie ganz oben im Index hinzu und ließ sie dann per JavaScript ein- und ausblenden.
Die Hintergründe versuchte ich ebenfalls mit CSS Gradient zu stylen. Es funktionierte jedoch besser mit den SVG-Grafiken aus Adobe Illustrator.
Gesamtprodukt
Am Anfang hatte ich ein relativ genaues Bild im Kopf, wie ich die Webseite gerne hätte. Während der Arbeit hatte ich den einen oder anderen Zweifel, ob das gut werden würde. Ich begann immer wieder mit abgespeckten Versionen der Elemente und versuchte dann, sie zu optimieren. Nun kommt sie dem Bild, das ich anfangs im Kopf hatte, schon sehr nahe. Die Webseite ist sicherlich kein Meisterwerk, doch ich finde, sie sieht schick aus und erfüllt ihren Zweck. Unser Hörspiel vorstellen.