Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Viele Websites gehen verschwenderisch mit Daten um. Andere können trotz umfangreicher Optimierung nicht stärker im Datenumfang reduziert werden, ohne dass gleichzeitig visuelle Einbußen sichtbar würden. Bei schnellen Internetverbindungen und unbegrenzten Datenvolumen mag das kein Problem darstellen, doch nicht immer ist eine solch luxuriöse Situation gegeben.

Wie kann also damit umgegangen werden, dass einerseits eine opulente aber datenhungrige Website bestehen soll, gleichzeitig jedoch auch der Wunsch nach geringen Daten respektiert werden kann?

Ein Lösungsansatz besteht darin, die Entscheidung über den Datenverbrauch in die Hand der Personen zu geben, die unsere Websites und Apps benutzen. In den Einstellungen des Betriebssystems kann eingestellt werden, dass weniger Daten verbraucht werden sollen. Auch sind automatische Abhängigkeiten denkbar – z. B. wenn nur noch wenig Batterielaufzeit vorhanden ist. Mit dem CSS Media Query prefers-reduced-data respektiert man diese Einstellung.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Syntax und Optionen

Die Schreibweise des Media Queries ist simpel und folgt der üblichen Syntax.

@media (prefers-reduced-data: reduce) {
  /* CSS Code wenn weniger Daten gewünscht sind */ 
}

Es stehen zwei Werte zur Verfügung:

  • no-preference (keine Präferenz)
  • reduce (weniger Datenverbraucht)
Einstellung zum Reduzieren der Daten und iOS

Wunsch nach weniger Datenverbrauch mit Media Queries respektieren

Der folgende Code zeigt ein Beispiel, in dem eine kleinere Hintergrundgrafik geladen wird, wenn der Media Query aktiv ist.

.element {
  background: url('riesen-grosses-hintergrundbild.jpg');
}

@media (prefers-reduced-data: reduce) {
  .element {
    background: url('kleines-hintergrundbild.jpg');
  }
}

Entsprechend des Konzepts Progressive Enhancement können wir die Abfrage auch umdrehen. Alte (und wahrscheinlich auch langsame) Browser, die den Befehl nicht verstehen, laden die wenigsten Daten. Wer ein kompatibles Gerät verwendet und keine Einstellung vorgenommen hat – also keine Präferenz gewählt hat – lädt viele Daten.

.element {
  background: url('kleines-hintergrundbild.jpg');
}

@media (prefers-reduced-data: no-preference) {
  .element {
    background: url('riesen-grosses-hintergrundbild.jpg');    
  }
}

Datensparmodus im Betriebssystem einstellen

In den Einstellungen der verschiedenen Betriebssysteme kann die Einstellung für verschiedene Arten der Verbindung aktiviert werden:

Browser-Support für prefers-reduced-data

Den aktuellen Browsersupport entnehmt ihr bitte der Website caniuse.com.

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 2 Kommentare

  1. Tim
    schrieb am 16.06.2022 um 06:45 Uhr:

    Eigentlich eine geniale Möglichkeit. Hat leider bisher gar keinen Browser-Support. Freue mich sobald das ganze in Chrome aus dem Experimental-Status raus ist!

    Antworten
  2. Isabell
    schrieb am 15.06.2022 um 12:52 Uhr:

    Sehr interessant und nützlich
    danke für den Tipp

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →