- Kritisiert den „Scroll-Fade“-Effekt, bei dem Elemente beim Scrollen auf Websites allmählich eingeblendet werden, und weist auf visuelle Unannehmlichkeiten sowie zusätzliche Entwicklungskomplexität hin
- Erklärt, dass die meisten Implementierungen durch übertriebene Übergangseffekte und schlechtes Timing die User Experience verschlechtern und auch Entwickler belasten
- Erwähnt Barrierefreiheitsprobleme und die negativen Auswirkungen auf reale Nutzer, etwa bei Vestibularstörungen (vestibular disorders)
- Solche Effekte können zu Performance-Einbußen und schlechteren Core Web Vitals (z. B. LCP) führen und werden oft ohne ausreichende Tests und Validierung eingesetzt
- Der Beitrag betont, dass Scroll-Fades keine schnelle Lösung, sondern eine komplexe Funktion sind, die von Anfang an mitgedacht werden muss, und fordert entschieden dazu auf, sie nicht mehr zu verwenden
Die Probleme von Scroll-Fades
- Scroll-Fade ist ein visueller Effekt, bei dem Elemente allmählich erscheinen, wenn Nutzer die Seite nach unten scrollen; oft wird er zusammen mit einer Transformation auf der Y-Achse (
transform) verwendet
- Der Autor bezeichnet das als „schreckliche Erfahrung“ und merkt an, dass der Effekt allen Nutzern gleichermaßen aufgezwungen wird
- Fein abgestimmt könnte der Effekt vielleicht akzeptabel sein, doch in den meisten Fällen wird er übertrieben eingesetzt und wirkt visuell unangenehm
- Erwähnt wird der Fall, dass kurz vor Projektabschluss noch die Anforderung kommt, „alle Elemente mit Fade zu versehen“
- Der Autor sieht darin einen „falschen Versuch, Langeweile zu beseitigen“ und urteilt, dass die Website dadurch in Wirklichkeit nur billiger wirkt
Barrierefreiheit und Auswirkungen auf Nutzer
- Mehrere Entwickler nennen Barrierefreiheit (accessibility) als wichtigstes Gegenargument
- Besonders Nutzer mit Vestibularstörungen (vestibular disorders) können durch Bewegungseffekte beeinträchtigt werden
- Mit der CSS-Media-Query
prefers-reduced-motion lässt sich ein gewisser Schutz bieten, doch der Autor argumentiert, dass Bewegung standardmäßig deaktiviert sein und nur per Opt-in aktiviert werden sollte
- Ebenfalls genannt werden kognitive Überlastung (cognitive overload) und Ablenkung
- Insbesondere wird erwähnt, dass auf Apple-Geräten entwickelte Websites sich unter Windows, Linux und Android oft anders verhalten
Test- und Performance-Probleme
- Betont wird die Notwendigkeit von Tests mit realen Nutzern und Performance-Validierung, bevor Scroll-Fade-Effekte eingesetzt werden
- Es müsse geprüft werden, ob Nutzer ihre Aufgaben weiterhin erledigen können und ob sich etwa die Bounce Rate erhöht
- Wer nicht bereit ist zu testen, sollte „das Risiko gar nicht erst eingehen“
- Der Autor erwähnt, dass sein eigenes Skript die Technik „This CSS Will Self-Destruct“ von Scott Jehl verwendet
- Sie wird als Schutzmechanismus für den Fall vorgestellt, dass JavaScript deaktiviert ist
Auswirkungen auf Core Web Vitals und SEO
- Es wird darauf hingewiesen, dass Scroll-Fades wahrscheinlich Kennzahlen der Core Web Vitals wie Largest Contentful Paint (LCP) verschlechtern
- Zwar werden keine direkten Daten präsentiert, doch der Autor sagt, dass von ihm geprüfte Websites in der Vergangenheit „schreckliche LCP-Werte“ gezeigt hätten
- Beim Thema SEO zeigt sich eine ironisch-skeptische Haltung, etwa mit der Bemerkung, Google liefere ohnehin minderwertige Inhalte
- Zugleich macht der Autor deutlich, dass der Blogbeitrag dazu beitragen soll, diesen Effekt aus der Mode zu bringen
Fazit: Verbotserklärung für Scroll-Fades
- Unter der Überschrift „5 tolle Scroll-Fade-Effekte“ endet der Text satirisch damit, fünfmal „Mach es nicht“ zu wiederholen
- Es wird hervorgehoben, dass Scroll-Fades keine schnelle Lösung sind, sondern eine komplexe Funktion, die unter Berücksichtigung der gesamten Website-Struktur von Anfang an entworfen werden muss
- Der Beitrag endet mit dem scherzhaften Vorschlag, Entwickler sollten gemeinsam erklären, dass es technisch unmöglich ist
- Die Schlussbotschaft ist eindeutig: „Tod dem Scroll-Fade“
Noch keine Kommentare.