Nachhaltiges Webdesign: Warum gute UX weniger Strom frisst

Nachhaltiges Webdesign: Die 3 Fragen aus IBMs Designprinzipien

Internetbezogene Emissionen liegen inzwischen über denen der Luftfahrt. Das schreibt das W3C in seinen Web Sustainability Guidelines, einem Entwurf für ein nachhaltigeres Web. Jede Website trägt ihren Teil dazu bei.

Einen praktischen Zugang liefert IBM. In seinen Prinzipien für nachhaltiges Design formuliert das Designteam drei Leitfragen. Wir sehen darin einen guten Einstieg in digitale Nachhaltigkeit, weil die Fragen ganz ohne Fachjargon auskommen.

Inklusiv für alle Lebewesen

Menschzentriertes Design reicht IBM nicht mehr. Die erste Frage lautet, welche Wirkung ein digitales Erlebnis auf Menschen und auf andere Lebewesen hat. Gemeint sind auch die begrenzten Ressourcen, von denen alle abhängen.

Leicht für alle Menschen

Ein Interface soll beim ersten Besuch und bei jedem weiteren einfach funktionieren. Und zwar unabhängig davon, welche Fähigkeiten oder Mittel jemand mitbringt.

Effizient für Nutzer:innen und Stromverbrauch

Vereinfachte Abläufe sind laut IBM inklusiver, effizienter und brauchen weniger Ressourcen. Für Chris Hammond, Distinguished Designer bei IBM, ist gutes Design gutes Geschäft und zugleich nachhaltiger.

Weniger Daten, mehr Wirkung: Warum nachhaltige UX schneller und zugänglicher ist

Nachhaltiges UX-Design entsteht aus denselben Entscheidungen, die eine Website schneller, verständlicher und zugänglicher machen.

Ein Vergleich aus dem Alltag: Ein Rucksack, in dem nur das Nötige steckt, trägt sich leichter. Und ihr findet darin auch schneller, was ihr sucht.

Leichtere Seiten laden schneller

Jedes Bild, jedes Video und jede zusätzliche Funktion muss übertragen und vom Gerät verarbeitet werden. Das W3C empfiehlt deshalb, Medien zu optimieren und die übertragene Datenmenge zu senken. Prüft zuerst die schwersten Elemente auf euren wichtigsten Seiten.

Einen schnellen Überblick liefert Lighthouse, ein kostenloses Prüfwerkzeug von Google, das direkt im Chrome-Browser steckt. Es bewertet eure Seite unter anderem nach Performance und Barrierefreiheit, also nach genau den Hebeln aus diesem Abschnitt.

Klare Inhalte sparen Klicks

Aus unserer Sicht hilft hier vor allem Klarheit. Wer das Gesuchte sofort findet, ruft weniger Seiten auf. Streicht Inhalte, die niemand braucht, statt sie in Unterseiten zu verstecken.

Barrierefreiheit gehört dazu

Das W3C zählt Barrierefreiheit ausdrücklich zur Nachhaltigkeit, weil sie über die langfristige Tragfähigkeit eines Projekts mitentscheidet. Aus unserer Sicht muss eine Website, die niemanden ausschließt, später seltener nachgebaut werden.

Denkt Barrierefreiheit deshalb von Anfang an mit.

Grüne Marke, schwere Website? Wo das Markenversprechen bricht

Für nachhaltige Unternehmen und Kulturmarken geht es um mehr als Effizienz. Eine Marke setzt auf Klimaschutz und betreibt gleichzeitig eine datenschwere Website? Aus unserer Sicht passt das nicht zusammen.

Wer eine nachhaltige Website erstellen will, beginnt deshalb mit einer ehrlichen Bestandsaufnahme.

Website-CO2 messen: erst die Ausgangslage

Bevor ihr optimiert, braucht ihr einen Ausgangswert für eure wichtigsten Seiten. Frei verfügbare Online-Rechner liefern dafür eine erste Schätzung. Aussagekräftiger als der einzelne Wert ist der Vergleich vor und nach einer Optimierung.

Hosting als Hebel

Laut W3C läuft eine nachhaltige Website auf Servern mit kohlenstoffarmer oder erneuerbarer Energie. Fragt euren Anbieter konkret, mit welchem Strom seine Rechenzentren laufen.

Ehrlich gestalten

Auch das gehört laut W3C zur Nachhaltigkeit: keine Manipulation und keine täuschenden Designmuster. Prüft eure Formulare, Cookie-Banner und Newsletter-Anmeldungen auf Druck oder versteckte Häkchen.

So bauen wir nachhaltiges Webdesign in jede Website ein

Nachhaltiges Webdesign ist bei uns kein Zusatzpaket. Es steckt in der Art, wie wir Websites gestalten und technisch umsetzen.

Ein Design System für alle Websites

Wir arbeiten mit einem eigenen Design System, das wir bei allen Kund:innen einsetzen. Es skaliert Websites mathematisch über alle Bildschirmgrößen und lässt trotzdem markenspezifische Anpassungen zu. So entstehen weniger Sonderregeln, weniger Code und schlankere Seiten.

Animation mit Absicht

Bewegung gehört zu unseren liebsten Werkzeugen, gerade bei 3D & Motion. Wir setzen sie dort ein, wo sie Orientierung gibt oder eine Geschichte erzählt.

Technisch bauen wir Animationen so, dass der Browser sie ohne aufwendige Neuberechnung darstellt. Das empfiehlt auch der Performance-Guide von MDN. Wer am eigenen Gerät "Bewegung reduzieren" aktiviert hat, bekommt eine ruhigere Version.

Leistung im Blick behalten

Eine Website wird nach dem Launch selten leichter, weil nach und nach neue Bilder und Tools hinzukommen. Deshalb behalten wir die Performance auch nach dem Go-live regelmäßig im Blick.

Wenn ihr wissen wollt, wie schwer eure Website heute ist, schauen wir gern gemeinsam drauf.

Quellen: IBM Design, ibm.com; W3C, Web Sustainability Guidelines, w3.org; Chrome for Developers, developer.chrome.com; MDN Web Docs, developer.mozilla.org.