HTML und CSS für Designer

Der Anspruch - Responsive Webdesign

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Aufgrund der Vielzahl von Ausgabemedien empfiehlt es sich, die Online-Umsetzung im "Responsive Design" anzugehen.

Transkript

Ich möchte eine Projektvorgabe aufgreifen, die wir technisch gesehen erst ganz zum Schluss des Projektes in diesem Video-Training umsetzen werden. Dennoch ist es wichtig, an dieser Stelle sich über das Thema oder über die Projektvorgabe Responsive Design Gedanken zu machen. Zunächst einmal: Was ist Responsive Design überhaupt? Ich habe dafür eine Website vorbereitet, die öffne ich mit Google Chrome. Sie sehen hier auch in Form eines solchen Mockups, wie so etwas aussehen kann. Zunächst einmal habe ich hier eine ganz normale Seite, die sogar funktionstüchtig ist, wie man sieht. Es könnte wie eine Art Vorgabe gelten. Responsive Design, oder responsives Design, wie man neuerdings auch häufiger hört, das bedeutet, dass wir ein Layout entwerfen müssen, ein Gestaltungsraster, das nicht für eine einzige Auflösung relevant ist, sondern, das entsprechend viele Ausgabemedien aufgreift. Die Rede ist von Smartphones, von Tablet-PCs bis hin zu Desktop-Rechnern. Das Sammelsurium an Auflösungen ist auf dem heutigen Markt schon so unglaublich groß, dass man gar nicht mehr hingehen kann und sagt: Ich mache feste Pixelbreiten für die unterschiedlichen Auflösungen. Wenn es irgendwie möglich ist, möchte man in der Regel ein sogenanntes Fluid Grid oder Fluid Design haben, das sich automatisch an die jeweilige Breite und jeweilige Auflösung anpasst. Es kommen noch weiterführende Techniken dazu, wie z. B. das Thema der Retina Displays, der Retina-Bildschirme, doppelte Auflösungen in Form von Pixeln, aber das würde zu weit führen. Zunächst einmal: responsive bedeutet also, wir haben ein fließendes Layout. Egal, ob das nun ein Vollbild ist, wie wir es jetzt sehen, wo es sich eventuell dadurch nur anpasst, dass wir starre Grenzen haben, aber das Ganze quasi mittig in einem Bildschirm schwimmt, oder ob es bspw. bei einer Verkleinerung der Seite so reagiert, dass sich die Inhalte beginnen zu verschieben. Das geht dann eben so weit, das könnte jetzt ein Tablet sein, wo das Ganze immer noch vernünftig aussieht - hier unten zum Beispiel die Buttons verändern sich -, bis hin zu einem Smartphone, wo wir auch eine vernünftige Ausgabe benötigen, wo jetzt alles untereinander steht und diverse Dinge wie z. B. so etwas vielleicht auch kleiner geworden sind. Eventuell werden auch Teile ausgeblendet. Hier ist für die Planung wichtig, dass es so eine Grundregel gibt. Im Großen und Ganzen: "mobile first" heißt die Regel, von der kleinen Ansicht zur großen Ansicht entwickeln sollte. Das ist kein zwingendes Regelwerk, aber es hat sich gezeigt, dass es einfacher ist zu sagen: Ich brauche das Minimum in meiner kleinen Auflösung, wie in meinem mobile phone und dann kann ich erweitern auf der Größe hinterher, wenn ich mehr Fläche habe, durch weitere Objekte und weitere Inhalte. Das werden wir in diesem Video-Training nicht machen. Wir werden direkt die Desktop-Variante entwickeln. Aber da es ein einfaches Layout ist, ist es auch hinterher leicht, das auf ein Responsive Design abzuändern. Auf jeden Fall, Sie wissen nun, worauf es beim Responsive Design, bei solchen Layoutvorgaben ankommt, und auf welche Art und Weise Sie dort mit ihrer Gestaltungsvorgabe arbeiten können und was Sie berücksichtigen sollten.

HTML und CSS für Designer

Steigen Sie als Designer ein in HTML und CSS. Sie gestalten ein responsives Reisemagazin und erleben dabei, dass der Workflow beim Gestalten nicht anders ist als gewohnt.

3 Std. 9 min (39 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!