t3n News Entwicklung

Responsive Webdesign, Teil 3: Darstellung von Galerien und Videos

Responsive Webdesign, Teil 3: Darstellung von Galerien und Videos

Mit der Serie „Responsive Webdesign“ wollen wir euch die flexibler Projekte erleichtern. In Teil 3 zeigen wir Möglichkeiten auf, Galerien, Videos, Bilder und Slider für die responsive Darstellung fit zu machen.

Responsive Webdesign, Teil 3: Darstellung von Galerien und Videos
„Responsive Webdesign“ – DAS Buch für flexibles Webdesign von Ethan Marcotte.

Die Entwicklung von Webprojekten hat bekanntermaßen ihre Tücken – besonders, wenn eine Website auch auf mobilen Geräten wie Smartphones oder Tablets dargestellt werden soll. Die Darstellung von Bildern ist ein wichtiger Bestandteil der Webentwicklung – und im Sinne der „Seperation of Concerns“ sind Bilder natürlich auch Teil des Inhalts einer Website und dienen nicht immer der Dekoration.

Responsive Webdesign und die Handhabung von einzelnen Bildern

Derzeit gibt es verschiedene Ansätze, aber keine wirklich befriedigende Lösung. Dreh- und Angelpunkt ist die Frage, wie man Bilder ausliefern kann, ohne unnötige Bandbreite zu verschwenden. Dabei wollen Entwickler natürlich zusätzliche Anfragen an den Server vermeiden. Kurzum: ein Thema, das Kopfzerbrechen bereitet.

Es gibt etliche gute Ansätze, um dieses Problem zu lösen, einige davon haben wir euch schon vorgestellt:

Auch hierbei muss zwischen Notwendigkeit und Spielerei unterschieden werden, für einzelne Bilder, die sowieso kleiner dargestellt werden (zum Beispiel „Thumbnails“), kann das Prinzip von „Fluid Images“ durchaus ausreichend sein.

img{
   max-width:100%;
}

Diese Anweisung sorgt dafür, dass Bilder das Layout nicht verschieben und ermöglicht durch Skalierung eine verkleinerte Darstellung des Bildes. Im umgekehrten Fall, also einer Vergrößerung, wird diese so lange durchgeführt, bis 100 Prozent der Bildbreite des Originals erreicht wurden. Unschärfe eines Bildes, aufgrund einer zu großen Darstellung, wird somit vermieden. „Hurra! - Das heißt, dass Bilder auch auf Smartphones kleiner und in Proportion dargestellt werden können!“. Das stimmt zwar, führt uns aber zum oben angesprochenen Problem. Es ist einfach nicht sinnvoll, ein großes Bild, dass für Desktop-Auflösungen optimiert wurde, auch auf Smartphones laden zu lassen, nur um dieses Bild dann verkleinert darzustellen. Ähnlich verhält es sich mit Fullscreen-Hintergrund-Bildern von Webseiten und mit Galerien.

Responsive Images mit Media-Queries

responsive-design-media-query
Responsive Webdesign: ein Media-Query. (Grafik: t3n.de)

Eine einfache und gute Lösung, um Bilder für spezifische Ausgabegeräte ausgeben zu lassen, ist die Idee, mit Media-Queries verschiedene Bilder für verschiedene Auflösungen zur Verfügung zu stellen. Das funktioniert aber nur mit Hintergrundbildern und ist daher unhandlich in der Praxis anzuwenden, man bedenke zum Beispiel Galerien – gerade ohne den Einsatz von JavaScript. Mithilfe der in HTML5 eingeführten data-*-Attributen und in Kombination mit Media-Queries können Bilder für verschiedene Auflösungen ausgegeben werden. Ein gutes Beispiel dafür ist die Integration eines data-interchange-Attributes in das Foundation-4-Framework von Zurb. Erschwerend kommt aber die Browser-Inkompatibilität hinzu, denn der IE ignoriert zum Beispiel das max-with-Attribut gänzlich. Um also diesem Problem der Ausgabe und Darstellung von Bildern Herr zu werden, wird auf JavaScript zurückgegriffen.

Responsive Images mit JavaScript

Backstretch ermöglicht euch, einzelne Bilder skaliert darstellen zu lassen. Dabei kann der Viewport sowohl als Referenz als auch ein beliebiges Block-Element angegeben werden. Die Backstretch-Demo zeigt euch ausführlich alle zur Verfügung stehenden Möglichkeiten.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
4 Antworten
  1. von Mike am 20.11.2013 (13:01 Uhr)

    > Erschwerend kommt aber die Browser-Inkompatibilität hinzu, denn der IE ignoriert zum Beispiel das max-with-Attribut gänzlich

    IE kann max-width (in Media Queries) IMHO schon, evtl nicht alte Versionen wie IE8, der aber für RWD relative uninteressant ist. Oder meint ihr im Artikel etwas anderes?

    IEs sollte man nicht über einen Kamm scheren, gerade 10 und 11 sind teilweise in der Standardsunterstützung besser als Chrome...

    Antworten Teilen
  2. von Mario Janschitz am 20.11.2013 (13:54 Uhr)

    Hallo Mike, danke für deinen Einwurf. Warum denkst du, dass ältere Versionen von IE nicht mehr relevant sind?

    Antworten Teilen
  3. von christian.hegedues am 20.11.2013 (14:32 Uhr)

    @Mario: Ich denke was @Mike meint ist, dass diese Browser in Bezug auf Responsive nicht berücksichtigt werden müssen, da sie in der Regel nur auf Desktop-Systemen vertreten sind.

    Die Unterstützung des Attributes max-width ist im Internet Explorer ab Version 7 beschränkt und ab Version 8 komplett gewährleistet: Quelle: http://caniuse.com/minmaxwh

    Antworten Teilen
  4. von Mario Janschitz am 20.11.2013 (15:47 Uhr)

    Danke für die Kommentare. Verstehe schon was ihr meint, aber RWD ist nicht nur für Smartphones sondern für verschiedene Auflösungen gedacht und wir haben auch am Desktop keine genormte Auflösung :)

    Was natürlich stimmt ist, dass ab IE8 eine Unterstützung von max-with existiert. Ich werde das noch im Artikel präzisieren. Als Entwickler ist man es einfach nur gewöhnt, dass der IE Macken macht -- und max-with wurde ja auch nur als Beispiel genannt. Ist ja nicht so als wäre max-with das einzige Problem mit IE.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Responsive Webdesign
Content first: Workflows im Zeitalter von responsive Webdesign
Content first: Workflows im Zeitalter von responsive Webdesign

Auch in diesem Jahr drehte es sich auf der Developer Week um UX- und UI-Design. Im Panel von Patrick Lobacher haben wir uns inspirieren lassen. » weiterlesen

Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite
Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite

Beim Responsive Webdesign können Tools und Test-Werkzeuge viel Zeit sparen. Das einfache Umschalten zwischen Viewport-Größen vereinfacht die Arbeit enorm. Wir stellen euch 18 kostenlose Tools, … » weiterlesen

Responsive Design: Zehn kostenlose Webdesign-Templates
Responsive Design: Zehn kostenlose Webdesign-Templates

Das Web findet längst nicht mehr nur auf dem Desktop statt und so ist es kein Wunder, dass Responsive Design in aller Munde ist. Damit passen sich die Webseiten dem Endgerät des Besuchers an und … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?