Code-Qualität & UX: das Geheimnis der Websites, die verkaufen

Was niemand sieht — und was den ganzen Unterschied macht

Ein Kunde rief uns vor einigen Monaten an. Seine Website war „wunderschön”. Gepflegtes Design, professionelle Fotos, eine stimmige Farbpalette. Ergebnis bei der Performance: 4 Sekunden Ladezeit, Barrierefreiheits-Score von 58/100 und ein Kontaktformular, das auf mobilem Safari nicht funktionierte.

Niemand hatte es bemerkt. Weder er noch die Agentur, die das Projekt geliefert hatte.

Das ist das Paradox des modernen Webs: Was darüber entscheidet, ob eine Website konvertiert oder nicht, ist für das bloße Auge fast vollständig unsichtbar. Code, der in 900ms lädt statt in 4 Sekunden. Tastaturnavigation, die funktioniert. Kontrast, der die WCAG-Schwellenwerte erfüllt. Schutz vor massenhaften Formulareinreichungen.

Niemand applaudiert diesen Details. Aber ihr Fehlen kostet Sie bares Geld.

Nach 15 Jahren im Website-Bau — zuerst von Hand, dann industrialisiert mit KI — habe ich eine Überzeugung: Technische Exzellenz ist keine Option. Sie ist das Fundament. Alles andere — Design, Inhalt, SEO — baut darauf auf.

Warum Code-Qualität zu einem Business-Thema geworden ist

Das Web wurde lange als Designfrage verkauft. „Bauen Sie eine schöne Website, die Kunden kommen.” Das ist falsch. Das war es immer, aber heute ist es messbar.

Google integriert die Core Web Vitals seit 2021 in seinen Algorithmus. Es sind rein technische Metriken: Anzeigegeschwindigkeit des größten sichtbaren Elements (LCP), visuelle Stabilität während des Ladens (CLS), Reaktionsfähigkeit auf Interaktionen (INP). Eine langsame oder visuell instabile Website wird in den Suchergebnissen bestraft — unabhängig von der Inhaltsqualität.

Was wir bei unseren Kunden konkret sehen: Ein Gewinn von 1,5 Sekunden beim LCP kann 15 bis 20 % weniger Absprungrate bedeuten. Das ist keine Theorie — das zeigen unsere Vorher/Nachher-Audits.

Aber die reine Performance ist nur ein Aspekt. Der andere, oft vernachlässigte, ist die Qualität der Interaktionen.

Was ist sauberer Code, konkret?

Sprechen wir technisch. Nicht um zu erschrecken — sondern um präzise zu sein.

Qualitätscode ist zunächst semantischer Code. HTML-Tags haben eine Bedeutung. Ein Button ist ein <button>, kein anklickbares <div>. Eine Abschnittsüberschrift ist ein <h2>, kein fett formatierter Text. Das klingt grundlegend. Dennoch verletzen die meisten Websites, die von No-Code-Baukasten-Systemen oder günstigen WordPress-Themes geliefert werden, diese Regeln systematisch.

Warum ist das wichtig? Weil Suchmaschinen die semantische Struktur lesen, um Ihren Inhalt zu verstehen. Weil Hilfstechnologien (Screen Reader) darauf angewiesen sind, um die Website für Menschen mit Behinderungen nutzbar zu machen. Weil es auch bedingt, wie sich die Website auf atypischen Geräten verhält.

Dann gibt es die Zustandsverwaltung. Ein Formular, das keinen klaren Fehler anzeigt, wenn das E-Mail-Feld falsch ausgefüllt ist, erzeugt Frustration und Abbrüche. Ein Button, der kein visuelles Feedback gibt, wenn man darauf klickt, schafft Unsicherheit beim Nutzer.

Diese Micro-Interaktionen — der Farbwechsel beim Hover, die kontextbezogene Fehlermeldung, die Ladeanimation beim Absenden — sieht man in einem Figma-Mockup nicht. Sie werden codiert. Und getestet.

„Software-Qualität ist wie die Sauberkeit einer Küche: Man sieht sie nicht, wenn sie gut gemacht ist. Man sieht sie sofort, wenn sie schlecht gemacht ist.” — ein Grundsatz, den wir intern oft wiederholen.

Ergonomische Sicherheit: das Thema, über das niemand spricht

Hier wird es interessant.

Es gibt eine Kategorie von Problemen, die an der Schnittstelle zwischen technischer Sicherheit und User Experience liegt. Man könnte sie ergonomische Sicherheit nennen: die Website und ihre Nutzer schützen, ohne die Erfahrung zu verschlechtern.

Das häufigste Beispiel: Captchas. Jahrelang war die Standardlösung zum Schutz von Formularen vor Spambots das visuelle Captcha. Das Ergebnis: Zehntausende frustrierter legitimer Nutzer, die unleserliche Bilder entziffern, während automatisierte Bots sie in Sekunden mit dedizierten Tools umgingen.

Heute haben sich die Ansätze entwickelt. Honeypots (versteckte Felder, die nur Bots ausfüllen), serverseitige Validierung, CSRF-Token, Rate Limiting — alles Techniken, die effektiv schützen, ohne den legitimen Nutzer den geringsten Aufwand abzuverlangen.

Das ist unsichtbares Handwerk: ein echtes Sicherheitsproblem lösen, ohne dafür ein Nutzererfahrungsproblem zu schaffen.

Bei den Projekten, die wir durchgeführt haben, hat die Entfernung visueller Captchas zugunsten unsichtbarer Schutzmaßnahmen die Konversionsraten der Formulare durchgängig verbessert. In einem konkreten Fall: +23 % vollständige Einreichungen auf einem Angebotsformular nach der Migration zu Honeypot + Rate-Limiting-Schutz.

Die Fehler, die wir bei Audits am häufigsten sehen

In 15 Jahren technischer Audits kehren bestimmte Probleme mit beunruhigender Regelmäßigkeit wieder. Hier sind sie, ohne Beschönigung.

Nicht optimierte Bilder

Der absolute Klassiker. JPEG-Bilder mit 3000px Breite, die auf Mobilgeräten ausgeliefert werden. 2,5-MB-Fotos, die ohne Lazy Loading geladen werden. Die Konvertierung in WebP mit adaptiver Größenanpassung kann das Seitengewicht um den Faktor 3 oder 4 reduzieren — ohne wahrnehmbare visuelle Auswirkungen für den Nutzer.

Blockierendes JavaScript

Skripte, die im <head> ohne defer oder async geladen werden und die Seitenrenderung während ihrer Ausführung blockieren. Das Ergebnis: 2–3 Sekunden weißer Bildschirm, bevor irgendetwas erscheint. Ein einfaches HTML-Attribut behebt das.

Fehlende Fehlerbehandlung bei Formularen

Formulare, die still abgeschickt werden, auch wenn Pflichtfelder leer sind. Oder schlimmer: die eine generische Fehlermeldung „Ein Fehler ist aufgetreten” anzeigen, ohne jeden Hinweis darauf, was schiefläuft. Die dadurch entstehende Frustration korreliert direkt mit Kontaktabbrüchen.

Unzureichende Kontraste

Hellgrauer Text auf weißem Hintergrund. Ein pastellgrüner CTA-Button. Ästhetisch kann das „modern” und „minimalistisch” wirken. Technisch scheitert es an den WCAG-AA-Kriterien (Mindestkontrastverhältnis von 4,5:1 für Fließtext). Und es benachteiligt Nutzer mit Sehbeeinträchtigungen — die einen nicht unerheblichen Teil Ihrer potenziellen Kunden ausmachen.

Industrialisierung opfert keine Qualität — sie standardisiert sie

Eine Frage taucht oft auf, wenn ich über unseren Workflow spreche: „Wenn Sie mit KI 5-mal schneller liefern, leidet dann nicht die Qualität?”

Die kurze Antwort: nein. Und hier ist der Grund.

Industrialisierung bei GDM-Pixel besteht nicht darin, Code massenweise zu generieren und zu versenden. Sie besteht darin, Best Practices in den Workflow selbst einzucodieren.

Unser Stack (Astro + Tailwind + standardisierte Komponenten) integriert standardmäßig: WebP-Bilder mit dem Attribut loading="lazy", strikte HTML-Semantik, Formular-Zustandsverwaltung, im Design System validierte Kontraste. Wenn Claude Code eine Komponente generiert, generiert es eine Komponente, die diese Standards erfüllt — weil das Prompt Engineering und die Basis-Templates sie erzwingen.

Was wir eliminiert haben, ist das Risiko menschlicher Vergesslichkeit. Nicht die Anforderungen. Die Anforderungen sind sogar gestiegen.

Bei Nova Mind — unserem eigenen intern entwickelten SaaS — haben wir 21 Seiten in 10 Stunden geliefert. Barrierefreiheit, Performance, Formularsicherheit: alles war in den Basisspezifikationen enthalten. Keine Checkliste am Projektende. Standards, die von Anfang an in der Konzeption integriert sind.

Laut dem Web Almanac 2023 von HTTP Archive bestehen weniger als 40 % der Websites grundlegende Barrierefreiheits-Audits. Das ist kein Budgetproblem — es ist ein Methodenproblem.

Was Sie noch heute auf Ihrer Website überprüfen sollten

Drei konkrete Maßnahmen, ohne uns anrufen zu müssen.

Testen Sie PageSpeed Insights. Das kostenlose Tool von Google (pagespeed.web.dev) gibt Ihnen einen Score und eine priorisierte Liste von Problemen. Wenn Ihr mobiler Score unter 70 liegt, haben Sie ein Performance-Problem, das Ihr Ranking beeinträchtigt.

Testen Sie Ihr Kontaktformular auf dem iPhone Safari. Nicht auf Chrome Desktop. Nicht auf dem Emulator. Auf einem echten iPhone mit Safari. Dort verstecken sich die Bugs. Wenn Ihr Formular nicht funktioniert — wie viele Interessenten haben Sie verloren, ohne es zu wissen?

Überprüfen Sie Ihre Kontraste. Die Browser-Erweiterung Colour Contrast Analyser oder das integrierte Tool in Chrome DevTools (Accessibility > Color Contrast) sagt Ihnen in 30 Sekunden, ob Ihr Text nach den Standards lesbar ist.

Digitales Handwerk ist messbar

Im Web wird viel von Handwerk geredet. Oft um lange Lieferzeiten und hohe Preise zu rechtfertigen. Das ist nicht meine Definition.

Digitales Handwerk bedeutet für mich die Fähigkeit, Qualität reproduzierbar zu produzieren. Ein Tischlermeister berechnet nicht für jedes Möbelstück die Holzfestigkeit neu. Er hat Schablonen, bewährte Methoden, Standards, die er systematisch anwendet.

Genau das haben wir bei GDM-Pixel aufgebaut. Schablonen. Methoden. Standards. Und Werkzeuge, die sie fehlerfrei anwenden. Es ist diese unsichtbare Strenge, die unseren Ansatz zur Website-Erstellung von einem bloßen Zusammenstellen von Templates unterscheidet.

Das Ergebnis: Websites, die schnell laden, die barrierefrei sind, die Nutzer schützen, die konvertieren. Nicht durch Zufall. Durch Konzeption.

---

Hält Ihre aktuelle Website technisch stand? Nicht nur optisch — technisch. PageSpeed-Score, Barrierefreiheit, Formularsicherheit, Code-Qualität.

Wenn Sie sich nicht sicher sind, bieten wir ein umfassendes technisches Audit an. Ehrliche Diagnose, ohne Verpflichtung zur Überarbeitung, wenn diese nicht notwendig ist. Denn wir verkaufen keine unnötigen Projekte.

Kontaktieren Sie GDM-Pixel für ein technisches Audit — wir sagen Ihnen genau, was funktioniert, was nicht funktioniert und was es kostet, es zu beheben.