1. Layout & Grid

Breakpoint-Check: Bleibt der Content bei einer Screen-Auflösung von 1920px in einem 1140px/1200px Container gefangen?

Viewport Usage: Wir prüfen, ob das Layout starr zentriert ist oder moderne Einheiten wie vw (Viewport Width) ode dvh (Dynamic Viewport Height) nutzt, um den Screen wirklich auszufüllen oder sind max-width auf 1140 oder 1600px gesetzt?

Alignment: Werden asymmetrische Grids genutzt oder folgt alles der klassischen "Header-Content-Footer" Zentrierung?

Whitespace-Ratio: Ist das Verhältnis von Content zu Leerraum ausgewogen oder wirkt die Seite "gedrängt"?

2. Typography Scale

Base Font Size: Ist der Standard-Fliesstext kleiner als 18px?.

Fluid Typography: Werden feste Werte (px) für Schriften genutzt oder moderne CSS-Funktionen wie clamp() für eine fluide Skalierung?

Line Height and Width: Liegt der Zeilenabstand im Bereich von 1.5 bis 1.6 für optimale Lesbarkeit? Ist die Lauflänge auf das Grid ausgerichtet und angenehm zu lesen?

3. Motion Dynamics

Ist die Seite ein Plakat im Internet oder ein dynamische Experience?

Scroll Experience: Ist ein Smooth Scroll (z. B. Lenis) implementiert und sind Bilder mit leichten appear-oin oder Parallax Effekten verschönert worden cubic-bezier.

Micro-Interactions: Haben interaktive Elemente (Buttons, Links) einen Hover-Zustand, der über eine einfache Farbänderung hinausgeht (z. B. Scale, Magnetic Effect) Wir suchen nach cubic-bezier oder transform Snippets?

Entry Animations: Werden Inhalte beim Scrollen durch Scroll-Trigger / GSAP aktiv reingeladen oder sind sie statisch präsent?

Page Transitions: Sind Technologien im Einsatz wie Event-Listener popstate, die smoothe Transitions zwischen Seiten erlauben?

4. Asset Fidelity

Format-Check: Werden veraltete Formate (.jpg, .png) statt moderner Formate (WebP, AVIF) verwendet?

Resolution: Sind Bilder für 4K-Displays optimiert?

Vector Usage: Werden Icons als Rastergrafiken geladen oder sauber als Inline-SVGs?

Background Media: Werden schwere Video-Dateien geladen oder hochoptimierte, lautlose Loops (< 2MB)?

5. Tech Stack & Performance

Ein Audit schaut auch unter die Motorhaube, denn langsame Seiten zerstören die User Experience.

LCP (Largest Contentful Paint): Lädt das grösste sichtbare Element in unter 2.5 Sekunden?

CLS (Cumulative Layout Shift): "Springt" der Content während des Ladens? (Zielwert: < 0.1).

TTFB (Time to First Byte): Reagiert der Server in unter 200ms?

Runtime Performance: Bleibt die Framerate bei Animationen konstant bei 60 FPS?

6. Interaction Depth

Click-Depth: Sind alle relevanten Business-Informationen mit maximal 3 Klicks erreichbar?

Input Friction: Haben Formulare mehr als 5 Felder ohne klare Logik?

Touch Targets: Sind Klickflächen auf Mobile mindestens 44x44px gross?