Responsive Webdesign – Grundlagen

Modern: Responsive Webdesign

Testen Sie unsere 1929 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Mittlerweile hat Responsive Webdesign Einzug gehalten. Der Begriff geht auf einen Artikel von Ethan Marcotte zurück.

Transkript

Und dann kam das Responsive Web Design. Der schöne Begriff geht auf einen Artikel von Ethan Marcotte zurück, den er bei "A List Apart" publiziert hat. Hier sehen Sie den Artikel. Ursprünglich in der Definition, wie sie in diesem Artikel verwendet wird, gehört zu einem Responsive Web Design folgendes: erst einmal, ein flüssiges Raster, das sich dem Bildschirm anpasst. Zweitens, CSS 3 Media Queries, über die Sie Layout-Veränderung definieren können. Und drittens, flüssige Bilder, die sich anpassen. Was heißt das genau? Beginnen wir einmal mit dem flüssigen Raster. Das ist ein Raster in Prozent und hier hat er im Artikel auch ein Beispiel. Hier haben wir ein flüssiges Raster. Das sehen wir, wenn wir den Bildschirm einmal kleiner machen. Dann sehen Sie, das wird alles schmaler, schmaler-schmaler-schmaler. Und immer noch weiter. Und Sie sehen an irgendeiner Stelle gibt es aber auch Probleme. Das heißt, ein flüssiges Raster alleine genügt nicht, um eine gute Darstellung auf kleinen Bildschirmen zu erreichen. Man braucht auch noch dazu die zweite Komponente, nämlich die CSS 3 Media Queries. Und die sind jetzt in diesem Beispiel hier ergänzt. Machen wir wieder einmal den Test und den Bildschirm ganz klein. Und dann sehen Sie: in dem Moment, wo es problematisch werden würde, schaltet das Layout um. Denn über CSS 3 Media Queries können Sie verschiedene CSS-Angaben machen, je nach den Eigenschaften des Geräts, wo die Webseite betrachtet wird. Übrigens, sehen Sie hier natürlich auch schon die flüssigen Bilder, weil Sie sehen: die passen sich an und sind mal breiter, mal größer und mal schmaler. Die Webseite von "A List Apart" ist übrigens selber auch Responsive gestaltet und hat einen ganz netten Effekt, den wir gleich sehen. Wenn wir das hier mal kleiner machen, dann sehen Sie: das Bild wird jetzt auch ausgetauscht. Und wenn es ganz schmal wird, dann stehen die alle so übereinander. Was ist das Ziel aber davon? Das Ziel vom Responsive Web Design ist immer, dass Webseiten auf den unterschiedlichsten Geräten möglichst gut funktionieren. Das heißt, auf Smartphone, auf Tablets und vielen weiteren Geräten mehr. Und das wollen wir uns einmal praktisch konkret ansehen. Ein schönes Beispiel für ein Responsive Web Design ist die Demo-Seite von Brad Frost. Sie sehen, dass Sie die Informationen hier immer optimal an den verfügbaren Platz anpassen. Sie sehen das hier auf einem iPad. Im Landscape-Modus und man kann das alles schön gut lesen. Und wenn ich das... Sie sehen hier auch, das ist dreispaltig. Wenn ich jetzt die Orientierung ändere und das hier einmal drehe. Dauert es natürlich einen kleinen Moment, bis es sich anpasst. Und dann hat sich auch das Layout geändert. Es ist jetzt nicht mehr dreispaltig, sondern nur zweispaltig. Und diese kleinen Icons hier mit den T-Shirts. Die waren eben daneben angeordnet und die sind jetzt drunter. Das heißt, immer ist der verfügbare Platz optimal ausgefüllt. Hier sehen Sie die Beispiel-Seite von Brad Frost auf einem Smartphone. Das ist ein Android-Smartphone. Das Menü ist erst einmal ausgeklappt. Das kann ich aber einklappen, wenn ich möchte, auch wieder zusammenklappen. Genauso auch der Search fehlt hier. Sie sehen, die Anordnung ist an sich einspaltig. Und wenn ich nach unten scrolle, kommen die weiteren Inhalte. Die ähnlichen T-Shirts sind standardmäßig erst einmal ausgeklappt. Das ist die erste Ansicht, die sich präsentiert. Genuaso auch bei den Besprechungen. Und die werden dann erst geladen, wenn der Benutzer das aktiviert, weil er draufklickt. Das ist übrigens eine schlaue Technik, die sich Conditional Loading nennt. Sehr schön ist aber wieder, aller Platz ist ausgenutzt und es ist sehr gut benutzbar. Die Demo-Seite von Brad Frost können Sie natürlich auch auf einem Desktop-Rechner ansehen. Und dann auch nachverfolgen, welche Anpassungen es immer gibt, je nachdem wie viel Platz zur Verfügung steht. Wenn Sie auf der Suche sind nach Beispielen für Responsive Web Design, so ist die Quelle mediaqueri.es sehr schön. Besonders, da Sie hier auch direkt immer so Screenshots haben, die zeigen, welche Anpassungen es bei den einzelnen Viewport-Größen gibt. Und da können Sie sich inspirieren lassen und sehen natürlich zwischendurch auch immer, dass es witzige Beispiele gibt, wo jemand noch mehr damit spielt und etwa auch die Bilder austauscht, wie in diesem Beispiel. Responsive Web Design ist eine zentrale Technik, um Webseiten zu erstellen, die auf den so ganz unterschiedlichen Ausgabegeräten immer bestmöglichst funktionieren. Die grundlegenden Komponenten der ursprunglichen Definition sind flüssiges Raster, Media Queries und flüssige Bilder. Heute aber kann man sagen, dass Responsive Web Design mehr ist, als diese drei Komponenten. Es ist eine neue Art an die Realisierung von Webseiten heranzugehen.

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!