Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Website-Konzeption: Mobile first und responsive Sites

Beispiele guter responsiver Websites

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Trainer zeigt in diesem Video verschiedene Beispiele für gute responsive Websites und erläutert den Umgang der Seiten mit unterschiedlichen Bildschirmgrößen.
04:37

Transkript

Sehen wir uns einmal Beispiele für gute responsive Websites an. Das erste Beispiel ist das des Bundesministeriums für Ernährung und Landwirtschaft. Auf dem iPhone sieht das so aus: Vorne starte ich, neben dem Logo kommt ein schönes Bild, dann sehe ich gleich die Möglichkeit, über das Menü in die Unterbereiche der Sites zu gehen und ich habe Bilder mit Teaser-Texten für aktuelle Dinge. Dann kommt der Minister dazu, über den ich mich informieren kann, und die Pressemitteilungen. Auf dem iPad wird der Platz natürlich sehr viel besser ausgenutzt. Da sehe ich gleich sehr viel mehr. Da sind die Elemente, die auf dem iPhone als Menü die gesamte Seitenbreite einnehmen, nebeneinander platziert. Dann kommen die Texte, wieder der Minister, hier habe ich auch eine zweispaltige Ausnutzung der Seitenbreite und da unten gibt es noch einmal Spezialthemen. Schauen wir uns jetzt die Version an, die für Desktop- und Laptop-Monitore gedacht ist und die ein bisschen größer ist. Auf dem ersten Blick gibt es wenige Unterschiede zur iPad-Version, ich sehe aber, es geht doch ein bisschen mehr in die Breite, mehr Platz wird ausgenutzt. Ich sehe aber trotzdem, dass die Icons weiterhin groß sind, was auch sinnvoll ist, wenn ich den Platz nicht mehr brauche, um darauf zu tippen. Es sieht einfach gut aus und hat eine moderne Ästhetik, wenn ich nicht alles hineinquetsche, sondern auch hier weiterhin eine gewisse Großzügigkeit behalte. Was ich aber sehe, was auf den anderen Version nicht so war, ist, dass der Minister jetzt hier rechts in der Seitenleiste ist. Ich habe ein zweispaltiges Layout mit einer Seitenleiste, die schmaler ist, als die linke Leiste hier. Nach unten hin habe ich noch mehr Themen, die zum Beispiel im Fokus vorgestellt werden. Als nächstes schauen wir uns die Website von Time.com an. Das ist das amerikanische Magazin, das viele Preise für die erste responsive Website eines größeren Magazins bekommen hat und die auch wirklich gut funktioniert. Hier auf dem iPhone sieht das so aus. Ich starte mit einem großen Video, das ich durch Tippen auf die Playtaste starten kann. Ich kann mir die ganzen Inhalte anschauen und habe zusätzlich eine Seitenleiste, die ich per Tap auch noch einblenden kann, wo ich die Möglichkeit habe, eine zweite Ebene zu schaffen. Auf dem iPad sieht das Ganze dann so aus. Auch hier wieder das Video, ich sehe ein zweispaltiges Layout. Ich habe eine Zweidrittelspalte mit den wichtigsten Geschichten und rechts daneben eine Seitenleiste mit Zusatzinformationen. Jetzt schauen wir das Ganze in der dritten Größe an, die für Laptops und Desktops gemacht ist. Hier sehe ich ein ganz anderes Bild mit drei Hauptspalten. Links die Seitenleiste, die beim iPhone per Tap eingeblendet wird, in der Mitte der Hauptbereich für aktuell wichtige Geschichten und rechts die Zusatzinformationen. Als drittes und letztes Beispiel sehen wir uns die Website vom Kaufhaus Ludwig Beck an, die hat ebenfalls mehrere Preise bekommen. Das ist eine ganz andere Erfahrung bei Ludwig Beck. Wir fangen wieder bei der iPhone-Version an und sehen, dass das Ganze sehr bildlastig ist. Die wollen schöne Produkte, vor allem Kosmetika verkaufen, demnach ist das Ganze sehr bildlastig und hat sehr wenig Text, ganz anders als die Nachrichtenseite. Auf dem iPad sieht das dann so aus: Da habe ich hier oben ein Karussell, womit ich zwischen den Bildern hin- und herswitchen kann. Ich habe hier schöne Produkte. Sie sehen auch, es funktioniert auf dem iPad natürlich besser, die Bilder kommen besser zur Geltung und wenn ich mir das auf der Desktop-Version ansehe, dann stelle ich fest, dass auch die relativ ähnlich ist, wie die Version, die ich auf dem iPad präsentiert bekomme. Ich habe aber noch Zusatzinformationen, die ich hier links über Klicks auf diese Seitenleistenelemente heranholen kann. Das waren drei von sehr vielen Beispielen. Es gibt mittlerweile sehr viele responsive Websites, schauen Sie einfach und googeln nach "Website responsiv". "Repractice" zum Beispiel, dann kriegen Sie auch viele gute amerikanische Sites und Sie werden sehen, für die Inspiration ist für Sie auf jeden Fall etwas dabei.

Website-Konzeption: Mobile first und responsive Sites

Konzipieren Sie Websites, die für unterschiedlichste Geräte – vom Smartphone bis zum Fernseher – geeignet sind und lernen Sie die Werkzeuge und Programme kennen, die hier zum Einsatz kommen.

1 Std. 32 min (18 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:17.12.2014
Aktualisiert am:14.07.2017

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!