NICO HUA
WEB / MOTION / SOUND

ESSAY / 04 · Technik

Bewegung braucht Präzision. Und ein Budget.

Wie aufwendige Animationen und gute Performance zusammenpassen – von der ersten Bilddatei bis zur mobilen Interaktion.

Gestaffelte Bewegungskurven verbinden ruhende Ausgangs- und Zielpunkte.
VISUAL ESSAY / 04MOTION / PRECISE BY DESIGN
THOUGHT / CODESTUDY 04
01const thought = "motion";
02const paths = measure(thought);
03await reduce(paths);

Die schönste Animation hilft nicht, wenn die Seite auf sie wartet.

Eine Website besitzt einen Rhythmus. Sie lädt, reagiert, führt weiter und lässt los. Wenn dieser Rhythmus stockt, wird aus Inszenierung schnell Reibung. Performance gehört deshalb in die Gestaltung und nicht erst auf die letzte technische Checkliste.

Ein voller Desktop-Bildschirm kann viel verzeihen. Ein Smartphone im Mobilfunknetz tut das weniger. Die Frage lautet nicht nur, ob eine Animation läuft, sondern wann sie geladen wird, wie viel Arbeit sie auslöst und ob die Seite ohne sie verständlich bleibt.

Gib jeder Bewegung einen Auftrag

Eine Überblendung kann einen Zusammenhang erklären. Eine kleine Positionsänderung kann einen Zustandswechsel zeigen. Eine große Kamerafahrt kann eine Geschichte tragen. Wenn eine Bewegung keinen solchen Auftrag besitzt, lohnt sich die Frage, ob sie überhaupt gebraucht wird.

Schreibe ihren Zweck in einem Satz auf. „Sie wirkt hochwertig“ ist zu ungenau. „Sie zeigt, dass dieses Detail zur ausgewählten Ebene gehört“ ist prüfbar. Das macht auch die technische Umsetzung gezielter.

Miss das Erlebnis an mehreren Stellen

LCP beschreibt, wann der größte sichtbare Inhalt geladen ist. INP betrachtet die Reaktionsfähigkeit bei Interaktionen. CLS erfasst unerwartete Layoutverschiebungen. Als gute Zielwerte gelten LCP bis 2,5 Sekunden, INP bis 200 Millisekunden und CLS bis 0,1, jeweils am 75. Perzentil der entsprechenden Felddaten.

Diese Werte beschreiben unterschiedliche Probleme. Eine kleine Bilddatei löst keine blockierenden Skripte. Ein schneller erster Bildschirm beweist nicht, dass ein späterer Slider flüssig reagiert. Laborprüfungen helfen bei der Diagnose; reale Nutzungsdaten zeigen, was tatsächlich ankommt.

Ein konkretes Medienbudget

Für jede Sektion sollte feststehen, welches Medium zuerst gebraucht wird. Das sichtbare Hero-Bild erhält Vorrang. Spätere Videos können zunächst ein Poster zeigen. Für kleine Displays werden passende Bildgrößen ausgeliefert. Breite und Höhe werden reserviert, damit beim Laden nichts springt.

Bei Videos zählen Motiv, Codec, Auflösung und Bitrate gemeinsam. Eine höhere Bildrate repariert keine unruhige Quelle. Eine Datei in maximaler Auflösung ist auch kein Qualitätsbeweis, wenn das Display und die Verbindung davon keinen Nutzen haben.

Bewegung darf eine Wahl bleiben

Die Seite sollte reduzierte Bewegung berücksichtigen. Lange Kamerafahrten können dann durch ruhige Zustände ersetzt werden. Informationen müssen weiterhin zugänglich sein. Automatisch laufende visuelle Elemente brauchen dort, wo erforderlich, eine erreichbare Pausenmöglichkeit; Ton beginnt bewusst.

Scrollen sollte nicht zum Geschicklichkeitsspiel werden. Besonders auf Touch-Geräten muss der Weg zum nächsten Inhalt vorhersehbar bleiben. Ein gelungener Übergang fühlt sich selbstverständlich an, weil die Bedienung nicht gegen die Inszenierung arbeiten muss.

Was vor dem Launch geprüft wird

Teste mit einer kalten Sitzung, mehreren Bildschirmgrößen und gedrosselter Verbindung. Prüfe den ersten sichtbaren Inhalt, Menüöffnung, Artikelauswahl, Medienstart und Rücknavigation. Dokumentiere Browser, Gerät und Testbedingungen. Erst dann wird aus „läuft bei mir“ eine brauchbare Qualitätsaussage.

Quellen & weiterführende Lektüre

Die Verbindung zur Praxis entdecken ↗