Meine erste Website

Der Bedarf

Ich brauchte einen Link, den ich auf LinkedIn mit Menschen teilen konnte, die genauer verstehen wollten, was ich mache. Mein Profil vermittelt einen ersten Eindruck; die Website ermöglicht es mir, Interessierte gezielt zu weiterführenden Inhalten zu führen. Besucher sollen sich innerhalb weniger Sekunden zurechtfinden, die verfügbaren Möglichkeiten erkennen und wissen, wo sie mehr erfahren können.

Ich habe auch an diejenigen gedacht, die später dazukommen, wenn meine Projekte eine eigene Geschichte zu erzählen haben. Potenzielle Partner und Investoren sollen nachvollziehen können, woran ich arbeite, die Entwicklung verfolgen und sehen, was aus diesen Projekten entsteht. Deshalb habe ich eine Struktur vorgesehen, die neue Inhalte aufnehmen kann, ohne jedes Mal neu gestaltet werden zu müssen. Neue Seiten können parallel zu den Projekten entstehen.

Es war das erste Mal, dass ich eine Website erstellt habe. Ich habe die Arbeit nach derselben Methode organisiert, die ich bei Kunden anwende: klare Anforderungen, nachvollziehbare Entscheidungen und Prüfungen vor der Veröffentlichung. Claude hat die Entwicklung übernommen; ich habe die Regeln festgelegt, Vorschläge bewertet und Lösungen getestet. Für das visuelle Design habe ich direkt an der tatsächlichen Website gearbeitet, Themes auf verschiedenen Ebenen ein- und ausgeschaltet und das Ergebnis auf meinen beiden Bildschirmen und meinem Smartphone überprüft. Veröffentlicht habe ich nur, was ich zuvor in einer Vorschau gesehen hatte.

Rahmenbedingungen

Von Anfang an habe ich klare Grenzen gesetzt: kostenloses Hosting, keine Datenbank und keine Cookies. Barrierefreiheit nach WCAG 2.2 AA und visuelle Qualität mussten gleichermaßen gewährleistet sein. Die Inhalte müssen auch ohne JavaScript lesbar bleiben, und die Website muss auf iPhone und iPad zuverlässig funktionieren. Ich habe acht Sprachen eingeplant, darunter Arabisch mit Schreibrichtung von rechts nach links und vereinfachtes Chinesisch.

Entscheidungswege

1. Entscheidung

   Die Startseite beginnt mit einer 3D-Auswahl aus Kacheln. Auf weniger leistungsfähigen Computern wechselt sie automatisch zu einfachen Karten, während sie auf dem Smartphone zu einem App-ähnlichen Symbolraster wird.

   Verworfene Alternativen

   Kacheln in Ringform; nur ein klassisches Menü.

   Begründung

   Der erste Bildschirm soll sofort Orientierung bieten und deutlich machen, wie es weitergeht. Die Darstellung passt sich dem Gerät an, damit die Navigation auch bei begrenzten Ressourcen schnell bleibt.

2. Entscheidung

   Das Kontaktformular erfordert eine Bestätigung per E-Mail. Ich erhalte die Nachricht erst, nachdem die absendende Person den zugesandten Link geöffnet hat.

   Verworfene Alternativen

   E-Mail-Adresse direkt auf der Seite veröffentlicht; kostenpflichtiger Formulardienst.

   Begründung

   Durch die Bestätigung lässt sich verhindern, dass das Formular dazu verwendet wird, in meinem Namen E-Mails an fremde Personen zu versenden. Die Daten bleiben in Tools, die ich kontrolliere.

3. Entscheidung

   Für die Aktualisierung der Inhalte habe ich einen eigenen Editor auf der Testwebsite entwickelt, der über einen per E-Mail erhaltenen Code zugänglich ist. Jede Änderung erzeugt eine Vorschau, die ich vor der Veröffentlichung überprüfe.

   Verworfene Alternativen

   CMS mit Datenbank; manuelle Bearbeitung der Dateien.

   Begründung

   Ich kann Texte aktualisieren, ohne den Code anzufassen. In der Vorschau kann ich das Ergebnis prüfen, bevor eine Änderung öffentlich wird.

4. Entscheidung

   Jeder Text wird als vom Code getrennte Dateneinheit verwaltet, mit einer Version für jede der acht Sprachen. Fehlt eine Übersetzung oder überschreitet ein Menüpunkt den verfügbaren Platz, wird der Website-Build abgebrochen.

   Verworfene Alternativen

   Texte direkt in die Seiten eingebettet; externes CMS.

   Begründung

   Ich kann einen Satz ändern oder eine Sprache ergänzen, ohne den Code anzupassen. Automatische Prüfungen erkennen fehlende Übersetzungen und zu lange Menüpunkte vor der Veröffentlichung.

5. Entscheidung

   Ausgangspunkt war eine mattschwarze Visitenkarte mit Goldfolie. Daraus entwickelte ich eine glatte, schwarze Kachel in der Mitte, mit einem eingelassenen goldenen Symbol und einem roten Lichtschein, der hinter dem Rand hervortritt wie bei einer sich öffnenden Schatulle. Eleganz, Luxus und Wollust waren die Leitbegriffe. Ich recherchierte vielfach ausgezeichnete Websites, ließ mich von der Atmosphäre aus Bewegung und Licht auf ciaoenergy.com inspirieren, ohne dessen Design zu kopieren, und verglich das Ergebnis mit einer Testversion aus Lovable. Aus diesem Vergleich habe ich den roten Hintergrundlichtschein beibehalten. Rot bleibt ein Lichteffekt oder kennzeichnet die aktive Seite, während alle anklickbaren Elemente dieselbe lackierte Oberfläche haben.

   Verworfene Alternativen

   Weiße Icons; flaches Gold; gemaserter Marmor, getestet und anschließend verworfen; Bilder auf den Kacheln; Punktnavigation.

   Begründung

   Ich wollte eine unverwechselbare visuelle Identität schaffen, noch bevor jemand mit dem Lesen beginnt. Oberflächen, Licht und Farben sollten zusammenpassen, und jedes Element sollte eine klar definierte Funktion haben. Die Tests zeigten mir, welche Lösungen diese Richtung unterstützten und welche das Gesamtbild weniger einheitlich machten.

6. Entscheidung

   Für das Nutzererlebnis habe ich die Empfehlungen der Nielsen Norman Group, die W3C-Richtlinien zu Menüs und Barrierefreiheit sowie Hinweise zu Karussells herangezogen, darunter auch Empfehlungen zu Pfeilen unter den Kacheln. Auf den Unterseiten bleiben die Menüpunkte am Computer beispielsweise sichtbar, weil ausgeblendete Menüs deutlich seltener genutzt werden.

   Verworfene Alternativen

   Entscheidungen ausschließlich nach persönlichem Geschmack.

   Begründung

   Entscheidungen, die die Navigation beeinflussen, sollten sich auf dokumentierte Erkenntnisse stützen. Anhand der verfügbaren Empfehlungen habe ich festgelegt, wie Besucher Inhalte erreichen und mit den Elementen der Benutzeroberfläche interagieren.

Ergebnis

Die Website ist in acht Sprachen online. Automatisierte Barrierefreiheitstests melden auf keiner Seite Fehler. Nach der Optimierung ist das Datenvolumen der 3D-Startseite um 57% geringer. Bei jeder Änderung werden automatische Tests für alle Seiten ausgeführt, einschließlich Prüfungen für die Bildschirmabmessungen von iPhone und iPad.

Die Tests decken nicht alles ab, und das sollte man klar sagen. Ich habe die Website manuell auf iPhone und iPad sowie mit Chrome und Firefox geprüft. Safari auf Mac habe ich nicht systematisch getestet. Ein Teil der Tests auf Smartphones und Tablets erfolgt in simulierten Umgebungen. Die Übersetzungen werden derzeit automatisch erstellt; später werde ich professionelle Übersetzungsdienste in Anspruch nehmen.