page.php

JADE kommt ohne viele der alten Effekte: Keine Slideshows, keine Popups, keine Carousels. Warum nicht?

carusel-1
Fast immer ignoriert
carusel-2
Effekt ohne Beitrag
carusel-3
Inhalt ohne wesentlichen Nutzen
carusel-4
Nur 1%
carusel-5
Mobil? Unbrauchbar

Sebst-abspielende Slideshows und Carousels langweilen den Besucher und werden kaum zur Kenntnis genommen.

Wer sieht sich alle Bilder von Slideshows oder automatisch ablaufenden Karussellen an? Und selbst wenn ich hier etwas sehe, ist die Verweildauer zu kurz, um die Informationen zu lesen. Auf dem Handy ist das Karussell viel zu klein zum lesen, die kleinen Pfeile rechts und links sind selbst für den kleinen Finger zu winzig .

Dasselbe gilt für Popup-Bilder. Auf den Monitoren von Handys und Tablets werden Bilder sowieso schon in voller Größe gezeigt. Ein Popup wäre hier nur verwirrend, denn es zeigt dasselbe Bild noch einmal ohne jede Änderung.

Sinnvolle Effekte

Natürlich gibt es auch sinnvolle Effekte: Wenn sie dem Benutzer zeigen, dass die Seite sie zur Kenntnis nimmt. Aber die Seiten müssen immer lesbar und jeder Bereich muss ohne diese Effekte zugreifbar und gut lesbar bleiben, wenn Javascript ausgeschaltet wird.

Leichter Vergrößerungseffekt beim Covern mit der Maus

Für ein Cover-Bild unter Erweitert auf der rechten Seite des Gutenberg-Editor die Klasse larger einsetzen. Über dem Coverbild darf ein Text liegen, muss aber nicht. Das gilt auch für Overlay, das eine matte durchsichtige Ebene über das Cover legt. Der Fokuspunkt des Bildes bleibt in der Mitte des Bildes.

Mittelpunkt des Cover-Bilds festlegen
CSS-Klasse larger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Nullam in neque lorem. Morbi in iaculis lorem. Curabitur commodo dapibus efficitur.

Automatisches Vergrößern, wenn das Bild im Browserfenster sichtbar wird

Ebenfalls ein Cover-Bild, der Fokus ist wählbar. Unter Erweitert auf der rechten Seite des Gutenberg-Editors die CSS-Klasse scrollen eingeben. Ein Text darf über dem Cover liegen, muss aber nicht. Der Fokuspunkt des Bildes bleibt in der Mitte des Bildes.

Nachhaltigkeit

Effekte, gleich ob sie mit CSS oder Javascript realisiert sind, kosten Ladezeit. Dabei denken wir nicht einfach nur an die Suchmaschinen-Optimierung, die durch kurze Ladezeiten gewinnt, sondern auch an die Nachhaltigkeit und den Energieverbrauch.

Read the manual, Luke, read the manual!

Obi Web Kenobi