Nachhaltiges Web Design

Warum nachhaltiges Web Design?

In meinem letzten Blogpost bin ich den Fragen nachgegangen, ob Digitalisierung eigentlich nachhaltig ist oder wie viel CO2 auf das Konto des Internet geht. Für mich ist es unstrittig, dass die Digitalisierung von Initiativen flankiert werden muss, die die Nachhaltigkeit von digitalen Technologien erhöhen. Zu einer besseren Vereinbarkeit von digitalen Angeboten und den Zielen der Nachhaltigkeit gehört dann beispielsweise, dass Web Applikationen, Blogs und digitale Services nach zusätzlichen Design Paradigma (weiter-) entwickelt werden müssten, so dass z.B. im Betrieb deutlich weniger Energie verbraucht wird.

Das Bild (s.o.) von Charles Etoroma fand ich in diesem Kontext inspirierend, hier die Adaption:

Wenn man also von nachhaltigem Web Design spricht, dann kann zunächst nur damit gemeint sein, dass eine Website / Web App im Sinne der Nachhaltigkeit gestaltet und realisiert wurde. Also dass die Website so z.B. energiesparender oder ressourcenschonender ist.

Vollständig CO2-neutral kann eine Website als “immaterielles, elektrifiziertes Ding” dabei nicht werden, wenn man die zugrundeliegende Hardware mit betrachtet. Deren Herstellung hat bereits viel Energie benötigt, so dass ein rein grüner Betrieb der Server nicht für eine CO2-Neutralität ausreicht. Man könnte aber versuchen, die Bilanz durch Wiedergutmachung zu optimieren - so wie bei Ecosia z.B., der “Suchmaschine, die Bäume pflanzt”.

Ein wichtiger Schritt ist es aber, wenn Web Design an Kriterien der Nachhaltigkeit orientiert wäre.

An welchen Kriterien kann sich ein nachhaltiges Web Design orientieren?

Um sich einer pragmatischen Ebene nachhaltigen Web Designs zu nähern, erscheint es sinnvoll, Ziele oder Kriterien eingangs zu bennenen, die beim Design beachtet werden sollten.

Die Definition von Nachhaltigkeit ist allerdings nicht so einfach, weil Nachhaltigkeit eine “[…] weit gefasste Disziplin, die sich mit vielen verschiedenen Aspekten unserer Welt befasst […]” via nachhaltigkeit.org ist. Auf nachhaltigkeit.org heisst es weiter: “Nachhaltigkeit zielt darauf ab, unsere Umwelt, sowie die menschliche und ökologische Gesundheit zu schützen, während gleichzeitig Innovationen vorangetrieben werden, ohne unsere Lebensweise zu beeinträchtigen.”

Innovation: ja, Umweltschäden: nein. Konkret leitet sich ab, dass die Steigerung der Energieeffizienz ein großes Thema im Kontext der digitalen Güter sein muss. Je weniger Energie benötigt wird, umso besser. Zudem sollte die direkt im Zusammenhang stehende Infrastruktur eines digitalen Angebots (also etwa ein Rechenzentrum) durch erneuerbare Energie oder betrieben werden und nicht auf Basis von Kohleverstromung oder durch die Verbrennung anderer fossiler Rohstoffe.

Welche Kriterien könnte man also ansetzen, um schrittweise ein nachhaltiges Web Design zu erfüllen?

Kriterium 1: Anteil der erneuerbaren Energiequellen

Um die CO2-Emissionen niedrig zu halten, die durch die Bereitstellung digitaler Angebote entstehen, sollten Anbieter für Hosting und Infrastrukturen für den Betrieb der Software danach ausgewählt werden, ob sie Strom auf Basis erneuerbarer Energiequellen beziehen oder nicht.

Durch eine höhere Nachfrage grüner Rechenzentren können zusätzliche Anreize für die Energiewende generiert werden. CO2-neutral sind Websites oder andere digitale Inhalte dadurch allerdings noch längst nicht. Denn die gesamte Infrastruktur beinhaltet weitaus mehr Stellen, an denen Energie verbaucht wird. Z.B. den Computer des Programmierers oder Nutzers eines Angebots.

Ein wichtiger Schritt ist aber, dass der Anteil erneuerbarer Energiequellen maximal hoch wird, wenn es um die Herstellung und den Betrieb digitaler Angebote geht. Auf thegreenwebfoundation.org findet man eine Übersicht von Hosting-Anbietern, die bereits auf erneuerbare Energie setzen.

Kriterium 2: (Messbare) Energieeffizienz im Betrieb

Die Gestaltung der digitalen Angebote selbst sollte zusätzlich darauf abzielen, dass nur so viel Energie verwendet werden muss, wie mindestens nötig ist (das erinnert mich an die Cookie-Vorgaben). So könnte man die nötigen Energien “Funktional oder essentielle Energien” nennen.

Die plumpe Faustregel kann lauten: Je weniger Energie auf das Konto einer Web Applikation / Website geht, umso besser.

Man könnte tendentiell weitergehen und KPI’s oder sogar Schwellwerte (ähnlich wie Grenzwerte bei der Schadstoffemission) in dieser Hinsicht formulieren. Ein Problem ist allerdings, dass man heute nicht akkurat erfassen kann, wie viel Energie für das Rendern einer bestimmten Seite nötig ist, wie sich dieser Verbrauch konkret verteilt oder wie viel CO2 durch eine Website in Summe pro Jahr und einer bestimmten Anzahl an Requests freigesetzt würde.

Doch es tut sich was! Es gibt inzwischen Initiativen, die eine Art Scoring oder Näherung entwickelt haben. Ein Beispiel wäre websitecarbon.com:

websitecarbon.com baut ein Rating auf Basis dieser Dimensionen auf:

Data transfer over the wire
Energy intensity of web data
Energy source used by the data centre
Carbon intensity of electricity
Website traffic

Ein weiteres Beispiel ist bei sitespeed.io zu finden. Das Team hinter sitespeed hat ein sustainable web plugin in Zusammenarbeit mit The Green Web Foundation ausgeheckt, mit welchem die Transfergröße der digitalen Assets einer Website und die Domain (zur Prüfung, ob der Server auf grüner Energie läuft) zur näherungsweisen Abschätzung der CO2-Emission pro Seite (page view) betrachtet werden.

Eine drittes Beispiel für solche Tools ist der Website Carbon Footprint Calculator, der auf Basis von manuellen Eingaben Näherungswerte bzgl. der CO2-Emission berechnet. Besser als nichts, aber leider auch noch nicht präzise genug.

Wenn Effekte (z.B. im Bereich Energieeffizienz) von Design messbar gemacht werden könnten, dann könnte Design auch wesentlich präziser Wirksamkeit entfalten. Energie- und CO2-Maßnahmen werden erst dann präzise und verlässlich umsetzbar, wenn der Energieverbrauch feingranularer messbar wird und mehr Informationen im Kontext der CO2-Emissionen verfügbar sind. Anwender von Infrastrukturen (z.B. Entwickler oder Unternehmen) haben heute wenig Möglichkeiten, sich transparent und detailliert über die CO2-Bilanz von Hardwarekomponenten oder Rechenzentren zu informieren. Hier muss mehr getan werden, damit man wissen kann, wie viel Energie eigentlich eingespart werden müsste, um gemeinsam eine grüne IT und dann nachhaltige. digitale Produkte und Inhalte auf den Weg zu bringen.

Kriterium 3: Energieeffizienz bei der Nutzung

Digitale Inhalte werden vermarktet oder frei bereitgestellt und erzeugen auch implizit einen weiteren Energieverbrauch bei der Nutzung oder Rezeption. Es läge also auch mindestens mit in der Verantwortung des Autors oder Herstellers eines Inhaltes, sich mit der möglichst energieeffizienten Rezeption zu befassen. Produkt und Web Design sowie Contenterstellung sollten sich zusätzlich daran orientieren, dass die clientseitige Verwendung / Rezeption möglichst energiesparsam durchführbar ist. Aus meiner Sicht betrifft dies eine neue und notwendige Unterdisziplin im Bereich UX (User Experience). Neue Fachlichkeiten zeichnen sich hier ab.

Die Faustregel an dieser Stelle: Je weniger Energie bei der Nutzung oder Rezeption eines digitalen Angebots verbraucht werden muss, umso besser.

Ein Nutzer einer Website verwendet ein Gerät, welches spezifische Eigenschaften im Energieverbrauch aufweist. Clientseitig sind unterschiedlich viele Operationen nötig, was das Ausführen von Code oder die Darstellung von Inhalten betrifft. Hochauflösende Videos, unzureichend komprimierte Bilddateien, Animationen / Transitionen, die Auswahl an Fonts und generell die Komplexität des auszuführenden Codes (insbesondere JavaScript) … all das treibt den Energieverbrauch clientseitig nach oben.

Ein anderes Beispiel von Gestaltung und Effekt kann in dem Zusammenhang von Farbigkeiten und Displaytechnologie erkennen. Wie viel Energie für die Anzeige einer Website mit z.B. weißem Hintergrund aufgrund der resultierenden Helligkeit nötig ist, wäre hier eine valide Frage, die Web Design beantworten kann. Im Trend sind so ja seit einiger Zeit “Dark UI, Dark Themes, Dark Modes”; also Oberflächendesigns, die für das Lesen in dunklen Umgebungen optimiert worden sind (helle Schrift auf dunklem Grund und nicht dunkle Schrift auf hellem Grund). Ein positiver Effekt dieser dunklen Layouts kann sich ergeben, wenn sich durch die dunklen Hintergründe der Layouts die nötige Leuchtleistung des Displays reduzieren ließe. Ob wirklich Energie gespart werden kann, hängt allerdings von der Display-Technologie ab:

“As stated by the Scientific American “Black isn’t the new green”. (source) Also, according to Quinton O’Reilly “LCD displays are backlit meaning everything on screen is lit up regardless of colour. AMOLED and OLED displays don’t have a back light. Instead, each pixel lights up individually so when a pixel is black, it doesn’t need to produce any light”.” (via uxdesign.cc)

Das Beispiel zeigt der Dark Modes zeigt allemal, dass auch gerade im Design des User Interfaces (UI) grundlegende Aspekte berücksichtigt werden könnten, die positiven oder negativen Einfluss auf den Energieverbrauch in der Nutzungssituation haben können.

Für die Nutzungssituation sind die Geräte selbst natürlich ein wesentlicher Faktor, der über den Energieeinsatz entscheidet. Geräte wie das minimalistische Light Phone 2 verwenden bspw. E-Ink, aber jede Art von Website kann damit leider nicht vollumfänglich wiedergegeben werden. Hier könnte es durchaus auch einen größeren Support von solchen Geräteklassen durch die Ersteller von Content geben. Ich glaube insgesamt leider nicht, dass der Trend zu immer größeren, hochauflösenderen Displays abreißen wird; trotzdem glaube ich, dass man Inhalte nicht immer für die High-End-Displays auslegen muss, wenn der Anwendungsfall dies nicht unbedingt erfordert. Mehr Inhalte könnten so etwa problemlos zugunsten des Konsums auf genügsameren Displaygattungen optimiert werden - was auch die Nutzungsdauer (im Sinne eines Lebenszyklus) von Geräten strecken könnte.

Tipps für die Praxis

Nach diesen allgemeineren Kriterien für nachhaltigeres Web Design hilft es, wenn man sich Möglichkeiten für die praktische Umsetzung überlegt. Welche konkreten Optionen und Maßnahmen kann es geben, die für die nachhaltigere Entwicklung von Websites relevant wären?

Hier ein paar Tipps und Themen:

Messen, messen, messen

Man kann nichts optimieren, was man nicht kennt. Insofern ist der erste Tipp, die Entwicklung einer Website mit dem Messen von Effekten der Entwicklung zu verbinden. Hilfreiche Tools hierfür sind beispielsweise sitespeed.io oder Google PageSpeed.

Technik gezielt auswählen: z.B. JAMstack

JAMstack ist ein vergleichsweise moderner Ansatz für das Erstellen von statischen Websites, deren Assets via CDN (Content Delivery Networks) bereitgestellt werden können und konsequenter auf JavaScript und wiederverwendbare HTTP APIs anstelle von App-spezifischen Datenbanken setzen. JAM leitet sich daher von JavaScript, API und Markup ab. Für einen ersten Überblick lohnen sich der Besuch von jamstack.org oder ein Blick in das frei downloadbare eBook “Modern Web Development on the JAMstack” von Mathias Biilmann und Phil Hawksworth.

Im Vergleich zu klassischen und sehr häufig eingesetzten Ansätzen wie im Falle von Wordpress, bietet JAMstack nun Vorzüge, die so ausgenutzt werden können, dass am Ende eine inhaltlich und optisch vergleichbare Seite (bewertet anhand ihrer Merkmale für den Nutzer) energieeffizienter ausgeliefert werden könnte.

“[…] the JAMstack architecture is centered around serving content from the edge, a practice which is significantly more energy efficient than serving content directly from the server. When a site is served from the edge, it is often fast because of its proximity to the visitor. This proximity of content to the end user means one less round trip to the server to fetch content and less energy wastage from having to navigate a request through to the origin server. Serving dynamic content like from a Wordpress site additionally demands added CPU time to render each page view before serving up the content. At scale, this distinguishing feature between the JAMstack and traditional monoliths becomes much more perceptible. Compared to their “dynamic” counterparts, static assets hosted on a CDN can be served to the end user easily and as needed without having to overprovision servers to handle load.” (gefunden auf dev.to)

Darüber hinaus schneiden JAMstack-Seiten übrigens oft sehr gut ab, was z.B. die Performance bei dem Seitenaufbau betrifft. Andere Vorteile können im Bereich der Sicherheit und bezüglich SEO erschlossen werden. Ich setze inzwischen immer stärker auf JAMstack-Ansätze und sehe in der Praxis auch weitere Vorteile in der Verwendung von Static Site Generatoren wie HUGO oder bei der Erstellung von VueJS / NuxtJS-Projekten. Doch dies ist ein anderes Thema. Es gibt generell, so viel sei noch gesagt, verschiedene Frameworks oder Static Site Generatoren mit jeweils unterschiedlichen Vor- und Nachteilen. Eine Recherche lohnt sich …

Make images small again!

Bei dem Thema Bildkomprimierung schludere ich zugegebenermaßen durchaus auch zu oft… doch es wäre gut, wenn auch in Zeiten von 4k und Netflix noch auf die Größe und die Formate von Dateien geachtet wird. Bilddateien und Videos müssen nicht immer für Kinovorführungen funktionieren! Es ist nämlich ganz einfach so, dass immense Datenmengen tagtäglich nur aufwändig über den Globus gesendet werden, weil an der Komprimierung oder dem Bearbeiten der Bilddateien gespart wurde.

Die Größe der ausgelieferten Inhalte, also gerade auch von Bilddateien, ist ein nennenswerter Faktor für die Menge der verbrauchten Energie einer Website!

wholegraindigital.com meint: “On most websites, images are the single largest contributors to page weight. The more images you use and the larger those image files, the more data needs to be transferred and the more energy is used. Regardless of any technical optimisations, designers and content creators should think carefully about their use of images.”

Wholegraindigital.com war so gut und hat in diesem Artikel eine nette Übersicht von Bildkomprimierungsdiensten zusammengestellt. Diese ist allerdings von 2018 und somit nicht ganz druckfrisch. Eine neuere Übersicht von Online- und Offlinetools gibt es ebenso hier.

Bekannt sind beispielsweise Dienste wie kraken.io.

Für Bewegtbild sollte auch häufiger gelten: REDUCE AND USE EM WISELY!

Wiederverwendbarkeit

Wiederverwendbarkeit von Komponenten und Code kann auch einiges im Sinne der Nachhaltigkeit bewirken. APIs und Micro Services sind hier auch keineswegs neue Themen. Dennoch sind heute immer noch sehr viele monolithische Applikationen Realität.

Design Paradigma sollten also auch konkret bei der Modernisierung von technischen Ansätzen und Architekturen Einfluss nehmen und nicht allein bei der Optik.

CSS und UI-Toolkits nach Maß

Wichtig finde ich auch, dass bei der Auswahl der UI- / CSS-Libraries Effizienz und nötiger Pragmatismus eine größere Rolle spielen. Es muss bspw. nicht immer Bootstrap sein. Vielleicht reicht es ja manchmal für das Erstellen einer Website aus, in geringen Dosen eigenes CSS und wenig JavaSkript zu verwenden. Es gibt so viele interessante Toolkits wie Tachyons oder TailwindCSS uvm., wovon sich manchmal das eine besser als das andere für einen Anwendungsfall eignet. Je angemessener ein Framework oder UI-Toolkit für die Lösung eines relevanten Problems ist, umso besser.

Hauptsache, das Problem wird gelöst und es wird nicht grundlos Overhead generiert.

Und ab und zu macht es sogar Spaß, simples HTML und einen Hauch von CSS für einfache Seiten schlichtweg statisch und oldschool zu schreiben. Gerade so viel wie nötig.

Oder gar unter 10k …

Die Herausforderung im Kleinen: “Back to basics”

Sogar innerhalb der Grenzen von 10kB ist viel möglich!

Z.B. ein JavaScript-freier Avatar-Generator von Hannah Malcolm, der für 10k Apart 2016 erstellt wurde. Begrenzung macht erfinderisch und führt nicht selten zu kreativen Einfällen, die dann ganz neue Optionen offenbaren.

Gutes Design und Relevanz kann sich problemlos auch in der Begrenzung entfalten. Doch häufig greift man leider sehr schnell zu fertigen “Hochglanz-Ansätzen”, so dass die Kreativität bereits innerhalb festgelegter Bahnen entfaltet werden muss. Für ein nachhaltiges Design halte ich den Mut zu mehr Design-Freiheit für eine wichtige Angelegenheit.

Ich halte es dabei jedoch nicht für wirklich wichtig, Inhalte unter 10kB zu bringen! Auch wenn es eine spannende Challenge darstellt.

Es ging mir bei diesem Beispiel aber vor allem um die angewandte Perspektive, dass nämlich nicht das dicke Auftragen darüber entscheidet, wie gut etwas ist. Limitierung (künstlich oder nicht) kann hilfreich sein, neue Wege einzuschlagen.

Die Idee der Begrenzung halte ich bei der Gestaltung von Websites also für ein gutes Hilfsmittel, um mehr über das eigentliche Problem nachzudenken, welches es zu lösen gilt. Und eventuell weniger über die Hochglanz-Präsentation. Reduktion schult den Blick.

Weitere Tipps …

… von wholegrain nehme ich an dieser Stelle noch auf, da sie Möglichkeiten illustrieren, wie ganz praktisch durch die Gestaltung oder den Code Energie gespart werden kann.

Auch wird auf Nutzen durch den Einsatz von CDN (Content Delivery Networks) sowie Vorteile bei statisch vorgenerierten Seiten (im Vergleich zu stetig immer wieder neu dynamisch generierten Seiten wie bei Wordpress) hingewiesen. Diese Aspekte habe ich bereits im Bereich JAMstack zuvor erwähnt.

Unter anderem wird auch gesagt, dass JavaScript, welches geladen und ausgeführt werden muss, natürlich Energie verbraucht. Die energiefreundlichste Seite wäre natürlich reines Markup ohne jeden Schnickschnack. Ob dies in der Breite heute noch angemessen wäre, wage ich allerdings zu bezweifeln.

Auch serverseitiges Caching und der Nutzen von “Clean Code” wird erwähnt.

PageSpeed

Hilfreiche Tipps bieten übrigens auch die PageSpeed Insights Rules von Google.

Herausgreifen möchte ich PageSpeed deshalb, weil das Scoring zwischen 0-100 für Mobile und Desktop erfolgt, vielen Personen geläufig ist und weil Empfehlungen dargestellt werden, die bereits eine gute Hilfestellung anbieten.

Eine meiner Seiten hatte eben einen erfreulichen Testlauf:

Fazit

Digitale Inhalte verbrauchen Energie. Energie sollte auf Basis erneuerbarer Energiequellen gewonnen werden, damit die Digitalisierung keinen unnötig großen Schaden für Mensch und Umwelt provoziert. Die Steigerung der Energieeffizienz ist nicht nur im Bereich von IT-Infrastrukturen zu suchen, sondern sollte ebenso im Bereich Programmierung, UX und Produkt sowie Web Design versucht werden. Durch viele kleine Stellschrauben und ebenso moderne Ansätze wie JAMstack können Effekte zugunsten einer besseren Energiebilanz erreicht werden. Damit Effekte aber auch praktisch analysiert werden können, ist die Messbarkeit des Energieverbrauchs sowie die Hochrechnung von CO2-Emissionen bei der Bereitstellung digitaler Inhalte eine Herausforderung. Erste Lösungsansätze gibt es z.B. in Form von Rating-Services, doch flächendeckend gemessen und transparent bereitgestellt (für den Konsumenten etwa) werden solche Informationen nicht! Hier ist ein Nachholbedarf festzustellen. Der Umgang mit Daten und die Gestaltung von digitalen Lösungen und Inhalten sollte sich zukünftig viel stärker an Kriterien der Nachhaltigkeit orientieren. Es gibt einige Vorstöße und Allianzen in dieser Hinsicht, aber es ist noch ein langer Weg zu beschreiten.