Responsive Grafiken mit HTML

Responsive Grafiken per HTML: ein (vorläufiges) Fazit

Testen Sie unsere 1870 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das Thema "Responsive Grafiken per HTML" ist noch im Fluss. Daher erfolgt hier ein (vorläufiges) Fazit.

Transkript

Hier ist eine Seite dev.opera.com/articles/responsive-images/ auf der Andreas Bovens, der bei Opera arbeitet, sich den Spaß gemacht hat und die verschiedenen Anwendungsfälle kombiniert hat. Das ist das Opera House in Oslo, danach ist der Browser benannt. Fast so berühmt wie die in Sydney. Hier die Oper in Oslo. Und er kombiniert diese vier Anwendungsmöglichkeiten und zeigt hier Quelltextschnipsel. Sie sehen "High-DPI images use cases", dazu reicht "image" mit "src x", hier "srcset x" mit dem Wert, und je ausgefallener die Wünsche, Sie sehen die Quelltextschnipsel werden teilweise doch schon ganz schön lang, ich rolle mal bis ans Ende hier, wenn wir dann alle vier Grünen haben hier, alle vier Use Cases zusammen, dann ist das für die Einbindung einer einzigen Grafik doch schon ein ganz gewaltiges Quelltextopus hier. Ob man das so intensiv verfolgen muss, das sei dahingestellt, aber es kann relativ aufwändig werden. Im Gegensatz dazu steht Brad Frost, der im mobilen Web auch kein Unbekannter ist. Er sagt schlicht und einfach: "Drei Themen diskutiere ich gar nicht. Religion, Politik und responsive Grafiken." Und sein Vorschlag ist schlicht und einfach, oder seine Feststellung ist hier schlicht und einfach: "So here is how I'm going to write 95% of my responsive images." In den allermeisten Fällen wird er einfach nur unterscheiden zwischen Kleinen und Großen. Sizes benutzt er gar nicht, sondern einfach nur "small.jpg" und dann kleine "w" und "gross.jpg" und große "w". Den Rest überlasst er dem Browser. Das ist dann etwas weniger Arbeit als bei den längsten Schnipseln, die wir eben bei Opera gesehen haben. So, und jetzt die Content-Management-Systeme. Ganz vorne dran ist hier ein Content-Management-System namens "Contao". Hier bei Rocksolid Themes ist - ich scroll mal eben ganz nach unten - Martin Auswöger, wo haben wir ihn... da. Das ist der von Rocksolid Themes. Core-Developer bei Contao. Und Contao hat in der Version 3.4 im Kern, im Core des Content-Management-Systems eine Erweiterung, die die Arbeit mit responsiven Grafiken doch sehr erleichtert. Da wird nur zentral definiert was man haben möchte und die Redakteure können diese vordefinierten Einstellungen dann auswählen. Man kann sogar einen Ausschnitt vorgeben bei der Grafik, der dann genommen wird. In dieser Art werden andere Content-Management-Systeme nachziehen. Die nehmen uns dann die Arbeit ab. Wir laden eine Grafik hoch in guter Qualität und die vielfältigen Versionen werden automatisch erzeugt und bei der Einbindung, bei der Erzeugung des Quelltextes - das ist ja die Hauptaufgabe vom Content-Management-System - dabei helfen sie uns dann. In diesem Sinne: Viel Spaß in Zukunft mit responsiven Grafiken per HTML.

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!