Seit 2007 gibt es in Wetter-Volmarstein die Musikschule von Simone Stiers: die Vocal & Music School! Simone ist Sängerin und Gesangslehrerin – auch meine. Heute unterrichten dort drei Lehrkräfte Gesang, Klavier, Gitarre, E-Bass und Ukulele – für Kinder, Jugendliche und Erwachsene. Die alte Website war mit dem längst eingestellten iWeb von Apple gebaut und auf dem Stand von 2022; Räume, Angebot und Preise hatten sich seitdem geändert. Seit dem 14. Oktober ist die neue vocalandmusicschool.de online.
Gewünscht war ein freundlicher, maßvoller Auftritt ohne großartige Funktionen. Herausgekommen ist eine einzige Seite mit allem, was man vor der ersten Stunde wissen will – Unterricht, Zeiten, Preise, Gutschein, Anfahrt und Kontakt. Spannender als das Ergebnis ist diesmal der Weg dorthin. Er hat sich so bewährt, dass ich ihn für künftige Projekte übernehme.
Erst sichern, dann entwerfen
Bevor der erste Entwurf entstand, habe ich die alte Seite vollständig gesichert: Texte, Bilder, die Preisliste. Zu jedem Foto wurde notiert, woher es stammt und wer die Rechte daran hat; auf die neue Seite kam nur, was geklärt war. Handyfotos wurden dabei neu gespeichert, ohne die eingebetteten Ortsangaben.
Sechs Richtungen zum Anklicken
Statt Stimmungsbildern oder PDF-Entwürfen gab es von Anfang an echte Seiten. Zuerst drei Richtungen, die sich in Aufbau und Ton deutlich unterschieden – von der Ich-Form mit Du bis zur Wir-Form mit Sie –, später zwei Mischungen daraus. Sie standen auf demselben Fundament wie die anderen CARECOM-Seiten; die Richtung, die gewinnt, wird deshalb nicht nachgebaut, sondern zur Startseite.
Alles, was ich nur vermuten konnte, stand gelb markiert auf der Seite: der Rhythmus des Gesangsunterrichts, die Ferienregel, die Preise von 2022. Die Abnahmeregel war einfach: Nichts Gelbes geht live.
Das Wohnzimmer
Am Abend vor dem Treffen kam Simones eigenes Material: das Logo als Vektordatei, Fotos aus ihren Räumen und ein klarer Wunsch. Freundlich, warm und hell sollte die Seite sein, mit Wohnzimmergefühl – Gold wie die Spachtelwand im Unterrichtsraum, Braun wie Gitarren und Holz, Schwarz wie die Klaviere. Das weinrote Logo bleibt.
Daraus entstand noch am selben Abend eine sechste Richtung, das „Wohnzimmer“ – und die wurde es. Der Hintergrund oben ist ein Foto ihrer goldenen Wand, die Holzleiste darunter stammt von der Zederndecke einer Ukulele, ebenfalls aus Simones Fotos, und im Wochenplan trägt jedes Fach seine Farbe: Gold für Gesang, Holz für Gitarre, Schwarz für Klavier. Die Erfahrung dahinter ist nicht neu, bestätigt sich aber jedes Mal: Eigenes Material schlägt jede Vermutung von außen.
Bausteine statt Ideenliste
Ideen für das gewisse Etwas lagen nicht als Liste bereit, sondern als fertige Bausteine auf einer Skizzenseite, neun an der Zahl: ein Kammerton a′ zum Antippen, ein Gutschein im Stil einer Konzertkarte, eine Anfahrtskarte, ein Plakat mit QR-Code zum Aushängen und einiges mehr. Rausnehmen geht schneller als Bauen. Im Treffen blieb deshalb für jeden Baustein nur eine Frage: rein, später oder nein?
Ein Fragebogen fürs Treffen
Das Herzstück war ein geführter Fragebogen, ebenfalls als Seite. Seine Abschnitte folgen der Reihenfolge, die der Livegang braucht: Ziel, Richtung, Ton, Inhalte, Preise, Kontakt, Bilder, die Extras – und am Ende ein Parkplatz für Ideen, die warten können. Was Simone schon geschickt hatte, war vorausgefüllt und als Vorschlag gekennzeichnet. Rechts lief eine Vorschau der Seite mit und sprang zu jedem Thema an die passende Stelle.
Dreimal gab es einen Zwischenstand. Die Antworten gingen dann als Text an Claude Code; während Simone und ich weiter ausfüllten, wurde die Seite umgebaut, und ein Klick auf „Neu laden“ zeigte den neuen Stand. So entstand die Seite im Gespräch – nicht in einer Runde danach.
Online um 13:35 Uhr
Um 11 Uhr hatte das Treffen begonnen, um 11:28 Uhr stand der erste Umbau. Kurz nach zwölf war das Wohnzimmer die Startseite, danach folgte eine Durchsicht: neue Preise, ein Gutschein auf Stundenbasis, ein paar Sätze weniger. Um 13:27 Uhr gab Simone frei, um 13:35 Uhr war die Seite online. Direkt im Anschluss wurde geprüft, ob die alten Adressen richtig umgeleitet werden, ob die Fehlerseite greift und ob alles verschlüsselt ankommt.
Eine Idee kam erst im Treffen dazu: neben dem Kammerton ein kleines Stimmgerät für die Gitarre. Wer eine Saite antippt, hört ihren Ton. Wer das Mikrofon einschaltet, schlägt die Saite an, und die Anzeige zeigt, ob sie zu tief, zu hoch oder richtig gestimmt ist. Ausgewertet wird nur im Browser, nichts wird aufgenommen oder übertragen, und nach fünf Minuten gibt das Stimmgerät das Mikrofon von selbst wieder frei. Fertig war es noch vor dem Livegang.
Fertige Dateien bei Strato
Die Website liegt weiter bei Strato, wo Simone auch ihre Domain und ihr Postfach hat. Ein solcher Webspace kann keine ASP.NET-Anwendung als Server betreiben. Blazor WebAssembly wäre trotzdem möglich gewesen: Der Browser lädt dabei die .NET-Laufzeit herunter und führt die Anwendung selbst aus – viel Gepäck für eine Seite, die außer dem Stimmgerät nichts Interaktives braucht. Deshalb wird die Website zwar mit demselben Fundament gebaut wie carecom.de, ausgeliefert aber als fertige Dateien: Ein kleines Werkzeug ruft jede Seite einmal ab, speichert sie als HTML-Datei und meldet dabei kaputte Links. Hochgeladen wird per SFTP; die Anmeldung läuft über einen hinterlegten SSH-Schlüssel statt über ein Passwort. Saubere Adressen ohne „.html“ und die Umleitungen der alten iWeb-Adressen regelt eine Konfigurationsdatei für den Webserver, die vorher lokal unter Apache und mit einem Probeordner bei Strato geprüft wurde.
Für Simone läuft damit nichts, was gepflegt, aktualisiert oder überwacht werden müsste – den Webserver betreibt Strato. Es gibt keine Datenbank, keine Cookies und kein Tracking – und deshalb auch kein Cookie-Banner. In Googles Prüfwerkzeug Lighthouse erreicht die Startseite bei Barrierefreiheit, Best Practices und SEO jeweils 100 von 100 Punkten.
Auch auf Papier
Zwei Dinge gibt es zum Ausdrucken: Gutscheine für Gesang, Klavier und Gitarre im Stil einer Konzertkarte – drei auf einem A4-Blatt, zum Ausfüllen von Hand – und ein Plakat für den Gitarrenunterricht, dessen QR-Code direkt zum passenden Abschnitt der Seite führt. Beides entsteht aus Druckseiten derselben Website als PDF mit eingebetteten Schriften, bereit für den Copyshop.
Wer in Wetter und Umgebung Gesang, Klavier, Gitarre, E-Bass oder Ukulele lernen möchte: Die Probestunde ist kostenlos, alles Weitere steht auf vocalandmusicschool.de. Und wer sich für den eigenen Betrieb eine Website auf diese Weise wünscht – gründlich vorbereitet und gemeinsam entschieden: Dafür gibt es das CARECOM Consulting.