Die 3 Beispielprojekte in mobiles Webdesign für Handy und Tablet umsetzen – RWD (responsive webdesign)

Wir haben im Kapitel „1-Spalten-Layout für Websites“ eine schnelle Möglichkeit kennen gelernt, wie wir sehr einfach unsere Inhalte online präsentieren können. Allerdings wollen wir unsere Webseiten auch fit für Handy und Tablet machen. Unsere Website mit dem Webdesign soll auch passend und gut lesbar auf Handy und Tablet sich präsentieren.

Sehr oft hört man „mobile first“ (das war noch vor T. in Amerika!). Hier ist der Ansatz, erst eine mobile Version der Website zu erstellen und dann aus dieser Version eine für Desktopgeräte und große Bildschirme. Das kann man machen, muss man aber nicht.

Wichtig sind die Prinzipien und das technische Wissen zur Umsetzung zu kennen und dann kann man von klein auf groß genauso wie von groß auf klein erstellen. Die Reihenfolge ist meiner Meinung nach egal. Der Spruch „mobile first“ diente aus meiner Sicht ursprünglich erst einmal um die Aufmerksam der Webdesigner zu bekommen und auf die Relevanz hinzuweisen.

Im Kurs werden bewusst erst alle Grundlagen von HTML und CSS gelernt um eine schöne Website erstellen zu können. Wenn dieses Erfolgserlebnis gemacht wurde kommt das notwendige Wissen für mobiles Webdesign und die drei bisher umgesetzten Beispielprojekte werden entsprechend erweitert. Ich sage hier bewusst erweitert! Es wird nichts weggeworfen – das bisherige Wissen ist und bleibt wichtig. Daher werden unsere 3 Projekte um ein mobiles Design erweitert – in diesem Zusammenhang hört man gerne „responsive webdesign“.

1 Spalten Layout – Säulen für mobiles Design

Eigentlich möchte man annehmen, dass unser bisheriges 1 Spalten Layout für die „Säulenbauten“ schon ideal für Handy und Tablets ist. Wenn wir im bisherigen Projekt die Bildschirmbreite ändern, passt sich der Inhalt automatisch der Fensterbreite des Browsers an. Lassen wir uns allerdings die bisherige Website auf einem Handy anzeigen, sehen wir nur eine sehr kleine Schrift. Das erinnert mehr an Augenarzt als an eine gute Umsetzung und Usability.

Hier brauchen wir nur eine Zeile Code um das zu korrigieren und das notwendige Hintergrundwissen über den viewport.

2 Spalten Layout – Automatische Anpassung von Bildern und der Steuerung

Im ersten Projekt hatten wir noch keine Probleme mit der Steuerung und den gezeigten Bildern, da beides sehr einfach gehalten war. Im zweiten Projekt lernt man, wie einfach man automatisch die Steuerung der Website anpassen lassen kann und diese auch auf kleinen Bildschirmen wie einem Handy gut bedienbar bleibt.

Die Bilder werden dann sich automatisch an die verfügbaren Bildschirmgrößen anpassen. Auch dazu benötigt man ein wenig ergänzendes Wissen. Aber wir können unsere bestehende Website einfach erweitern. Das mobile Design ergänzt das bisher bestehende Design.

Mehrspaltiges Layout – wie man automatisch aus drei, zwei und dann 1 Spalten Layout macht

Am Ende runden wir unser Wissen ab, indem wir die anspruchsvolle Website mit dem Thema „Fennek“ umsetzen. Hier sehen wir dann eine weitere Möglichkeit, auch eine komplexe Steuerung für Handy umzusetzen und wie man abhängig von der verfügbaren Bildschirmbreite automatisch aus einem 3-Spalten-Layout ein 2-Spalten-Layout (wenn der Platz verfügbar ist) bzw. ein 1-Spalten-Layout erstellt.

Alles Schritt für Schritt als Videos auf einem Datenträger

Der komplette Ablauf aller 3 Projekte wird Schritt für Schritt in Videos erklärt und gezeigt und ist auf der DVD F verfügbar.