Ein responsives Layout kann auf dem Smartphone tadellos aussehen und trotzdem exakt dieselbe Datenmenge übertragen wie am großen Monitor. Denn CSS verkleinert nur die Darstellung, nicht die Datei. Das Titelbild mit 1600 Pixel Breite wird auf einem 400 Pixel breiten Display eben angezeigt, heruntergerechnet vom Gerät, nachdem jedes einzelne Byte über das Mobilfunknetz gereist ist. Responsiv heißt schön, nicht sparsam.
Die vier Erfolgskriterien von Guideline 3.10
Geräteanpassung: Setze responsives und adaptives Design ein, damit das Produkt auf verschiedenen Geräten und Bildschirmgrößen funktioniert, etwa auf Smartphones, Tablets, Laptops, Desktoprechnern, Fernsehern und neu aufkommenden Plattformen. Stelle sicher, dass das Projekt auch dann funktioniert, wenn einzelne Funktionen oder Techniken nicht unterstützt werden.
Progressive Enhancement: Nutze Progressive Enhancement, um die Nachhaltigkeit zu erhöhen: Beginne mit einer Grundlage aus HTML und verbessere die Nutzererfahrung schrittweise, ohne dass Kernfunktionen von Gestaltung oder Interaktion abhängen. So entsteht ein robustes und widerstandsfähiges Projekt.
Carbon-aware Design: Nutze CO₂-bewusstes Design, um den Energieverbrauch zu senken, wenn die Stromnachfrage oder die Systemlast hoch ist. Setze situatives Design ein, um besonders belastende Funktionen durch schonendere Alternativen zu ersetzen, zu reduzieren oder abzuschalten. Automatische Schwellenwerte dürfen nicht essenzielle Funktionen ebenfalls anpassen oder deaktivieren, solange die Änderungen nachvollziehbar bleiben. Kommuniziere klar, was sich geändert hat und warum, und ermögliche es Nutzenden, den vollen Funktionsumfang wiederherzustellen, wo das möglich ist.
Alternative Zugangswege: Unterstütze nachhaltige nicht visuelle und indirekte Interaktionsformen wie assistive Technologien, Spracheingabe, QR-Codes, Leseansichten (im Browser, in Anwendungen oder per RSS) und vernetzte Geräte.
Meine Einordnung
Google crawlt seit Jahren mobile first. Nicht Deine Desktop-Ansicht ist die Referenz, sondern das, was ein Smartphone zu sehen bekommt. Damit ist die mobile Fassung nicht mehr die abgespeckte Zweitversion, sondern die maßgebliche. Und genau dort ist Datenvolumen am teuersten: langsamere Verbindungen, schwächere Prozessoren, ein Akku, der bei jedem übertragenen Megabyte mitzahlt.
Das erste Kriterium oben verlangt deshalb mehr als flexible Spalten. Bilder gehören in mehreren Auflösungen bereitgestellt, damit ein Telefon die kleine Fassung bekommt und nicht die für den 27-Zoll-Monitor. Ein Bild mit halber Kantenlänge hat nur ein Viertel der Pixel, und in der Praxis landest Du damit bei rund zwei Dritteln weniger Bytes. Rechne das gegen meine Faustregel, dass ein Megabyte weniger pro Seitenaufruf bei einer Million Aufrufen etwa 400 Kilogramm CO₂ spart, und der Aufwand für ein paar Bildvarianten relativiert sich schnell.
Dasselbe gilt für alles andere, was auf kleinen Geräten überdimensioniert ist: aufwendige Navigationen, die auf dem Handy ohnehin zusammenklappen, Skripte für Effekte, die dort niemand sieht, Karussells und Hover-Spielereien. Wenn eine Funktion mobil nicht sichtbar ist, sollte sie mobil auch nicht geladen werden.
Das zweite Kriterium, Progressive Enhancement, ist für mich das unterschätzteste der vier. Es besagt schlicht: Der Kern muss ohne CSS und ohne JavaScript funktionieren. Das klingt nach Purismus, ist aber knallharte Robustheit. Eine Seite, die auf dieser Grundlage steht, funktioniert im Zug mit schlechtem Empfang, mit Screenreader, in der Leseansicht und für jeden Bot, der sie auswertet. Auf datensm.art zahlen dieselben Bausteine auf das vierte Kriterium ein: ein vollständiger RSS-Feed für alle, die lieber im eigenen Leseprogramm bleiben, und ein Schalter, mit dem sich Bilder komplett abschalten lassen. Der Text bleibt in beiden Fällen vollständig lesbar.
Wo ich weiter gehe
Beim dritten Kriterium, dem CO₂-bewussten Design, gehe ich einen anderen Weg als die Guideline. Der Gedanke, Funktionen bei hoher Netzlast automatisch abzuschalten, klingt elegant. In der Praxis heißt er: Du baust eine schwere Website und dazu einen Notfallmodus, der sie gelegentlich leichter macht. Du pflegst also zwei Zustände, zwei Testfälle und eine Automatik, die entscheidet, wann Deine Besucher weniger bekommen.
Mir ist der einfachere Weg lieber. Wer dauerhaft sparsam ausliefert, braucht keinen Sparmodus für schlechte Zeiten. Der Aufwand für die Umschaltlogik ist oft größer als der Ertrag, und die eingesparte Energie hätte man auch haben können, indem man die schwere Variante gar nicht erst gebaut hätte.
Dein erster Schritt heute
Dafür brauchst Du nur den Browser, den Du ohnehin geöffnet hast.
Und wenn Du danach noch Lust hast, mach den Härtetest: Schalte JavaScript im Browser ab und ruf Deine wichtigste Seite auf. Was jetzt noch lesbar und bedienbar ist, ist Dein tatsächlicher Kern. Alles andere ist Ausstattung.
Ein Layout passt sich der Bildschirmgröße an. Nachhaltig wird es erst, wenn sich auch die Datenmenge anpasst.
Quelle: W3C-Fassung von Guideline 3.10