Responsive Webdesign – Grundlagen

Carousel, Diashows und mehr

Testen Sie unsere 1926 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Viele Web-Seiten setzen auf Diashows, "Karussel"- und andere Effekte. Worauf Sie achten sollten, wenn Sie so etwas bei einer "responsive"-Seite einsetzen, erfahren Sie hier.

Transkript

Häufig verwendet man heute bei Web-Seiten zusätzlich irgendwelche Diashows, oder "Karussells" oder Slider. Und wenn man die beim Responsive Web Design Projekt einsetzt, dann müssen die natürlich auch funktionieren, das heißt auch an sich responsive sein. Eine gute Quelle für gut gemachte solche Scripten, et cetera, ist die Ressource hier von Brad Frost, die Responsive Web Design. Hier sehen Sie zum Beispiel, was er hier für Karussell für Lösungen vorschlägt. Es ist diese Seite hier. Das ist sicher ein guter Ansatzpunkt, damit zu beginnen. Allgemein sollten Sie dann aber testen, wenn Sie beispielsweise eine Slideshow einbinden, ob die wirklich gut funktioniert auf einem kleinen Gerät. Das heißt, die Bilder müssen sich anpassen. Es muss aber gut auf dem Touchscreen zu steuern sein. Schön wäre es manchmal, man könnte es vielleicht auch wischen, weil es die Funktionalität ist, die man bei Touchscreens gewohnt ist. Man muss beispielsweise aufpassen, wenn die Bildbeschriftung auf dem Bild selbst liegt. Dann kann das sein, wenn das Bild kleiner wird, dass dann die Beschriftung zu groß ist und das Ganze verdeckt. Das muss man sich anschauen. Hier sehen Sie einmal ein Beispiel für so eine Slideshow, die responsive ist, das heißt, Sie sehen, das passt sich hier immer an und funktioniert soweit. Prinzipiell sollte man aber auch schauen, ob man die Funktionalität überhaupt braucht. Und sowas wie Slideshows werden natürlich häufig eingesetzt, weil es üblich ist, oder weil es irgendwie so ganz schick ist, ohne dass es eine ernsthafte Funktionalität hat und dann sollten Sie besser darauf verzichten. Ein anderes Beispiel, was auch schlecht funktioniert auf kleinen Bildschirmen, ist sowas wie eine Lightbox. Lightbox nimmt ein kleines Vorschaubildchen, man klickt drauf und es wird groß angezeigt. Aber wenn sowieso alle Bilder relativ klein sind, dann kann man es auf dem Smartphone natürlich auch nicht groß anzeigen, das bringt nichts. Umgekehrt kann man aber auch diese Prinzipien von Slideshows und diesem Verstecken-Anzeigen nutzen, ganz kreativ. Und hier möchte ich mal ein Beispiel zeigen. Hier sehen Sie eine Seite, hier, wo es um Krawatten geht. Das ist responsive aufgebaut. Wie könnte man das jetzt darstellen, wenn der Bildschirm kleiner ist? Klassische Methode wäre: man ordnet das einfach untereinander. Aber das ist natürlich, auch die Krawatten, das wird komisch aussehen, ist eigentlich nicht so eine gute Lösung. Und da haben die eben was Schönes gemacht, dass die das hier gestalten, wie so ein Karussell. Das heißt, ich kann hier über die Buttons weitergehen und kriege die dann angezeigt. Das heißt, hier ein Pattern, was an sich gut auf dem Desktop funktioniert. Bei kleinen Bereichen kann man plötzlich hier auch nutzen, um den Inhalt besser zu organisieren. Das Responsive Web Design zwingt einen genauer zu sein und strenger zu sein. Also, bei der Desktop-Variante einer Seite ist einem das leichter verziehen, wenn es irgendeine Diashow gibt, die eigentlich nicht notwendig wäre mit großen Bildern oder so. Und auf einem Smartphone, falls jemand mobil unterwegs ist und dann die großen Bilder auch geladen werden, ist es natürlich viel schlimmer. Deshalb immer genau anschauen: braucht man es wirklich? Und dann auch wirklich bei der Usability überprüfen, ob das gut auf einem kleinen Screen funktioniert.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!