Digital bedeutet nicht immer auch grün: Wäre das Internet ein Land, würde es so viel Strom verbrauchen wie Deutschland und hätte damit den sechstgrößten Stromverbrauch der Welt.
Das Paradoxe daran ist, dass mit dem technischen Fortschritt und einer höheren Effizienz der Strombedarf weiter und weiter angestiegen ist. Bei einem CO2-Ausstoß, der sich mit dem des weltweiten Luftverkehrs vergleichen lässt, ist es daher umso wichtiger, ressourcenschonend zu denken.
In diesem Artikel wollen wir euch zeigen, wie ihr durch ein nachhaltiges Webdesign dazu beitragen könnt, euren CO2-Verbrauch zu senken.

Das Hosting

Beginnen wir mit dem Hosting. Dabei könnt ihr insbesondere auf drei Kriterien achten: Euer Webhoster sollte Ökostrom beziehen, sich möglichst für Nachhaltigkeit engagieren und die Server sollten in Deutschland stehen. Häufig lohnt es sich hier genauer hinzusehen und den genannten Ökostromanbieter zu recherchieren. In einigen Fällen handelt es sich dabei um Beteiligungen von Firmen wie EnBW, die noch mit Kohle und Atomstrom arbeiten. Beispiele für wirklich nachhaltige Hostinganbieter sind z.B. biohost oder greensta. Auf https://utopia.de/ratgeber/gruenes-webhosting-oekostrom/ findet ihr noch weitere, nach Nachhaltigkeit gerankte, Anbieter.

Die Webseite

Zeit für einen Check! Wie klimafreundlich ist eure Webseite eigentlich? Unter https://www.websitecarbon.com/könnt ihr das ganz einfach prüfen. Herangezogen werden dabei der Datentransfer, der Energieverbrauch, die Energiequelle des Datenzentrums, der CO2-Verbrauch des Stroms und der Webseitenverkehr. Wenn euer Testergebnis gut ausgefallen ist: super, weiter so! Falls nicht, fragt ihr euch nun bestimmt, wie ihr das Ergebnis verbessern könnt. Das Prinzip „Reduce, Reuse, Recycle“ gilt auch in der digitalen Welt.

Reduce

Beginnen wir mit Reduce, dem Aufbau der Webseite. Weniger ist manchmal mehr: Das Vermeiden von überflüssigen Informationen und Medien bedeutet schnellere Ladezeiten, weniger Code und eine bessere Performance. Bei der Gestaltung der Webseite macht es daher Sinn, immer den Mehrwert der Designentscheidung zu hinterfragen. Ein weiterer wichtiger Punkt ist die Informationsstruktur: Mit Tools wie Google Analytics könnt ihr herausfinden, wie die häufigsten Klickpfade aussehen und die Informationen so leichter zugänglich machen. So verbessert ihr nicht nur die Nachhaltigkeit eurer Seite durch das Reduzieren von Klicks, sondern auch die Usability.
„Good Design should be as little design as possible“ – das 10. Prinzip Dieter Rahms gilt auch im Web: Ein minimalistischer Ansatz in der Gestaltung kann die Nachhaltigkeit der Seite deutlich verbessern. Unter Minimalismus verstehen wir hier nicht die Ästhetik oder einen bestimmten Stil, sondern dass Designelemente sinnstiftend eingesetzt werden.

• Ist es wichtig, an dieser Stelle eine custom font zu verwenden? Falls nicht, ist es nachhaltiger Speicher zu sparen und auf eine Standartschrift zurückzugreifen.
• Wurden Farben verwendet, die auf OLED Screens Strom sparen?
• Lässt sich auf der Seite ein „Dark Mode“ einbauen und der Stromverbrauch senken?
• Werden Videos und Animationen nur dort eingesetzt, wo sie den Nutzern einen Mehrwert bieten?

Ein zeitloses, sinnstiftendes Design sorgt dafür, dass ihr die Seite nicht ständig anpassen und umgestalten müsst und spart so weiteres CO2 ein.

Ein weiterer wichtiger Punkt ist die Reduzierung der Dateigrößen. Läuft deine Webseite mit WordPress, helfen dir Plugins wie SMUSH, Bilder zu komprimieren, deine Ladezeiten zu verbessern und den CO2-Verbrauch zu verringern. Falls nicht, gibt es weitere Tricks, um die Bildgrößen zu reduzieren

• Speichere Fotos wenn möglich als JPEGs. Meide PNGs, da sie große Dateigrößen haben. Für Logos etc. bieten sich SVGs an, da sie als Textdateien sehr viel kleiner sind als PNGs.
• Speichere Bilder in der Größe ab, in der sie angezeigt werden sollen. Auch über die Qualitätseinstellungen lässt sich die Größe drastisch reduzieren.
• Videos können häufig gelooped und durch GIFs ersetzt werden. Videos, die im Hintergrund verwendet werden, müssen keine besonders hohe Qualität haben.
• Denkt bei den Bildgrößen auch an die mobile Ansicht: So müssen keine unnötig großen Bilddaten für die Desktopansicht geladen und überschrieben werden.

Prinzipiell ist es sinnvoll, ein sogenanntes „Page Weight Budget“ festzulegen und euch so ein Limit für die Datengröße der Webseite zu setzen. So hat das ganze Team einen Wert, an dem es sich orientieren kann. Unter https://sustainablewebdesign.org/ findet ihr detaillierte Anweisungen, wie ihr eure Seite schlanker und nachhaltiger halten könnt.

Reuse & Recycle

Alles verwenden, nichts verschwenden: Das Wiederverwenden von Code reduziert die Datenmenge drastisch.

Unter https://medium.com/@lanceharvieruntime/4-ways-to-make-your-code-more-reusable-bc20889c1e4 lernt ihr, wie ihr euren Code wiederverwertbar machen könnt. Zurückgegriffen wird dabei auf die BEM-Methode, bei der die Seite in Blöcke und Elemente aufgeteilt wird, die durch Modifier angepasst werden können. Idealerweise werden dafür im Webdesign Elemente & Module mehrfach verwendet. Der Vorteil? Die Seite wird nicht nur schlanker, sondern auch visuell einheitlicher und nutzerfreundlicher, da die Nutzer den Aufbau und die Funktion der Elemente schneller verstehen können. Genaue Namenskonventionen halten die CSS-Hierarchien flach und vermeiden unnötigen Code. Prinzipiell gilt: Je sauberer der Code, umso nachhaltiger!

Fühlt ihr euch motiviert, eure Webseiten zu verbessern und so das Klima zu schützen? Unter dem https://www.sustainablewebmanifesto.com/ findet ihr sechs Grundprinzipien und nachhaltige Versprechen, an die ihr euch in Zukunft halten könnt.

Last but not least

Zu einem nachhaltigen Webdesign gehört auch ein inklusives Webdesign. Eine genaue Checkliste zu barrierefreiem Webdesign findet ihr hier: https://bik-fuer-alle.de/easy-checks.html.