Responsive Grafiken mit HTML

Das Problem: one size fits all – eine für alle

29,95
Bei responsivem Webdesign sind die eingebauten Grafiken zwar flexibel, aber es wird immer dieselbe Grafik geladen.

Zunächst möchte ich in diesem Film ganz kurz schildern, was eigentlich das Problem ist bei responsiven Grafiken per HTML. Denn responsives Webdesign ist ja nun nicht ganz neu, d. h., auch responsive Grafiken werden schon seit einiger Zeit verwendet. Die Grundprinzipien von responsivem Webdesign, das sind drei Stück an der Zahl: Zunächst flexible Layoutraster, "flexible grids", prozentbasierte Gridlayouts. Dann flexible Grafiken, also Grafiken, die sich anpassen an die Größe des Viewports, die sich automatisch verkleinern, wenn sie z. B. auf einem Mobiltelefon dargestellt werden. Media Queries zur Unterscheidung verschiedener Viewportgrößen ist der dritte Baustein. Diese drei zusammen bilden responsives Webdesign. Der Kern bei der Sache ist, dass das HTML gleich bleibt. Ein HTML für alle möglichen Umstände, für alle möglichen Bildschirme. Die Anpassungen erfolgen ausschließlich per CSS, wie gesagt per Media Query. Da gibt es ein CSS für kleine Bildschirme, eines für mittlere, eins für große so als Beispiel oder auch umgekehrt, je nachdem, ob man Desktop oder Mobile First baut. Das bedeutet, das HTML ändert sich nicht, und dadurch bleibt natürlich auch die Grafik dieselbe. Man kann das so umschreiben: One size fits all. D. h. eine Grafik passt für alle Umstände. Und das wird hier einmal bildlich dargestellt. Wenn Sie hier die Überschrift sehen, das Blaue könnte eine Grafik sein. Und Sie sehen also, dieselbe Grafik hier, die wird kleiner dargestellt, aber es bleibt ein und dieselbe Grafik. Dieselbe Grafik wird also für alle Viewports verwendet, d. h., wenn man für große Bildschirme eine Grafik einbaut, dann wird die zwar klein dargestellt auf einem Handy, aber es bleibt die große Datei, es werden jede Menge Daten übertragen. Und das ist natürlich nicht optimal, wenn man so eine Riesendatei überträgt, nur um sie anschließend sehr klein darzustellen. Und in diesem Videotraining geht es nun um Lösungen für genau dieses Dilemma, dass es nämlich inzwischen HTML ermöglicht, verschiedene Grafiken für verschiedene Viewports zu laden.

Responsive Grafiken mit HTML

In diesem Video-Training lernen Sie, wie Sie mit Attributen und Elementen wie srcset, sizes und responsive Grafiken per HTML einbinden können.

1 Std. 39 min (25 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!