clawic/skills

Regeln für die Webentwicklung

Performance

• Bilder sind die häufigste Ursache für langsame Seiten – verwende WebP/AVIF, lade Bilder unterhalb des Falzes lazy und setze explizite Breite/Höhe, um Layout-Verschiebungen zu vermeiden
• Render-blockierendes CSS verzögert den ersten Paint – binde kritisches CSS inline in <head> ein und verschiebe den Rest
• Drittanbieter-Skripte (Analytics, Chat-Widgets) fügen oft 500ms+ hinzu – lade sie mit async oder defer, überprüfe regelmäßig
• Schriften verursachen unsichtbaren Text-Flash (FOIT) – verwende font-display: swap und lade kritische Schriftarten vor
• Miss mit Lighthouse im Inkognito-Modus – Erweiterungen verfälschen die Ergebnisse

Mobile First

• Beginne CSS mit mobilen Styles und füge Komplexität mit min-width Media Queries hinzu – einfacher zu skalieren als abzubauen
• Touch-Ziele benötigen mindestens 44x44px – Finger sind ungenau, kleine Buttons frustrieren Nutzer
• Teste auf echten Geräten, nicht nur in den Browser-Entwicklertools – Drosselungs-Simulationen zeigen nicht die echten Ruckler
• Horizontaler Scroll ist ein kritischer Fehler – teste jede Seite mindestens bei 320px Breite
• viewport Meta-Tag ist erforderlich: <meta name="viewport" content="width=device-width, initial-scale=1">

Barrierefreiheit

• Jedes <img> benötigt alt-Text – leeres alt="" für dekorative Bilder, beschreibender Text für bedeutungsvolle
• Farbkontrastverhältnis mindestens 4,5:1 für Fließtext – verwende den WebAIM-Kontrastprüfer
• Formulareingaben müssen zugehörige <label>-Elemente haben – Platzhalter allein sind nicht barrierefrei
• Tastaturnavigation muss funktionieren – teste jedes interaktive Element mit der Tabulatortaste
• Screenreader geben die Überschriftenhierarchie aus – verwende H1-H6 in logischer Reihenfolge, überspringe keine Ebenen

HTML-Struktur

• Nur eine <h1> pro Seite – sie ist der Seitentitel, kein Gestaltungswerkzeug
• Verwende semantische Elemente: <nav>, <main>, <article>, <aside>, <footer> – sie kommunizieren die Struktur an Browser und assistive Technologien
• <button> für Aktionen, <a> für Navigation – verwende keine Divs mit Klick-Handlern
• Externe Links sollten rel="noopener" haben – verhindert eine Sicherheitslücke bei target="_blank"
• Validiere HTML – fehlerhaftes Markup führt zu unvorhersehbarem Rendering über verschiedene Browser

CSS-Muster

• Vermeide !important – es zerstört die Kaskade und erschwert das Debugging. Behebe stattdessen die Spezifität
• Verwende relative Einheiten (rem, em, %) anstelle von festen px für Text – respektiert die Schriftgrößen-Einstellungen des Nutzers
• CSS Custom Properties (Variablen) reduzieren Wiederholungen – definiere Farben und Abstände einmal, verwende sie überall
• Flexbox für 1D-Layouts, Grid für 2D – zwinge nicht eines, die Aufgabe des anderen zu erledigen
• Teste ohne CSS-Ladung – der Inhalt sollte auch in reinem HTML lesbar sein

Häufige Fehler

• Fehlendes Favicon verursacht 404-Spam in Serverprotokollen – füge immer eines hinzu, selbst ein einfaches PNG
• Fehlendes <html lang="de"> führt zu falscher Aussprache bei Screenreadern
• Hartcodierte http://-Links brechen auf HTTPS-Seiten – verwende protokollrelative // oder immer https://
• Annahme, dass JavaScript verfügbar ist – Kerninhalte sollten ohne JS funktionieren (progressive Verbesserung)
• Vergessen von Druckstilen – füge @media print für Seiten hinzu, die Nutzer möglicherweise drucken (Belege, Artikel)

Vor dem Launch

• Teste, ob alle Formulare tatsächlich absenden – kaputte Kontaktformulare verlieren stillschweigend Leads
• Überprüfe, ob die 404-Seite existiert und hilfreich ist – die Standard-Server-404 wirkt unprofessionell
• Überprüfe Social-Sharing-Vorschauen mit Open-Graph-Tags – teste in den Debuggern von Facebook/Twitter
• Reiche die Sitemap in der Google Search Console ein – beschleunigt die Indexierung
• Richte Uptime-Überwachung ein – erfahre, wann deine Seite ausfällt, bevor die Nutzer es dir sagen