Grundlagen des Responsive Webdesign

Hallo, mein Name ist Daniel Walter Scott. In diesem Video erläutere ich, worum es bei der Erstellung einer Website mit Responsive Design geht.

Bei solchen Websites ändert sich das Design je nachdem, auf welchem Bildschirm die Site angezeigt wird.

Hier sehen Sie die Website, die im Rahmen dieser Reihe erstellt wird. Ich verwende ein MacBook Pro. Das Design nutzt den auf dem Bildschirm verfügbaren Platz perfekt aus.

Responsive Designs müssen jedoch auch auf Tablets und Smartphones funktionieren. Sehen wir uns zuerst die in Photoshop erstellten Mockups an. Photoshop bietet sich für alle Design-Arbeiten an, also auch für das Erstellen von Mockups. Denn Photoshop unterstützt eine rasche und praxisorientierte Arbeitsweise. Sie können Elemente verschieben oder Farben anpassen, und alles ist schnell und einfach. Wenn Sie fertig sind, haben Sie ähnliche Mockups wie diese Kompositionen hier.

Sie zeigen lediglich das Layout, bieten jedoch keinerlei Interaktivität. An dieser Stelle kommt Dreamweaver ins Spiel. In Dreamweaver kann ich interaktive Elemente hinzufügen und die Funktionen zur Anpassung der Website an unterschiedliche Bildschirmgrößen aktivieren. In jedem dieser drei Designs wird derselbe Inhalt verwendet. Das Design auf der rechten Seite ist auf Smartphones ausgerichtet, das in der Mitte auf Tablets und das auf der linken Seite auf Desktop-Rechner. Bei der Erstellung von Mockups hier in Photoshop geht es darum, die Inhalte optimal zu kommunizieren, ob auf Smartphone-, Tablet- oder Desktop-Bildschirmen.

Alle Designs vermitteln dieselben Inhalte, und dennoch soll jedes Design bestmöglich an die verfügbare Bildschirmgröße angepasst sein. In dieser vergrößerten Ansicht können Sie den Unterschied zwischen der Smartphone- und der Tablet-Version erkennen. Auf dem Smartphone-Bildschirm sind die Navigationselemente vertikal angeordnet. Beim Tablet wird eine horizontale Anordnung verwendet. Die Desktop-Version sieht wieder etwas anders aus: Das Logo befindet sich links, und die Navigationselemente sind rechts.Der Hauptteil des Designs ist ebenfalls anders. Der Unterschied zwischen Smartphone und Tablet ist am größten: Beim Design für Smartphones sind alle Elemente im Raster untereinander angeordnet, in der Tablet-Version befinden sie sich in zwei Spalten und sehen ähnlich wie bei der Desktop-Variante aus.

Bei der Desktop-Variante werden jedoch vier Bilder in einer Zeile angezeigt. Bei der Tablet-Version sind jeweils zwei Bilder in zwei Reihen angeordnet. Und in der Version für Smartphones befinden sich alle Bilder untereinander.

Sehen wir uns nun die Endversion der Website an, die wir erstellen wollen. Hier sehen Sie die Version für Desktop-Bildschirme, die in Dreamweaver erstellt wurde. Ich ziehe den rechten Rand zur Mitte, um die Größe eines Tablet-Bildschirms zu simulieren. Während ich das Fenster schmaler ziehe, werden die Elemente an den verfügbaren Platz angepasst, und auch das Bild ändert sich. Sobald ich jedoch einen speziellen Punkt erreiche, wechselt das Design plötzlich zur Version für Tablets.

Wenn ich das Fenster nun noch schmaler ziehe, bis auf Smartphone-Breite, sehen Sie, dass die Navigationsoptionen und die Bilder übereinander angeordnet sind.

Die wichtigsten Design-Unterschiede sind das Menü und die Anordnung der Felder darunter: Auf einem Smartphone werden die Menüpunkte untereinander und auf einem Tablet in der Mitte nebeneinander dargestellt. Bei der Desktop-Version befinden sie sich rechts oben. Auch die Anordnung der Bilder unten ist anders. Hier bei der Desktop-Variante sind alle nebeneinander in einer Zeile zu sehen. Bei der Tablet-Variante stehen sie in zwei Zeilen und zwei Spalten. In der Smartphone-Version sind alle Bilder untereinander in einer Spalte angeordnet.

Es gibt weitere kleine Unterschiede, z. B. die Schriftgröße und der Abstand zwischen den Bildern. Wie Sie sehen, gibt es hier keinen Abstand. Doch bei Vergrößerung des Fensters wechselt die Ansicht zur Tablet-Version mit Abständen und deutlich kleinerer Schriftgröße. Auch wenn sich die Ansichten bei unterschiedlicher Bildschirmgröße ziemlich stark unterscheiden, ist die Website trotzdem relativ einfach aufgebaut. Wenn Sie noch nie eine Website erstellt haben, ist dies die perfekte Gelegenheit dafür.

Sie werden Schritt für Schritt durch den Erstellungsprozess geleitet. Und Dreamweaver bietet eine Vielzahl an hilfreichen Tools, die die Sache enorm vereinfachen.

Jetzt haben Sie gelernt, was eine Website mit Responsive Design ausmacht. Sehen Sie sich auch die anderen Videos der Reihe zur Erstellung von Responsive Websites mit Dreamweaver an.