Wie kann man seine Webseiten mit Multimedia aufwerten und interessant gestalten, ohne mit Klickibunti zu nerven?

Im Zuge des ständig stattfindenen Wiki-Gardening fand ich diese Urversion des Multimedia-Tutorials aus dem Jahre 2010:

Sie haben Ihre Homepage fast fertig, doch das einzige was Ihnen fehlt ist ein vernünftig ansprechendes "Script" für eine Laufschrift, für Werbung oder Ähnliches.

Versuchen Sie es mit diesem Parameter:

<marquee behavior="scroll" direction="left"
         scrollamount="4" scrolldelay="0"> 
  Das hier ist der einfache Lauftext 
</marquee>

^[1]

Auch wenn das Multimedia-Tutorial mit audio und video längst einen anderen Schwerpunkt hat, und sogar ein Kapitel zu Hintergrundvideos aufweisen kann, bleibt die Frage: „Wie viel Animation ist zu viel?“

Inhaltsleere Animationen und Gimmicks nur um des Effekts willen sind heutzutage zurecht verpönt. Andererseits können Benutzeraktionen durch kleine Animationen verdeutlicht werden und Videos und Animationen Webseiten auch inhaltlich aufwerten.

Die oben gestellte Frage sollte sich daher stets nach der inhaltlichen Notwendigkeit und den Wünschen des Webseitenbenutzers und nicht des -autors richten.

Deshalb rückten im vergangenen Jahr mit Media Queries Level 5 Medienmerkmale ins Bewusstsein, die bereits im Betriebssystem getroffene Benutzereinstellungen auslesen. Neben dem im April besprochenen Dark Mode spielt hier prefers-reduced-animation eine große Rolle. Mit dieser Medienabfrage können Sie Animationseffekte in Ihre Webseite einbauen, die aber nicht aktiviert werden, wenn der Benutzer dies nicht wünscht.

Alle Animationen deaktivieren zu wollen ist aber auch zu kurz gedacht:

Für alle sich bewegenden, blinkenden oder scrollenden Informationen, die
(1) automatisch beginnen,
(2) länger als fünf Sekunden dauern und
(3) parallel zu anderen Inhalten dargestellt werden, gibt es einen Mechanismus, mit dem der Nutzer sie anhalten, stoppen oder ausblenden kann, es sei denn, das Bewegen, Blinken oder Scrollen ist Teil einer Aktivität, für die es unerlässlich ist;

W3C: WAI/WCAG^[2]

Im oben erwähnten Tutorial zu Hintergrundvideos wird das Video bei prefers-reduced-motion: reduce nicht automatisch gestartet und stattdessen ein Kontrollfeld eingeblendet mit dem derBenutzer das Video starten kann, wenn und wann er will!

In den meisten Kapiteln zu Multimedia, CSS-Animationen und der WAAPI sind die Beispiele bereits angepasst, um best practices vorzustellen, damit Webautoren und ihre Nutzer so viel Multimedia und Animationen bekommen, wie sie wollen!