CSS Media Queries - Nach Bandbreite optimierte Inhalte anbieten - Zukunftsmusik?

CSS Media Queries - Je nach Bandbreite optimierte Inhalte anbieten - ZukunftsmusikBandbreiten-Perfomance - Gerade bei mobilen und portablen Endgeräten zählt oftmals jedes KB an Datenmenge das geladen werden muss, da ansonsten die Performance spürbar draunter leiden kann. Mit JavaScript besäße man zwar die Möglichkeiten je nach Bedarf, dass heißt der zur Verfügung stehenden Bandbreitenübertragung, gezielt optimale Ressourcen wie Bilder auszuliefern. Chris Coyier von CSS-Tricks hat hierzu allerdings einen äußerst interessanten Einwurf bzw. "Wunsch" geäußert, welche ich gern an Euch weitergeben möchte. Daher die Frage an Euch - wie sinnvoll oder hilfreich wäre es eurer Meinung nach, mittels CSS Media Queries Ressourcen wie bspw. Bilder anzusprechen und somit an die entsprechenden Endgeräte bzw. Viewportgrößen unter den entsprechenden Bedingungen auszuliefern. Das würde dazu führen, dass nicht mehr gleiche Inhalte für unterschiedliche Anforderungen geladen und angezeigt werden würden, sondern für die jeweils beim Benutzer vorliegenden technischen Bedingungen optimierte Inhalte.

Die Idee eines Vorschlages, bezieht sich auf das Anlegen von CSS Eigenschaften unter bestimmten Bedingungen. Diese könnten folgendermaßen aussehen:

Media Queries - Vorschlag(!)
@media (min-bandwidth: 25Mbps) {
    /* High bandwidth */
}
@media (max-bandwidth: 10Mbps) {
    /* Low bandwidth (slow internet connection) */
}

Ein weiterer und mit der Bandbreite, sowie den technischen Gegebenheiten des jeweiligen Endgeräten einhergeänder Vorschlag bezieht sich auf eine der Hauptproblematiken bei Responsive Webdesign - Bilder. Bilder einfach nur mit CSS klein zu skalieren ist zwar einfach, aber auf jeden Fall nicht fair gegenüber dem Nutzer der eine 80% größere Grafik angeboten bekommt, weil die Grafik in seinen Ausmaßen einfach nur klein skaliert wurde. Sein Vorschlag wäre, ein Element ("picture") zu definieren und diesem verschiedene Sourcen zuzuweisen, die dann mittels eines media-Attributes und Media Queries, den jeweiligen Viewportgrößen die entsprechend optimierten Sourcen zuweisen. In Bezug das hier kürzlich vorgestellte CSS3 Tutorials und die darin verwendeten Bilder, mit kubanischen Gesichtern, könnte Chris sein Ansatz wie folgt aussehen:

Responsive Sources
<picture alt="Welcome to Cuba">
    <!-- Default -->
    <source src="small.jpg" />
    <!-- Alternative if media query matches -->
    <img src="medium.jpg" media="(min-width: 400px)" />
    <!-- Alternative if media query matches -->
    <img src="large.jpg" media="(min-width: 800px)" />
    <!-- Fallback -->
    <img src="small.jpg" alt="Welcome to Cuba" />
</picture>

Das über verschiedene Wege bereits diskutiert wird und das auch beim W3C selbst, belegt folgender Artikel mit dem Titel Polyfilling picture without the overhead" mit reger Diksusion im Anschlusss. Sicherlich ist JavaScript immer eine Alternative, aber die Idee von Chris ist eine meiner Meinung nach interessante(re) Idee, die ich an dieser Stelle gern zur Diskussion anbieten würde, in der Hoffnung das ihr hier darüber rege und interessiert diskutiert.

Weitere Artikel zum Thema CSS3 Animation
  1. Frank 04 Apr 2012, 09:43

    Allemal eine interessante Idee von Chris und zusammen mit einigen hier bereits vorgestellten CSS4 Eigenschaften, könnte ich mich an eine solche Zukunft(smusik) durchaus gewöhnen ;o)


  2. Tobsen 04 Apr 2012, 10:16

    Geht das nicht schon in die Richtung? http://www.webkit.org/blog/1927/last-week-in-webkit-network-information-api-and-disabled-fieldsets/ (Network Information API)


  3. tom 04 Apr 2012, 16:22

    Hmm... das klingt so einleuchtend das es mich wundert das es noch niemand ungesetzt hat. Wär auf jeden fall ein Feature was ich nutzen würde.Und das ganze dann noch als wp Plugin verpackt das Code scheue Menschen wie ich auch was damit anfangen können. :P


  4. Sebastian 04 Apr 2012, 21:11

    Klingt nach einem sehr interessanten Vorschlag.
    Allerdings sehe ich gerade bei den Bilder einen entscheidenden Nachteil. Die vorgestellte Variante ist nicht abwärts kompatibel. Ein Browser der den Tag picture und die Media-Query im img-Tag nicht versteht wird in jedem Fall 3 Bilder laden. Die ersten beiden img müssten also irgendwie anders definiert werden.
    Ansonsten kann ich mich den Vorpostern nur anschließen.


  5. Siegfried
    05 Apr 2012, 10:43

    Sehr gute Idee! Nur Eines: CSS ist nicht für den Inhalt, sondern für die Gestaltung da. Also können solche Maßnamen nur auf dekorative Bestandteile greifen, nicht auf Bilder, die als Inhalt eingestellt wurden. Das macht eine saubere Trennung von Inhalt und Gestaltung noch wichtiger als sowieso schon.


  6. Hans (@drublic)
    05 Apr 2012, 17:38

    Foresight.js bring die Funkitonalität die Chris Coyier anspricht mit sich und läd Bilder entsprechend der zur Verfügung stehenden Bandbreite, sowie der Auflösung des Devices.

    Eventuell verlinkenswert.


  7. Webstandard-Team
    05 Apr 2012, 21:29

    @Hans: Danke für deinen Link, der ist genau das was ich gesucht habe!


  8. Patrick Zorn
    06 Apr 2012, 10:39

    Die Frage hier, jedenfalls erstmal für mich: Kann man mit CSS wirklich das zum Einsatz bringen, was schon seit Jahren über diverse Scripte ermöglicht wird/ermöglicht werden soll? Ich kann es mir ja nur schwer vorstellen, da CSS - wie Siegfried schon sagte -, für die Gestaltung an sich da ist und nicht unbedingt bzw. dann sehr entfernt etwas mit der Banbreite zu tun hat.


  9. Webstandard-Team
    06 Apr 2012, 11:52

    @Patrick: Wenn man mittels Media Queries bereits den Viewport und die Ausrichtung (Portrait, Landscape) "abfragen" kann, warum auch nicht die Bandbreite.


  10. Jürgen - Webdesign Wien 07 Apr 2012, 17:16

    Ich hab CSS Media Queries schon ausprobiert und war begeistert. Ich werde es jetzt fast immer.


  11. Patrick Zorn
    09 Apr 2012, 14:35

    @team: Dass man die Bandbreite "abfragen" kann, bestreite ich ja nicht. Aber obs wirklich allein durch CSS möglich ist, diese (meist ja dann langsamere) auch besser zu nutzen...?


  12. Yanik
    12 Apr 2012, 00:27

    Das wäre ja total genial :) Warum wurde das noch nicht realisiert??? Ich finde das ist echt ne super Idee :)


  13. Christian Harms
    12 Apr 2012, 08:39

    Warum schließen alle Artikel zu bandbreiten-optimierten Resourcen JavaScript von vorneherein aus (obwohl es eine sinnvolle Lösung ist). Ist das in Designerkreisen so ein Tefelswerk?

    Kann nicht eine Seite für den 90%-User gebaut werden, und per JavaScript für die 10% mobile User angepasst werden (z.B. die img-Tages mit kleineren Bildresourcen umbasteln)?

    Gruß, Christian.


  14. Webstandard-Team
    12 Apr 2012, 09:03

    @Christian: Es schließt doch niemand von vornherein JavaScript aus. Es wird hier lediglich über einen weiteren möglichen Ansatz mittels CSS diskutiert. Das dies bereits mittels JS funktioniert hat niemand bestritten, daher kann ich deinen Einwand nicht ganz verstehen.


  15. Pauline 16 Apr 2012, 15:21

    Hört sich wirklich nach einer klasse Idee an. Wirklich seltsam, dass erst jetzt jemand draufkommt.


  16. Petra 20 Apr 2012, 14:17

    Ich bin gerade am einfügen der CSS MEdia Queries. Bin dann mal gespannt ob es sich auch auszahlt!


  17. Max 22 Apr 2012, 14:31

    Ich frage mich nur, ob es sich lohnt, im großen Stil darauf einzugehen. Sicher, wenn man ein Musikportal betreibt, kann es sich lohnen. Dennoch glaube ich, dass wir in spätestens zwei bis drei Jahren so weit sind mit der Geschwindigkeit des Internets, dass selbst mobile Geräte heutigen DSL Standard dauerhaft erreichen.


  18. Marc 23 Apr 2012, 21:28

    Bis in einer neuen CSS Spezifikation mal irgendwas Standard wird, hat die technische Entwicklung bei mobilen Bandbreiten das schon lange wieder überflüssig gemacht.

    Ich denke beim Thema Media Queries (und generell beim entwickeln für mobile Endgeräte) werden sich Leistungsstarke Frameworks durchsetzen. Bootstrap von Twitter geht da meines Erachtens schon in eine ganz gute Richtung.


  19. Linda 24 Apr 2012, 01:27

    Ich finde die Idee nicht schlecht. Allerdings könnte es für den User doch verwirrend sein wenn die Webseite mit einem iPad anders aussieht als mit einem Android Telefon. Durch die Anpassung der Webseite wird zwar die Datenmenge reduziert aber ich denke das verhältnis von Aufwand und Ertrag hält sich als Webseiten Betreiber stark in Grenzen.


  20. Michael
    24 Apr 2012, 22:56

    Interessanter Gedanke. Lohnt sich zu intensivieren, das Thema. Wobei ich eher glaube das die Entwicklung zu schnelleren Mobilen Internet Anschlüssen geht.

    Grüße
    Micha


  21. nik 24 Aug 2012, 17:28

    Finde ich total ätzend. Ich mein, gucken wir uns das Beispiel doch mal an:

    @media (min-bandwidth: 25Mbps) {
    @media (max-bandwidth: 10Mbps) {

    Ich sitze hier hinter ner 6MBit-Leitung und komme mit den meisten Seiten wunderbar klar. Was ist das jetzt für eine Anmaßung des Entwicklers, zu bestimmen, welche Inhalte ich sehen darf?! Und dass ich Bilder immer in Low-Resolution zu sehen bekomme, weil meine Leitung nicht seinen Vorstellungen entspricht. Wer eine langsame Verbindung hat, will die Inhalte vielleicht trotzdem sehen. Und kennt die Untiefen längerer Wartezeiten.

    Letztlich spiegelt sich hier genauso die Debatte um Netzneutralität wieder. Habe ich keinen Anspruch auf das ganze Netz, nur weil ich keinen Super-Duper-Vertrag abgeschlossen habe? Graceful degradation gerne, aber bitte nicht Nutzer vom _Inhalt_ ausschließen, nur weil der Entwickler einen Anspruch eines GBit-Netzes hat.


  22. nik 24 Aug 2012, 17:31

    PS: Kinder, so geht das nicht.

    Bitte fixt mal schnellstens Eure Kommentarbox/Euer System.

    1. E-Mail-Prüfung haut einem die Notices um die Ohren: http://img6.imagebanana.com/img/nhyinar0/webstandard.jpg
    2. Wenn die negative Validierung schon nen Back-Link anbietet, dann sollte der Captcha-Code auch im Frontend, nicht nur in der Session geändert werden


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage