Die perfekte Slideshow: So bringst du das digitale Bilder-Blättern auf deine Website

12. März 2015 von Sebastian Maier

Mit einer Slideshow digitale Bilder auf die Website bringen

Das Internet liebt Bilder und Dynamik. Daher ist es nicht verwunderlich, dass Slideshows in den vergangenen Jahren einen kleinen Siegeszug angetreten haben. Anhand der Popularität bekannter Slideshow-Formate wie die Fotostrecken von Spiegel Online wird deutlich, dass dieses Medium stark anziehend auf Internetnutzer wirkt. Durch eine Slideshow können Emotionen und in Kombination mit Texten und Videos stark verdichtete Informationen vermittelt werden.

Slideshows können zu fast jedem Zweck eingesetzt werden. Viele Unternehmen wie beispielsweise SAP nutzen sie, um ihre Referenzen darzustellen:

SAP stellt seine Referenzen mit Hilfe einer Slideshow vor

Andere Unternehmen präsentieren mit einer Slideshow ihr Produktportfolio, ihre Geschichte etc. Die Möglichkeiten sind im Prinzip unbegrenzt!

Das Praktische an Slideshows ist, dass man mit ihnen auf dem Platz von etwa einem Bild dank des Blätterns eine größere Menge an Bildern darstellen kann. Am besten sind Slideshows für die Darstellung einer Anzahl von etwa drei bis zehn Bildern beziehungsweise Slides geeignet. Durch Thumbnails in der Vorschauleiste kann die Navigation durch die Slideshow noch übersichtlicher gestaltet werden. Bei einer sehr großen Menge an Bildern ist jedoch wahrscheinlich eine klassische Bildergalerie – also eine Übersicht vieler kleinformatiger Vorschaubilder, die sich mit einem Klick vergrößern – die geeignetere Variante.

Der Inhalt einer Slideshow kann inzwischen sehr vielfältig sein. Von Bildern über Text bis hin zu Videos ist vieles möglich, auch miteinander kombiniert. Man kann dafür beispielsweise einzelne Slides in Ebenen unterteilen, um einen mehrdimensionalen Eindruck zu erzeugen.

Hast du bereits eine Idee, welche Inhalte deiner Website du gerne in eine Slideshow packen würdest? In diesem Artikel erfährst du, wie eine Slideshow aufgebaut sein kann und welche technischen Aspekte du berücksichtigen solltest, um die für deine Zwecke perfekte Slideshow auszuwählen.


Der Aufbau einer Slideshow

Beim Aufbau einer Slideshow gibt es viele Möglichkeiten. Am bekanntesten ist die einfache Slideshow, bei der Bilder als Slides dargestellt werden und die wohl am häufigsten eingesetzt wird. Doch Slideshows können noch so viel mehr! Die folgenden Beispiele zeigen euch, was mit einer Prise Kreativität und “Um-die-Ecke-Denken” auch beim Design einer Slideshow möglich ist.


Content-Slider

Content-Slider haben einen informativen Charakter und ermöglichen es, viele Inhalte auf kleinem Raum attraktiv und bedienerfreundlich in eine Website zu integrieren. Sie bieten sich  z. B. an, um Referenzen, Projekte oder Portfolios übersichtlich darzustellen.

Der Einsatz sollte jedoch immer mit Bedacht erfolgen und nicht als Gelegenheit genutzt werden, um ungefiltert große Mengen an Inhalten auf die Website zu stellen. Die Besucher erwarten, dass sie aufbereitete und relevante Informationen erhalten. Ein Content-Slider dient nicht der Bequemlichkeit des Website-Betreibers ;).

Content-Slider von html5up.net/heliosHelios präsentiert seine Website-Inhalte per Slideshow

Gerade Content-Slider können – ähnlich wie Bild-Slider – nicht nur einzelne Slides darstellen, sondern wie in dem Helios-Beispiel auch eine Auswahl an Inhalten parallel anzeigen.


Mehrere Ebenen

Um etwas mehr Dynamik in eine Website zu bringen, können einzelne Slides in mehrere Ebenen unterteilt werden, die dann beispielsweise zeitversetzt oder aus verschiedenen Richtungen eingeslidet werden. Dezent eingesetzt kann dies die Aufmerksamkeit auf den Inhalt steigern und die Konzentration auf die wichtigen Bereiche der Slide erhöhen.

Ein Beispiel für eine Slideshow, bei der Inhalte zeitversetzt eingeblendet werden, findest du unter glide.jedrzejchalubek.com.


Slideshow mit Timeline

Dass eine Slideshow kreativ mit weiteren Elementen verknüpft werden kann, beweist das Northwestern University knight lab unter timeline.knightlab.com. Hier wurde die Slideshow mit einer Timeline ergänzt, dank der man sich chronologisch durch Inhalte klicken kann.

Solch eine Timeline-Slideshow kann beispielsweise für die Darstellung eines Ereignisses in Bildern genutzt werden, oder auch für die Visualisierung der Geschichte eines Produktes oder eines Unternehmens.


Worauf du bei der Auswahl von Slideshows achten solltest

Slideshows sind Animationen, was bedeutet, dass sie technisch etwas komplexer sind als die reine Darstellung eines Textes auf einer Website. Sie werden fast immer mit Hilfe von JavaScripts erstellt, die von Entwicklern in einem Grunddesign häufig kostenlos zur Verfügung gestellt werden. Dieses Template muss dann in der Regel für die Integration in die Website noch individuell angepasst werden.

Eine Slideshow besteht nicht nur aus den dargestellten Slides, sondern auch aus einer Style- und einer Skript-Datei und gegebenenfalls sogar noch aus Bilddateien für Bedienelemente. Muss dich das aber eigentlich interessieren? Ich denke ja, weil durch die Auswahl einer zu umfangreichen Slideshow die Ladezeiten der Website negativ beeinflusst werden. 

Je besser das Skript also zu den Bedürfnissen einer Website passt, um so schlanker kann es gehalten werden – und umso schneller lädt die Seite. An dieser Stelle erkläre ich dir, worauf du also achten solltest, wenn du eine Slideshow auswählst.


Bedienbarkeit

Ein Auswahlkriterium, auf das großen Wert gelegt werden sollte, ist die Bedienbarkeit. Was hier wichtig ist, hängt jedoch immer von den individuellen Anforderungen ab.

Bei einer Slideshow mit Lightbox-Funktion beispielsweise – also der Möglichkeit, die Vorschaubilder mit einem Klick zu vergrößern – sollte man darauf achten, dass man diese durch einen Rechtsklick im Bereich außerhalb der Box oder durch Drücken der ESC-Taste wieder schließen kann.

Auch sollte ein besonderes Augenmerk auf die Navigation durch die Slideshow gelegt werden. Sehr benutzerfreundlich sind beispielsweise Pfeiltasten, mit denen man zusätzlich durch die Slides blättern kann.


Kompatibilität mit mobilen Geräten

Heutzutage ist die Kompatibilität mit mobilen Geräten unerlässlich. Zunächst ist es daher wichtig, dass die Slideshow auf den mobilen Geräten gut dargestellt wird und sich dynamisch an die verschiedenen Bildschirmverhältnisse anpasst.

Auch sollte sich die Slideshow per Touch bedienen lassen und beispielsweise das Blättern durch Wischen zulassen. Weitere mobile Funktionen können das Vergrößern und Verkleinern sein.


Gestaltung

Je mehr Flexibilität das ausgewählte Slideshow-Skript dem Entwickler lässt, um so besser kann die Slideshow an das Layout einer Website angepasst werden – beispielsweise bei der Toolbar, der Höhe oder der Breite, den Pfeilen etc.


SEO

Auch bei der Suchmaschinenoptimierung (SEO) können Slideshows unterstützen, wenn man die Bilder mit dem Alternative-Text und einer guten Beschreibung versieht. So kann man über die Bildersuche in den Suchmaschinen Traffic generieren.


Verwendet ihr Slideshows bei euren Designs und wenn ja, in welchen Fällen? Und worauf achtet ihr, wenn ihr eine Slideshow gestaltet?




(Headerbild: Foto von liesvanrompaey, flickr.com/Creative Common Licence)

zurück
comments powered by Disqus