Website und Launch
6 min read
Website bauen und launchen – was niemand dir vorher sagt
Das Tool funktionierte. Die Demos standen. Und dann kam die Frage, die ich unterschätzt hatte: Wie baue ich eine Website, die das alles würdig präsentiert?
Wer glaubt, das sei der einfache Teil – weil ja die schwere Arbeit bereits getan ist – der irrt sich. Die Website war ein eigenes Projekt. Mit eigenen Hürden, eigenen Regeln und einer eigenen Lernkurve, die ich von null durchlaufen musste.
Webdesign lernen – wirklich
Ich habe kein Template genommen und ein paar Texte eingefügt. Ich wollte verstehen, wie Webdesign funktioniert. Warum bestimmte Layouts funktionieren und andere nicht. Wie man eine visuelle Sprache aufbaut, die konsistent ist – über jede Seite, jeden Abschnitt, jedes Element hinweg.
Responsives Layout war dabei eine der ersten großen Lektionen. Eine Seite die auf dem Desktop perfekt aussieht, kann auf dem Mobiltelefon komplett auseinanderfallen. Abstände, Schriftgrößen, Bildverhältnisse – alles muss für jeden Bildschirm funktionieren. Ich habe das nicht einmal richtig hinbekommen und musste von vorne anfangen.
Typografie. Farbpalette. Weißraum als Gestaltungselement. Grafiken, die zur Marke passen und nicht generisch wirken. All das sind keine Selbstverständlichkeiten – das sind handwerkliche Entscheidungen, die man treffen und begründen muss.
Google Fonts – ein Detail mit Konsequenzen
Eines der Dinge, die die meisten einfach übersehen: Google Fonts.
Wer Google Fonts über den Standard-Link einbindet, überträgt beim ersten Seitenaufruf automatisch die IP-Adresse des Besuchers an Google-Server in den USA – ohne Einwilligung, ohne Hinweis. Das ist nach DSGVO ein Verstoß, der bereits zu Abmahnungen geführt hat.
Die Lösung: Fonts lokal einbinden. Die Schriftdateien werden direkt auf dem eigenen Server gespeichert und von dort geladen. Kein externer Aufruf, keine Datenübertragung, rechtlich sauber. Das klingt nach einer kleinen technischen Anpassung – aber wenn man es nicht weiß, passiert es einfach nicht.
Domain, E-Mail, DNS – das Fundament
Bevor eine Website live gehen kann, gibt es eine Reihe von Schritten, die nichts mit Design zu tun haben – und die trotzdem entscheidend sind.
Domain registrieren, DNS-Einträge korrekt setzen, die Domain mit dem Hosting verknüpfen. Eine professionelle E-Mail-Adresse einrichten – nicht eine private Adresse, sondern joshua@help-ai.io. Das klingt wie ein Detail, ist aber das Erste was Besucher und potenzielle Kunden unbewusst bewerten. Eine private Mail in der Datenschutzerklärung und im Impressum sieht aus wie ein Hobby-Projekt.
DSGVO und Impressum – kein optionaler Schritt
Für die meisten klingt Datenschutz wie Bürokratie. Für mich war es eine der intensivsten Lernphasen.
Die Datenschutzerklärung musste jeden Verarbeitungsvorgang abbilden: Welche Daten werden durch das Kontaktformular erhoben? Wie lange werden sie gespeichert? Newsletter-Anmeldungen kommen per E-Mail rein und werden manuell in einer lokalen Tabellenkalkulation – ohne Cloud-Anbindung – erfasst. Auch das muss dokumentiert sein, mit Speicherdauer, Zweck und Löschkonzept.
Der Hosting-Anbieter – Framer B.V. mit Sitz in Amsterdam – verarbeitet personenbezogene Daten im Auftrag. Dafür braucht es einen Auftragsverarbeitungsvertrag. Die Adresse im Hosting-Abschnitt muss stimmen. Das Impressum nach § 5 TMG muss vollständig sein – Name, Adresse, E-Mail, Telefon oder ein funktionierender Kontaktweg.
Jede Kleinigkeit die fehlt, ist eine potenzielle Abmahnung. Ich habe sie alle umgesetzt. Einen Punkt nach dem anderen.
Die Demo-Tools – interaktiv, direkt auf der Website
Das war einer der aufwendigsten Teile des Website-Launches: die Demo-Tools.
Ich wollte nicht, dass Besucher lesen wie HelpAi funktioniert. Ich wollte, dass sie es sehen – und direkt ausprobieren können, ohne sich anmelden zu müssen.
Ich habe drei interaktive HTML-Demos gebaut und direkt in die Website eingebunden:
Newsletter-Demo: Eine vollständige Nachbildung der Newsletter-Generator-Oberfläche. Fünf Design-Stile wählbar – Minimal, Bold, Elegant, Modern, Corporate. Fünf Farbpaletten. Der Nutzer kann zwischen den Stilen wechseln, die Vorschau aktualisiert sich sofort. Der generierte HTML-Code ist sichtbar und kopierbar. Eine Export-Funktion zeigt, wie das Ergebnis in einem echten Mailing-Tool landen würde – alles ohne API, 1:1 in Look und Feel wie das echte Tool.
Textoptimierungs-Demo: Zeigt das zweite aktive Modul – Text rein, optimierter Text raus, mit einer Diff-Ansicht die exakt markiert was sich verändert hat und warum. Grün für Verbesserungen, rot für gestrichene Schwächen. Der Nutzer sieht sofort, dass das Tool nicht einfach umformuliert, sondern gezielt verbessert.
Auswertungs-Demo: Eine Vorschau auf das geplante Auswertungs-Modul – Marketing-Score, Öffnungsraten, Klickraten und Vergleichswerte auf einen Blick. Was Content-Erstellung und Content-Nachverfolgung zusammenbringt.
Alle drei Demos sind in reinem HTML und CSS geschrieben – keine externen Abhängigkeiten, schnell ladend, auf jedem Gerät funktionierend. Die Einbindung in Framer erfolgte als Embed-Element. Bis Layout, Scrollverhalten und responsive Darstellung auf jedem Gerät stimmten, war es ein langer Weg.
SEO – sichtbar werden von Anfang an
Eine fertige Website die niemand findet, ist keine fertige Website.
Ich habe mich von Beginn an mit SEO beschäftigt – nicht als nachträgliche Optimierung, sondern als Teil der Struktur. Seitentitel, Überschriften-Hierarchie, Keywords die natürlich im Text vorkommen.
Ein Punkt, der dabei oft vergessen wird und der mich einiges an Zeit gekostet hat: die Meta-Description. Das ist der kurze Beschreibungstext – maximal 155 Zeichen – der in den Google-Suchergebnissen direkt unter dem Seitentitel erscheint. Er entscheidet darüber, ob jemand auf den Link klickt oder weiterschaut. Nicht Google schreibt ihn – man selbst muss ihn für jede Seite und jeden Blogartikel manuell setzen.
In Framer passiert das im CMS-Eintrag jedes Artikels unter den SEO-Einstellungen. Wer das übersieht, lässt Google selbst entscheiden was angezeigt wird – meistens die ersten zwei Sätze des Textes, unformatiert und ohne Kontext. Das ist verschenktes Potenzial.
Eine gute Meta-Description fasst den Kerninhalt präzise zusammen, enthält das wichtigste Keyword und gibt dem Leser einen konkreten Grund zu klicken. Für diesen Artikel zum Beispiel:
„Wie die HelpAi-Website entstand – Webdesign, DSGVO, Domain, interaktive HTML-Demos und SEO. Ein ehrlicher Bericht über den Weg zum Launch."
Blog-Artikel als eigener SEO-Kanal. Jeder Artikel ein potenzieller Einstiegspunkt für jemanden, der genau dieses Problem kennt und nach einer Lösung sucht.
Was der Launch bedeutet
Der Launch war kein großer Knopf der gedrückt wird. Er war das Ergebnis von Wochen, in denen jeder Schritt ein neues Problem brachte – und jedes gelöste Problem das nächste sichtbar machte.
Aber genau das war der Punkt. Ich wollte nicht warten bis alles perfekt ist. Ich wollte etwas Echtes in die Welt bringen – etwas das zeigt, was HelpAi ist und wofür es steht.
Die Website steht. Newsletter-Generator und Textoptimierung laufen. Die Auswertung, Content-Ideen, Content-Kalender, Blogartikel und Produktbeschreibungen folgen.
Der Weg ist noch nicht zu Ende. Aber er ist klar. Und er ist real.
Wenn du dabei sein willst – als Early Bird, als Partner oder einfach weil dich interessiert wohin das führt:
