Wordpress Performance Wordpress SEO Wordpress Security Wordpress Themes Wordpress Hosting Mein Setup Das Buch

Viel zu viele Transitions

Viel zu viele Transitions

Die Flut der CSS 3 Transitions

Lange Zeit war Web Design sehr statisch und langweilig. Damit es dennoch eine gewisse Abwechslung und Dynamik gab, war viel Javascript notwendig, was wiederum die allgemeine Performance bremste. Erst mit CSS 3 konnte für kleinere Animationen auf selbiges verzichtet werden, Transitions, also Übergänge, waren auch ohne jQuery und Konsorten möglich. Fade-in Effekte, Formen und Muster, Verläufe und weiches ein- / ausblenden war plötzlich kein Problem mehr. Doch all das hat auch zu etwas anderem geführt, nämlich dazu, dass Web Designer und Web Entwickler dazu neigen, es mit diesen Effekten zu übertreiben. Dabei ist CSS 3 aber nicht gleich performant und vor allem ist der überflüssige Einsatz der Effekte auch alles andere als hübsch oder gar professionell. Mir persönlich sind hier vor allem die Transitions ein Dorn im Auge, denn praktisch auf jeder Website werden diese inzwischen bis zum Erbrechen eingesetzt. Warum ich das nicht wirklich gelungen finde, möchte ich euch gerne ausführlicher erklären.

Nur auf den ersten Blick hübsch

Das Problem mit den Transitions ist zunächst einmal, dass jeder auf sie abfährt. CSS 3 machte es möglich, und seit es möglich ist, werden die Transitions auch inflationär genutzt. Jeder kleine Button braucht einen weichen Übergang, jedes kleine Menü bekommt CSS 3 Transitions. Das Problem dabei ist vor allem, dass der Designer schnell blind wird. Transitions sind nämlich keinesfalls so hübsch wie sie anfangs wirken, sie scheinen nur etwas Besonderes zu sein. Viel zu schnell haben sich Nutzer aber an ihnen sattgesehen. Auch die Performance wird mit den vielen Einblendungen nicht unbedingt positiv beeinflusst, denn auch intensives CSS 3 muss gerendert werden. Und wie immer stellt sich die Frage nach dem Warum. Warum, muss dieses Element einen weichen animierten Übergang bekommen? Liefert das einen echten Mehrwert? Ist es optisch wirklich schick? Nein!

Die Sache mit der Performance

Das eigentliche Problem, welches ich bei Transitions (Aber natürlich auch anderen CSS 3 Effekten) sehe, ist die Sache mit der Performance. Eine überladene CSS-Datei war noch nie positiv zu bewerten, doch ein “transition: all 1s;” legt natürlich auch keine komplette Website lahm. Es ist die Transition selbst, die dem Nutzer eine Verzögerung vermittelt. Klar, den Effekt solcher Einblendungen bzw. weichen Übergänge, finden alle erst einmal recht hübsch, doch wenn ich den Button dann zum dritten mal klicken muss, nervt mich der langsame Fade-in Effekt nur noch. Was soll das? Es ist ein künstliches in die Länge ziehen, es verringert die gefühlte Performance einer Website. Desto mehr CSS 3 Transitions, desto verzögerter, langsamer und träger wirkt eine Website nämlich auf den Nutzer. Außerdem sehen sich Besucher eben auch schnell satt, weshalb ein Einblenden nach dem fünften mal eben nur noch nervig, nicht mehr hübsch oder neu ist.

Weniger ist mehr

Und wieder zieht der Satz “Weniger ist mehr”, denn wieder einmal spricht der Satz die Wahrheit aus. CSS 3 Effekte wie Transitions sind nett, doch nur wenn sie korrekt und dezent genutzt werden. Sie sollten kurz und knackig sein, nicht übertrieben lang. In der Audio-Branche wird vieles mit viel Technik verbessert, doch das Meiste davon ist nicht klar herauszuhören. Mir wurde einmal gesagt: “Du musst es so einstellen, dass es kaum wahrnehmbar ist.” Versteht ihr was ich meine? Eine Transition die 1 Sekunde lang geht, ist eine deutliche Verzögerung. Auch ein Übergang von 0.3 Sekunden ist noch viel zu deutlich wahrnehmbar und lässt den Eindruck einer langsamen Website enstehen. Ein Effekt aber, der nur 0.1 Sekunden lang ist, wird gar nicht richtig wahrgenommen. Verschwendung meint nun mancher, denn wozu Transitions, wenn diese nicht gesehen werden? Ganz einfach, weil sie nicht gesehen werden sollen. Damit etwas wirkt, muss ich es nicht als einzelnes Element sehen, es muss mit dem Rest verschwimmen, darf gar nicht hervorstechen. Im Menü dieser Website beispielsweise, dort nutze ich so eine kurze Transition, damit die Übergänge der Farben nicht zu abgehackt wirken. Ohne Transition sind sie schnell und wirken statisch, mit Transition sind sie dezent weicher. Ohne es also wirklich wahrzunehmen, sorgt der minimale Fade-in bzw. Übergang für ein runderes Ergebnis. Weniger ist eben mehr.

Viel zu viele Transitions

Ich persönlich bin der Ansicht, dass zu lange Effekte schnell langweilig werden. Vor allem sind sie aber als einzelnes Element wahrzunehmen und genau das soll ja gar nicht so sein. Ein Effekt muss etwas anderes unterstützen oder unterstreichen, darf nicht für sich selbst stehen. Außerdem sehen Besucher sich satt, der einst schöne Effekt ist dann nur eine sich wiederholende Verzögerung. Mir geht es  genau so, wenn ich jeden Tag endlose Transitions sehen muss. Ein Button, der beim Hover Ewigkeiten braucht, um die Farbe zu wechseln, der nervt mich einfach nur noch. Ja, der Effekt ist eigentlich sehr hübsch, nur sorgen zu lange Verzögerungen eben für ein Gefühl der Trägheit. Eine eigentlich schnelle Website wirkt plötzlich langsam, weil sich alles mit CSS 3 einblendet, überlagert, weich hinzugefügt wird. All das ist nur auf den ersten Blick hübsch und sollte mit Abstand betrachtet werden. CSS 3 hat uns allen viel gebracht, doch momentan sehe ich einfach viel zu viele Transitions.



Wordpress Performance eBook