Leitfaden · Teil 2 von 2
Vom Entwurf
zur fertigen Website.
Ein klickbarer Entwurf ist noch keine Website. Was danach passiert: Aufbau mit Claude Code, Bilder in fünf Größen, eingebettetes CSS, sieben Prüfungen vor jeder Veröffentlichung. Am Beispiel dieser Seite, die Sie gerade lesen.
Lesezeit 14 Minuten
Ein Entwurf ist eine Behauptung.
Eine Website ist ein Beweis.
Am Ende von Teil 1 steht ein klickbarer Entwurf mit Ihren Inhalten. Er sieht aus wie die fertige Seite und ist doch etwas anderes — und der Unterschied ist genau die Arbeit, um die es hier geht.
Er läuft nicht auf Ihrem Server
Ein Entwurf lebt in einer Umgebung, die alles bereitstellt. Die echte Seite muss auf einem gewöhnlichen Webhosting laufen, in jedem Browser, auf einem sechs Jahre alten Telefon im Funkloch auf der Baustelle.
Er wiegt zu viel
Im Entwurf liegen die Bilder in voller Auflösung, das Gestaltungswerk komplett, jedes Skript. Das ist für die Ansicht egal und für eine Website die halbe Miete — wer über Mobilfunk kommt, wartet sonst.
Ihm fehlen die Pflichten
Impressum, Datenschutzerklärung, Cookie-Hinweis, die Kennzeichnung von KI-Bildern, ein Formular, das die Daten sicher zustellt: Nichts davon interessiert im Entwurf und alles davon ist beim Start Pflicht.
Er weiß nichts von Google
Titel, Beschreibungen, strukturierte Daten, Sitemap, saubere Überschriften-Reihenfolge, sprechende Adressen: Das entscheidet darüber, ob die Seite gefunden wird, und fällt im Entwurf gar nicht auf.
Diese vier Punkte sind der Grund, warum zwischen Entwurf und Start noch einmal Wochen liegen. Sie sind auch der Grund, warum eine Website mehr kostet als eine Gestaltung: Der sichtbare Teil ist ungefähr die Hälfte der Arbeit.
Nicht jede Seite von Hand.
Ein Bauplan für alle.
Der größte Unterschied zur klassischen Handarbeit: Es wird nicht Seite für Seite gebaut, sondern einmal ein Bauplan, aus dem die Seiten entstehen.
Kopf, Menü und Fuß stehen an genau einer Stelle
Jede Seite trägt zwar ihre eigene Kopie im Markup — das ist der Preis dafür, dass es keinen Server gibt, der etwas zusammensetzt. Geschrieben werden sie aber nur einmal. Ein kleines Programm verteilt sie auf alle Seiten und setzt dabei automatisch die Markierung, welcher Menüpunkt gerade aktiv ist.
Wiederkehrende Seitentypen bekommen einen Generator
Alle Leitfäden dieses Handbuchs entstehen aus demselben Bauplan. Der Inhalt liegt getrennt davon, die Bausteine werden nur benannt: hier ein Trichter, dort eine Vergleichstabelle, dann ein Selbsttest. Ein neuer Leitfaden ist deshalb eine Frage von Stunden, nicht von Tagen.
Wiederholungen werden verboten, nicht verwaltet
Am 12. August 2026 standen auf dieser Website vier verschiedene Fassungen des Menüs und vier des Fußbereichs nebeneinander — jede Seite hatte im Lauf der Zeit ihre eigene bekommen. Seitdem gibt es eine Quelle und ein Prüfprogramm, das jede Abweichung meldet. Solche Regeln sind unspektakulär und sparen später Tage.
Dieser Bauplan ist der Punkt, an dem KI-Unterstützung wirklich etwas ändert. Nicht weil sie schneller tippt, sondern weil sich der Aufwand, etwas sauber zu strukturieren, endlich lohnt — auch bei einer Website mit fünfzig Seiten statt fünftausend.
Jede Seite bekommt nur,
was sie braucht.
Das komplette Gestaltungswerk dieser Website sind gut 200 Kilobyte Regeln — Farben, Abstände, jeder Baustein aus jedem Leitfaden. Kein Besucher braucht mehr als einen Bruchteil davon. Also bekommt jede Seite beim Bauen ihren eigenen Zuschnitt, fest eingesetzt in den Seitenkopf. Kein zweiter Abruf, kein Warten auf eine Datei. Klicken Sie sich durch die drei Seiten.
Diese Seite lädt
23 KB
von 253 KB Gestaltungswerk
über die Leitung: 5 KB komprimiert
Gemessen an dieser Website am 24. August 2026. Grau bedeutet: Der Baustein existiert, wird auf dieser Seite aber nicht ausgeliefert.
Einen Haken hat die Sache, und wir sind einmal darauf hereingefallen: Was ein Skript erst im Browser erzeugt, steht beim Zuschnitt noch nicht in der Seite — und fällt heraus. Deshalb liegt bei uns jede Karte und jede Tafel vollständig im Dokument, auch wenn sie zugeklappt ist. Das hat einen angenehmen Nebeneffekt: Wer ohne Skripte surft, sieht trotzdem alle Inhalte.
Ein Motiv,
zwölf Dateien.
Bilder sind auf fast jeder Firmenwebsite der mit Abstand größte Brocken. Deshalb liegt jedes Motiv bei uns in vier Größen und drei Formaten auf dem Server, und der Browser sucht sich selbst aus, was zu Bildschirm und Leitung passt. Schieben Sie den Regler.
Das Gerät verlangt
1170 Bildpunkte
390 Punkte Anzeigebreite, dreifache Auflösung
Der Browser holt
Titelbild in 1200 Punkten
44 KB
Ohne diese Staffel bekäme jedes Gerät dieselbe Datei: das JPG in voller Größe, 309 KB. Gemessen am Titelbild dieser Seite am 23. August 2026.
Dazu kommt eine Kleinigkeit mit großer Wirkung: Bilder unterhalb des sichtbaren Bereichs werden erst geladen, wenn jemand dorthin scrollt. Wir haben das selbst gelernt. Auf unserer Startseite hing lange ein Porträt von 300 Kilobyte ohne diese Bremse — auf einer simulierten Mobilfunkleitung war es der Grund, warum die Seite gefühlt stand. Eine Zeile im Markup, und der Wert ging von zehn Sekunden auf unter zwei.
Tempo entsteht beim Bauen,
nicht danach.
Es gibt keinen Schalter, der eine Seite schnell macht. Es gibt nur die Summe vieler Entscheidungen, die alle in dieselbe Richtung zeigen. Vier davon tragen den größten Teil.
Nichts kommt von fremden Servern
Keine Schriften von Google, keine Symbolbibliothek, kein Kartendienst, kein Skript, das noch drei weitere nachlädt. Jede Datei liegt auf demselben Server wie die Seite. Das spart Verbindungsaufbau — und nebenbei den halben Datenschutztext.
Ein Skript, minifiziert und mit Stempel
Die gesamte Bedienlogik dieser Website ist eine Datei. Beim Bauen werden Kommentare und Leerzeichen entfernt, danach bekommt die Adresse einen Stempel aus dem Dateiinhalt. Der Browser darf sie deshalb einen Monat lang behalten und holt sie trotzdem sofort neu, wenn sich etwas ändert.
Der Server komprimiert, was er ausliefert
Text lässt sich hervorragend zusammenpacken. Diese Seite wiegt als Datei rund hundert Kilobyte und geht komprimiert mit etwa einem Viertel davon über die Leitung. Das ist eine Zeile in der Serverkonfiguration und wird trotzdem regelmäßig vergessen.
Bewegung kostet nichts, wenn sie richtig gemacht ist
Animationen laufen über Eigenschaften, die die Grafikkarte allein verarbeitet. Wer stattdessen Höhen und Abstände animiert, zwingt den Browser bei jedem Bild zum Neuberechnen der ganzen Seite — das sieht man auf einem älteren Telefon sofort.
Wie weit das trägt und was Google davon überhaupt misst, steht ausführlich im Leitfaden Website-Geschwindigkeit — samt der Messwerte dieser Seite und der ehrlichen Angabe, wie stark sie schwanken.
Sie messen jedes Bauteil nach.
Wir messen jede Seite nach.
Sieben Prüfungen, bei jeder Veröffentlichung
Sieben Programme,
bevor etwas online geht.
Jede dieser Prüfungen ist entstanden, weil einmal etwas schiefging — die letzte ist erst ein paar Stunden alt. Sie kosten beim Bauen ein paar Sekunden und haben uns zusammen mehrere Tage gespart. Starten Sie den Lauf.
Sieben Prüfungen, bereit
-
läuft bei jedem Bau
Kopf, Menü und Fuß
Vergleicht diese drei Bereiche auf jeder einzelnen Seite mit der einen Quelle, aus der sie stammen. Jedes abweichende Zeichen wird gemeldet.
Einmal gefangen Vier Menüfassungen und vier Fußbereiche nebeneinander, gewachsen über Monate.
-
läuft bei jedem Bau
Klassennamen gegen das Gestaltungswerk
Nimmt jeden Namen, den ein Element im Markup trägt, und sucht ihn im Gestaltungswerk und im Skript. Was nirgends vorkommt, ist ein Tippfehler.
Einmal gefangen Auf einer Ratgeberseite standen die Fragen und Antworten sowie das Schlussbanner völlig ungestaltet im Browser. Im Markup hieß es einmal
faq__item, im Gestaltungswerk überallfaq-item. -
läuft bei jedem Bau
Auslieferung und Stempel
Prüft, ob wirklich keine externe Gestaltungsdatei mehr verlinkt ist, ob der zugeschnittene Block im Seitenkopf steht und ob der Stempel am Skript zum Dateiinhalt passt.
Warum das wichtig ist Ein falscher Stempel bedeutet: Besucher bekommen bis zu einen Monat lang das alte Skript ausgeliefert und niemand merkt es.
-
läuft bei jedem Bau
Verweise im Fließtext
Meldet jeden Absatz, der auf ein anderes Thema der Website zeigt, ohne dorthin zu verlinken. Gut für den Leser, gut für Google, und von Hand nie vollständig zu schaffen.
Nebenwirkung Dieselbe Liste setzt die Verlinkung eigener Leistungen automatisch, aber nur bei der ersten Nennung je Seite.
-
läuft bei jedem Bau
Die Wortliste
Eine kurze Liste von Wörtern, die auf dieser Website nichts verloren haben — teils weil sie unpräzise sind, teils weil unser Geschäftsführer sie schlicht nicht mag. Der Lauf sucht sie in jeder fertigen Datei.
Einmal gefangen Nach einer Überarbeitung stand ein Wort, das wir Wochen vorher aussortiert hatten, wieder in vier Texten. Gefunden in unter einer Sekunde.
-
läuft bei jedem Bau
Messung im echten Browser
Jede Seite wird in einem echten Browser geladen und auf Tempo, Barrierefreiheit, gute Praxis und Suchmaschinentauglichkeit gemessen. Vier Werte, und wir geben uns mit weniger als der vollen Punktzahl nicht zufrieden.
Einmal gefangen Der Firmenname im Seitenkopf blendete weich ein. Die Messung traf genau den Übergang, meldete einen Kontrast von 1,3 zu 1 und nahm vier Punkte mit. Ein Fließtext auf dunklem Grund lag bei 3,1 zu 1 und war draußen kaum zu lesen.
-
läuft bei jedem Bau
Die Zahlen im Text
Mehrere Seiten dieser Website nennen gemessene Werte: Dateigrößen, Kilobyte, Ladezeiten. Das Programm rechnet sie gegen die echten Dateien im Projekt nach und meldet jede Abweichung von mehr als einem Kilobyte.
Einmal gefangen Diese Seite hier. Als das Titelbild gegen ein helleres getauscht wurde, stimmten die zwölf Dateigrößen im Regler weiter oben nicht mehr — aus 27 Kilobyte waren 44 geworden.
Das Prinzip kennen Sie aus der Fertigung: Ein Fehler, den die Endkontrolle findet, kostet Geld. Einer, der beim Kunden auffällt, kostet Ruf. Also wandert die Kontrolle nach vorn in den Prozess. Bei Software ist das genauso, es sieht nur unspektakulärer aus. Was keines dieser Programme findet, sind Wörter, die es beide gibt: In einem fertig gebauten Text stand einmal „besprüht“, wo „bespricht“ hingehörte. Dagegen hilft nur Lesen, und das macht bei uns ein Mensch.
Was das Gesetz verlangt,
und was meistens fehlt.
Der unbeliebteste Teil eines Website-Projekts und der einzige, bei dem Nachlässigkeit direkt Geld kostet. Fünf Punkte, die wir bei übernommenen Seiten fast immer nachziehen müssen.
Ein Impressum mit den heute gültigen Paragrafen
Seit dem Digitale-Dienste-Gesetz heißt die Grundlage § 5 DDG und nicht mehr § 5 TMG. Wer Fachtexte veröffentlicht, braucht zusätzlich einen Verantwortlichen nach § 18 Abs. 2 MStV. Und der Link zur europäischen Streitbeilegungsplattform gehört heraus: Die Plattform wurde im Juli 2025 abgeschaltet, ein Verweis darauf geht ins Leere.
Eine Datenschutzerklärung, die beschreibt, was die Seite wirklich tut
Der häufigste Fehler ist ein Textbaustein aus dem Netz, der Dienste auflistet, die gar nicht eingebunden sind — und den einen verschweigt, der es ist. Wir schreiben hinein, was messbar passiert: welcher Anbieter die Seite ausliefert, was beim Absenden des Formulars übertragen wird, was der Hinweisbalken im Browser ablegt.
Ein Cookie-Hinweis, der keine Attrappe ist
Wenn beide Knöpfe dasselbe bewirken, muss das auch so im Datenschutztext stehen. Und sobald jemand später ein Video einbettet, eine Karte einbindet oder Reichweite misst, muss die Auswahl tatsächlich abgefragt werden. Der Ablehnen-Knopf darf nie kleiner oder blasser sein als der andere.
KI-Bilder müssen gekennzeichnet sein
Seit dem 2. August 2026 gilt Art. 50 Abs. 4 der KI-Verordnung. Der Hinweis muss sichtbar am Bild stehen — Angaben in den Metadaten oder ein Satz im Impressum reichen ausdrücklich nicht. Umschreibungen wie „digital erzeugt“ genügen ebenfalls nicht, das Wort KI muss fallen. Auf dieser Website steht es an jedem betroffenen Bild.
Ein Formular, das die Daten nicht verteilt
Viele Kontaktformulare laufen über einen fremden Dienst, weil das schneller eingebaut ist. Damit verlassen die Anfragen Ihrer Kunden das Haus, bevor Sie sie gelesen haben. Unseres läuft auf demselben Server und stellt die Nachricht direkt als E-Mail zu.
Eines noch, und das meinen wir ernst: Wir sind keine Rechtsanwälte und geben keine Rechtsberatung. Was hier steht, ist der Stand, mit dem wir selbst arbeiten und den wir bei jeder Veröffentlichung anwenden. Wenn Ihr Haus eine eigene Rechtsabteilung hat, legen wir ihr die Texte gern vor.
Was die KI macht,
und was am Menschen hängt.
Diese Website entsteht mit Claude Code. Das ist kein Geheimnis und steht ausführlich im Text über die Zusammenarbeit mit KI. Wichtiger als die Frage, ob KI im Spiel ist, ist die Frage, wo genau.
Die Maschine schreibt den Code
Bausteine, Generatoren, das Skript, die Prüfprogramme. Das ist der Teil, in dem sie unschlagbar ist: Sie tippt nicht nur schneller, sie hält auch durch. Ein Bauteil, das in zwölf Varianten sauber sein muss, ist für sie kein Ermessensfall.
Die Maschine hält die Regeln fest
Im Projekt liegt eine Datei mit allem, was gilt: Tonfall, verbotene Wörter, Preisangaben, welche Kundennamen genannt werden dürfen und welche nicht. Was einmal darin steht, muss nicht in jedem Gespräch neu erklärt werden.
Der Mensch entscheidet, was auf die Seite gehört
Kein Modell weiß von sich aus, dass eine Zahl im Text nicht belegt ist, dass eine Kundenfreigabe fehlt oder dass ein Vergleich in dieser Branche schief wirkt. Jeder Satz auf dieser Website ist von einem Menschen freigegeben worden, bevor er online ging.
Der Mensch verantwortet den Ton
Sprache ist der Teil, bei dem eine Maschine ohne Anleitung sofort in Marketingdeutsch abrutscht. Deshalb wird hier gestrichen, umgeschrieben und wieder gestrichen — und deshalb liest jeden Text ein Mensch von oben nach unten, bevor er gebaut wird.
Aus der Praxis
Alles, was man mehr als zweimal erklären muss, gehört aufgeschrieben — nicht wiederholt. Das ist der einzige Kniff, mit dem die Zusammenarbeit über Wochen trägt statt nur über einen Nachmittag.
Am Ende gehört Ihnen
das ganze Ding.
Der Start ist kein Knopfdruck, sondern ein Ablauf mit vier Schritten. Der letzte davon ist der, an dem die meisten Agenturen ungern klar werden.
Umzug auf Ihren Server
Dateien hoch, Serverkonfiguration setzen, Verschlüsselung prüfen, das Formular einmal echt absenden. Dazu die Weiterleitungen: Jede Adresse der alten Seite, die Google kennt, muss auf ihre Entsprechung zeigen. Wer das weglässt, verliert die Sichtbarkeit, die er sich über Jahre erarbeitet hat.
Alles läuft auf Ihren Namen
Domain, Hosting, Bildlizenzen, Zugänge. Nicht auf unseren mit Ihnen als Nutzer, sondern auf Ihren. Sie können jederzeit mit dem kompletten Bestand umziehen, ohne uns zu fragen. Warum das nicht selbstverständlich ist, steht im Text über Abkürzungen im Agenturalltag.
Anmeldung bei Google
Search Console einrichten, Sitemap einreichen, die wichtigsten Seiten zur Indexierung anmelden. Und dann warten. Dass eine neue Seite Wochen braucht, bis sie vollständig im Index steht, ist normal — wir sagen Ihnen das vorher, damit niemand nach zehn Tagen nervös wird.
Danach: mit oder ohne uns
Eine handgebaute Seite braucht keine Sicherheitsupdates, weil nichts da ist, was aktualisiert werden müsste. Sie läuft auch dann noch, wenn niemand hinschaut. Wer trotzdem regelmäßig Änderungen braucht, nimmt einen Wartungsvertrag; wer nicht, nimmt keinen.
Was das kostet, steht offen auf der Seite zum Webdesign für die Industrie und in der Preisübersicht. Kurz gefasst: Eine Firmenwebsite beginnt bei 4.900 € zuzüglich Mehrwertsteuer, der Wartungsvertrag bei 299 € im Monat. Der bindende Preis steht im schriftlichen Angebot.
Klartext zur Umsetzung.
Wie lange dauert der Teil nach dem Entwurf?
Bei einer üblichen Firmenwebsite mit zehn bis fünfzehn Seiten rechnen wir vom freigegebenen Entwurf bis zum Start mit vier bis sechs Wochen. Das gesamte Projekt liegt bei sechs bis zehn Wochen. Der größte Unsicherheitsfaktor sind nicht wir, sondern die Inhalte: Wenn technische Daten oder Bilder aus dem Betrieb nachgeliefert werden müssen, wartet alles andere.
Was passiert, wenn wir später mit Ihnen nicht mehr zusammenarbeiten?
Dann nehmen Sie die Seite mit. Sie besteht aus gewöhnlichen HTML-Dateien, Bildern, einer Gestaltungsdatei und einem Skript — jeder Webentwickler kann damit weiterarbeiten, ohne unser Werkzeug zu kennen. Es gibt kein System, das nur wir bedienen können, und keine Lizenz, die an uns hängt. Verträge schließen wir ohnehin nur dort, wo das Gesetz sie verlangt.
Braucht die Seite Updates?
Nein, jedenfalls keine Sicherheitsupdates. Es gibt kein Redaktionssystem, keine Datenbank und keine Erweiterungen von Dritten — also auch nichts, das Sicherheitslücken bekommen könnte. Inhaltlich altert natürlich jede Seite: Preise ändern sich, Geräte kommen dazu. Das ist der Grund für einen Wartungsvertrag, nicht die Technik. Ausführlich steht das im Text Kein WordPress.
Ist eine mit KI gebaute Website weniger wert?
Die Frage stellt sich in der Fertigung genauso, seit es CNC-Maschinen gibt. Entscheidend ist, was hinten herauskommt: wie schnell die Seite lädt, ob sie gefunden wird, ob sie Anfragen bringt und wem sie gehört. Alles davon können Sie messen. Wie wir mit dem Werkzeug umgehen und wo ausdrücklich ein Mensch entscheidet, steht offen im Text über die Zusammenarbeit mit KI.
Können wir Texte später selbst ändern?
Kleine Änderungen übernehmen wir im Wartungsvertrag, meist am selben Tag. Wenn Sie regelmäßig selbst schreiben wollen — etwa Neuigkeiten oder Stellenanzeigen —, sagen Sie das im Briefing. Dann bekommt genau dieser Bereich eine einfache Eingabemöglichkeit, ohne dass die ganze Website dafür ein Redaktionssystem braucht.
Wie messen Sie, ob die Seite gut geworden ist?
Technisch mit den vier Werten aus der Browser-Messung, die wir bei jeder Veröffentlichung erheben, und mit den Ladezeiten, die Google an echten Besuchern misst. Geschäftlich mit dem, was zählt: Anfragen über das Formular und Anrufe. Beides sagen wir Ihnen ehrlich, auch wenn die Zahlen im ersten Quartal noch dünn sind — wie eine neue Website anläuft, steht im Leitfaden zur Website-Geschwindigkeit und im Text Reichweite ist kein Umsatz.
