Das Erstellen einer Band-Webseite

Eine Band ohne Webseite in der heutigen Zeit? Das geht doch nicht. Ich habe mich deshalb vor den Bildschirm gesetzt, um meiner Band «Blue Memories» eine digitale Visitenkarte zu erstellen.

Als kompletter Anfänger, was das Erstellen von Webseiten angeht, wollte ich zu Beginn auf bekannte CMS zurückgreifen. Das Problem war nur, dass wir als Band uns für ein Theme hätten entscheiden müssen. Der Kreativität und Gestaltung waren zudem Grenzen gesetzt und irgendwie reizte es mich, eine Webseite selber zu coden.

Ich habe mich also entschieden, die Webseite als Headless WordPress zu gestalten. Somit hatte ich beim Frontend freie Bahn für die Gestaltung, währenddem ich die Daten wie Bilder, Text und Links im Backend verwalten konnte. Ein weiterer Vorteil liegt darin, dass nun alle Bandmitglieder selbst, ohne Programmiererfahrung, Elemente wie News, Konzerte oder Bilder erstellen können. Diese werden nach Veröffentlichung per fetch() dynamisch auf der Webseite geladen.

Die Webseitengestaltung erfolgte in Absprache mit den anderen Bandmitgliedern und nur mit HTML, CSS und Javascript. Das Wissen dafür stammt aus den Digezz-Coachings, dem Modul «Interaktive Medien» und dem Selbststudium. Neben der Gestaltung musste auch der grösste Teil des Inhaltes neu gemacht werden, weil noch nichts Vergleichbares vorhanden war. Ich kramte also im siebenjährigen «Bandarchiv» und schrieb Texte zu Konzerten und der Bandgeschichte, setzte eine neue Mail-Adresse auf, holte alte Fotos ans Tageslicht und gestaltete ein Medienpaket für Zeitungen.

Zusätzlich habe ich in einem Fotoshooting neue Bandfotos gemacht, welche in der Webseite integriert sind (Portraits mit blauem Hintergrund + Bilder auf der Landingpage). Was schon vor der Webseite vorhanden war und auf dass ich designtechnisch aufbauen konnte, war der Band-Schriftzug und natürlich die ganzen Medien (Konzertbilder, Videos und Audios), an denen ich zwar beteiligt war, welche aber nicht innerhalb des Digezz-Projektes erstellt wurden.

Nach so vielen Jahren endlich eine Band-Webseite zu haben, welche ich zudem noch entwickeln durfte, erfüllt mich mit Stolz. Nun können auf einer Plattform Informationen zu Band, Konzerten und weiterem gefunden werden. Ich bin gespannt darauf, wie die Webseite anläuft und sich in der Zukunft entwickelt. Denn eine Webseite ist nie richtig fertig 🙂 .

Den Link zur Webseite findest Du hier:

www.bluememories.ch

(bas)

Idee

Auf die Idee, eine Band-Webseite zu erstellen, kam ich relativ schnell. Ich fühlte mich jedoch unsicher, wenn es darum ging, eine ganze Webseite zu coden. Die erste Blockwoche vom Modul «Interaktive Medien 2» und ein Call mit Nick Schneeberger haben mir jedoch gezeigt, dass es gut möglich ist, mit meinem Vorwissen in dieser Zeit zu einem Resultat zu kommen. Der Gedanke, am Schluss selbst eine Webseite erstellt zu haben, motivierte mich zusätzlich, worauf ich beschloss, das Projekt in Angriff zu nehmen.

Konzept

Mein Ziel war es, mit Headless WordPress eine Band-Webseite zu erstellen. Diese sollte die fünf Elemente News, Bandgeschichte, Konzerte, Medien und Kontakt enthalten. Die Newsbeiträge, Konzerte und Bilder sollten dynamisch in die Webseite eingebunden werden, sodass jedes Bandmitglied in Zukunft via WordPress Beiträge erstellen oder ändern kann. Der Rest würde auf Atom hartcodiert werden. In Absprache mit der Band kam die Idee auf, zusätzlich neue Fotos zu machen, welche sich beim Hovern auf der Webseite verändern würden. Schlussendlich sollte eine virtuelle Visitenkarte entstehen, welche im CD der Band gehalten ist und auch auf mehreren Geräten funktioniert (Thema Responsiveness).

Produktionsprozess

Der Produktionsprozess lässt sich grob in drei Teile gliedern: die Vorproduktion, das Programmieren/Coden der Webseite und das Erstellen der Bandfotos.

Vorproduktion:

Aus den Digezz-Coachings entnahm ich die Informationen zum Aufbereiten einer Headless WordPress-Webseite – welche Plug-ins ich am besten verwende, wie ich es verlinke mit meinen lokalen Dateien, etc. Teil der Vorproduktion war es auch, mit dem Hosting-Anbieter in Kontakt zu treten, um Fragen über Mail, Datenbank und Domain zu klären. Die Webseite aufzubereiten gestaltete sich einfach, aber es dauerte eine Weile, bis alles funktioniert hat.

Programmieren/Coden:

Mit den Vorstellungen der Band im Kopf zeichnete ich Wireframes, um eine Idee für den Aufbau zu bekommen. Als nächstes folgte das Erstellen der Grundstruktur für die Webseite. Dabei konnte ich mich an den Übungen und Aufgaben aus dem Modul «Interaktive Medien» orientieren. Das Programmieren der fetch()-Befehle stellte sich als sehr zeitaufwendig heraus. Besonders am Einfügen von mehreren Bildern hatte ich lange, da zweimal durch einen Beitrag geloopt werden musste, weil das JSON-File von WordPress so aufgebaut war. Neben dem Programmieren schrieb ich die Texte zu allen Beiträgen, holte alte Bilder und Informationen aus dem Bandarchiv und setzte sie je nachdem in die WordPress-Beiträge oder den HTML-Code ein. Auch bestehende Songs und Musikvideos habe ich implementiert. Als die Webseite mit dem meisten Inhalt gefüllt war, begann ich sie mittels CSS zu designen. Dabei experimentierte ich mit verschiedenen Arten, um Elemente anzuzeigen (Hover-Effekte, Grid, Flexbox, etc.). Der Abschluss bildete das «Umbauen» zu einer responsiven Webseite mithilfe von CSS Media Queries.

Bandfotos:

Das Erstellen der Bandfotos (Portraits mit blauem Hintergrund + Bilder auf der Landingpage) geschah relativ früh im Prozess, da ich die Bilder zur Gestaltung der Webseite gebraucht habe. Aufgenommen wurden sie im Bandraum, welcher ich kurzerhand in ein Greenscreenstudio umgebaut habe, und weiterverarbeitet mit Adobe Lightroom und Photoshop. Das Keying von zwölf Bildern war aufgrund des nicht homogenen Greenscreens und der Haare sehr anspruchsvoll. Trotz der Hilfe von YouTube-Videos hiess es ausprobieren und nochmals ausprobieren.

Endprodukt

Meiner Meinung nach muss am Endprodukt die Usability noch verbessert werden – aus Sicht des Codes, wie auch aus Sicht der Nutzer*innen. Die Semantik zum Beispiel habe ich fälschlicherweise nicht immer stringent durchgezogen. Manche Elemente haben deutschsprachige Klassen, andere haben englische Id’s. Auf der Nutzerseite wären manche Interaktionen noch wünschenswert gewesen. Die Bilder hätten beispielsweise noch per Klick vergrössert werden können. Auch ein Hamburger-Menü in der Hochformat-Version hätte zu einer besseren Usability geführt. Die Konzerttexte sind bis jetzt noch kurz gefasst und vielleicht ein wenig generisch. Es war jedoch auch schwierig, sich an Konzerte zu erinnern, welche fünf Jahre in der Vergangenheit liegen.

Was ich trotz der verlängerten Ladezeit als gelungen empfinde, sind die elementspezifischen Fetches. Zum Beispiel werden News, die älter sind als drei Monate, nicht mehr auf der Webseite angezeigt. Auch eine Empty State war mir wichtig, obwohl ich nicht hoffe, dass drei Monate keine News erscheinen :-). Des Weiteren werden Konzerte aufgrund des Datums automatisch in anstehend und vergangen sortiert.

Neben den Fetches funktionieren auch die Effekte und Links gut. Zudem sind alle möglichen Informationen auf der Webseite zu finden, ohne dass sie überfüllt wirkt. Mit dem Endprodukt habe ich meine Ziele aus dem Konzept also erreicht. Ganz zufrieden bin ich jedoch noch nicht, weshalb ich das Projekt definitiv noch weiter verfolgen werde, um es in Zusammenarbeit mit der Band zu verbessern.

Selbstreflexion

Durch das Selbststudium und viel Ausprobieren habe ich wahrscheinlich nicht nach Best Practice gearbeitet. Die Motivation zu Beginn des Projektes hat bei mir dazu geführt, dass ich viele Dinge gleichzeitig machen wollte. Das wiederum führte zu Fehlern oder Falschüberlegungen im Code, welche ich nachher debuggen musste. Als es um das Fetchen von Dateien ging, war ich zu Beginn stark auf die Hilfe von Coachings angewiesen, da ich Javascript erst frisch kennengelernt habe und die Sprache noch «verstehen» musste. Ich fand es grundsätzlich sinnvoll, möglichst viele Coachingangebote anzunehmen, da sie jeweils einen Checkpoint darstellten und mich zum regelmässigen Arbeiten verpflichteten. Was ich nachträglich unterschätzt habe, ist die Zeit, welche es beansprucht, um Elemente so zu platzieren, wie man es möchte. Ich brauchte viel Geduld und Konzentration. Als es auf die Abgabe zuging und ich merkte, dass die Webseite noch nicht genug responsive war, musste ich Prioritäten setzen und persönlich Abstriche machen, um mein Konzept zu erfüllen. Das hätte mit einer grösseren Weitsicht womöglich verhindert werden können.

Learnings

Eine Webseite erstellt man nicht über Nacht. Das habe ich gelernt. Es braucht unfassbar viel Zeit, um eine Idee per Code umzusetzen. Manchmal braucht es ein nur Element, bei dem ein Buchstabe fehlt und das ganz Konstrukt fällt zusammen. Längere Zeitblöcke zum Arbeiten machen deshalb mehr Sinn, um Fehler debuggen zu können. Neben dem Coden habe ich verschiedene Plugins und Werkzeuge kennengelernt, welche eine Webseite nachhaltig ergänzen. Durch das Experimentieren und Ausprobieren konnte ich mein Wissen über Webseitengestaltung und das Bearbeiten von Fotos zudem vertiefen. Ein grosses Learning für mich war, dass beim Coden Kommentare das A und O sind. Sie helfen dabei, sich besser orientieren zu können. Das womöglich wichtigste Learning war jedoch: Nicht aufgeben! Egal wie lange eine Blockade dauert. Man darf nicht aufgeben.

Ausblick und Fazit

Mein Ziel ist es, die Webseite bis zum Start des nächsten Semesters in puncto Sicherheit und Cookies, Ladegeschwindigkeit und Usability zu verbessern. Besonders bei der Usability sehe ich noch Luft nach oben, da die Inhalte nicht auf allen Geräten gleich gut responsive sind. Im Grossen und Ganzen hat mir das Digezz-Projekt Spass gemacht und meine Bewunderung für Webseitendesigner*innen ist durch die Arbeit noch grösser geworden.