Grünes Webdesign: nachhaltige Websites gestalten

»Gutes Design ist umweltfreundlich« lautete bereits in den 1970er Jahren eine der zehn Thesen von Dieter Rams. Fühlten sich erst hauptsächlich Produktdesigner in der Verantwortung, versuchten bald auch Kommunikationsdesigner die Aus­wir­kun­gen ihrer Arbeit auf die Umwelt zu reduzieren – vor allem in der Printproduktion. Noch relativ wenig be­schäf­tigen sich allerdings Web-, Interface und UX Desig­ner mit der Frage, wie sie digitale Produkte und Services nachhaltiger gestalten können.

Das liegt auch daran, dass die Digitalisierung zunächst als klimafreundlich gefeiert wurde – immerhin müssen jetzt weniger Bücher, CDs und DVDs pro­duziert werden, Konferenzen lassen sich per Video abhalten und Abläufe in der Industrie optimieren. Dass unser »Always on«-Lifestyle ebenfalls negative Folgen für die Umwelt hat, ist dagegen nicht so augenscheinlich. Das Problem: Der immense und stetig zunehmende Stromverbrauch von Webtechnologien speist sich vornehmlich aus Kohle. Das führt dazu, dass der gesamte Sektor der Informations- und Kommunikationstechnologie (IKT) pro Jahr so viel CO2 ausstößt wie der globale Flugverkehr – 830 Millionen Tonnen, um genau zu sein. Und es wird eher schlimmer als besser: 5G, Internet of Things, künstliche Intelligenz und Bitcoin werden den Energiebedarf in den nächsten Jahren noch weiter in die Höhe treiben. Die gute Nachricht: An dieser Stelle können Designer und Entwickler ansetzen.

Website-Fußabdruck berechnen

Die Rechnung ist ganz einfach: Je mehr Daten produziert und geteilt werden, desto mehr Energie wird verbraucht. Denn Datentransport benötigt Elektrizität. Rechenzentren haben einen 40-Prozent-Anteil am gesamten Stromverbrauch der IKT-Branche. Die Umstellung auf Hoster, die ihre Server mit Ökostrom betreiben, ist somit eine der größten Stellschrauben, an denen wir drehen können. Große Tech-­Unternehmen machen es vor: Google gilt als Vorreiter in Sachen erneuerbare Energien, auch Facebook und Apple haben umgestellt. Amazon, Netflix und Twitter hinken (noch) hinterher. Amazon-Chef Jeff Bezos verkündete kürzlich, die Pariser Klimaziele mit seinem Unternehmen bis 2030 erreichen zu wollen, darunter auch die Umstellung auf 100 Prozent erneuerbare Energien. Wie grün die großen Anbieter digitaler Services insgesamt sind, kann man auf der Greenpeace-Website »Click Clean« ablesen, die sie nach einem Ampelsystem listet.

Wer herausfinden will, wie »grün« eine x-beliebige Website ist, kann dies dank The Green Web Foundation: Einfach URL eingeben und das Tool zeigt an, ob die jeweilige Website mit grünem Strom betrieben wird. Zudem stellt die Organisation eine weltweite Übersicht über grüne Hoster zur Verfügung. Für Deutschland sind derzeit 29 Anbieter gelistet – Platz drei hinter den Niederlanden mit 255 (!) und den USA mit 45. Vorsicht: Das Verzeichnis ist nicht vollständig – wer einen Hoster hinzufügen will, kann diesen über ein Registrierungsformular melden. Ähnliche Tools zeigen an, wie viel CO2-Emissionen eine Web­site verursacht (siehe Checkliste). Glücklicherweise passiert hardwareseitig schon recht viel: Sogenannte Hyperscale-Server, neue Kühltechnolo­gien für Rechenzentren oder auch flächende­cken­de Content Delivery Networks sorgen für eine bessere Energieeffizienz. Doch das Optimierungs­po­ten­zial ist endlich. Es muss auch an anderer Stelle gefeilt werden.

Sustainable Web: Datengröße reduzieren

In den letzten Jahren hat die Größe von Websites extrem zugenommen. Mehr Bandbreite und leis­tungs­starke Prozessoren haben dafür gesorgt, dass Beden­ken wegen der Menge und Größe der verwendeten Daten aus dem Fokus geraten sind. Eine Erhebung der Performance-Monitoring-Services SpeedCurve zeigt: Hatte eine Website 2011 im Durchschnitt noch eine Größe von etwa 800 Kilobyte, waren es 2015 schon 2,5 Megabyte und 2018 rund 3,5 Megabyte – Spitzenreiter haben sogar 5 bis 8 Megabyte! »Wenn man sich anschaut, was genau diesen Anstieg ausmacht, ist das so gut wie nie HTML – also der eigentliche Inhalt«, sagt Niklas Jordan, Konzepter bei der Digitalagentur Mandarin Medien in Schwerin, der sich für ein nachhaltigeres Internet einsetzt. »Vielmehr hat die Nutzung von Fotos und Videos inflationär zugenommen. Filme, die im Hintergrund laufen, Fotos, die über die gesamte Bildschirmbreite gehen, Animationen im Endlos-Loop et cetera: Solche Komponenten sind es, die Websites – häufig unnötig – aufblähen.«

Die Page Size zu reduzieren ist somit der größte Hebel, an dem Designer und Developer ansetzen können, um Websites und digitale Angebote klimafreundlicher zu machen. Denn wie viel Energie das Frontend benötigt, wird maßgeblich in der Designphase entschieden. Das beginnt schon beim Prozess, wie Tim Frick in seinem Buch »Designing for Sustain­ability« erläutert: Interdisziplinäre Kollaboration und agile Entwicklung sorgen dafür, dass weniger für die Tonne programmiert wird, und verhindern, dass Ber­ge an unnützem Code das Backend verstopfen. Designsysteme sind dank ihrer Modularität effizienter als pixel-perfect Wireframes, und Design Research und User Stories helfen dabei, dass der Anwender die Ergebnisse später auch annimmt.

Beim visuellen Design ist vor allem Reduzierung gefragt. Mögliche Maßnahmen wären hier etwa der Einsatz von statischen Bildern statt Videos und Carousels, der Einsatz von Systemschriften oder Variable Fonts statt Webfonts oder der Verzicht auf Social-Media-Buttons und andere Drittanbieter-Plug-­ins. Vielleicht tut es statt eines hochaufgelösten Fotos auch eine Illustration, eine Vektorgrafik oder ein Icon? Bei der Komprimierung von Bildern ist häufig ebenfalls Luft nach oben – beziehungsweise nach unten. Tools wie smush it! oder ImageOptim sind hier übrigens wesentlich effektiver als die Photoshop-Funktion »Für Web und Geräte speichern« – und noch dazu kostenlos. Auch die Technik des Lazy Loading, bei dem nur die Inhalte geladen werden, die gerade auf dem Bildschirm zu sehen sind, hilft beim Energiesparen. »Über 50 Prozent der Daten, die bei einem Website-Abruf transferiert werden, sind unnötig und werden nicht genutzt«, erklärt Stefan Kruijer, freier Wissenschaftler und Webentwickler, der sich bei der Initiative Scientists for Future engagiert. Schlankere Templates und Themes könnten helfen. So hat der britische Entwickler Jack Lenox ein Word­press-Theme entworfen, das nur 6 Kilobyte schwer ist. Mehr Tipps für umweltbewusstes Visual Design haben wir in der Checkliste gesammelt.

Auch eine Art alternatives, ener­gieeffizienteres Internet gibt es mittlerweile: In dem Brow­ser-­Mo­dus »Save Data« werden Websites in reduzierter Form an­gezeigt. Statt sich dabei auf einen Proxy zu verlassen, der Websites automatisch herunterrechnet, kön­nen Designer und Developer nun mit »Save Data« bestimmen, wie eine reduzierte Version aussehen soll – etwa mit Bildern in niedriger Auflösung, ohne Webfonts, mit weniger Cookies, Track­ing oder Anzeigen. Das heißt, sie können quasi selbst eine ab­gespeckte Fassung ihrer Seite gestalten. Bislang unterstützen allerdings nur die Browser Opera, Yandex und Chrome diese Funktion.

Energiesparendere Websites gestalten: Abwägen und informieren

Energiesparendere Websites zu gestalten ist kein He­xenwerk. Im Grunde ist es einfach gutes UX Design, gepaart mit einer guten Contentstrategie und SEO – denn wenn ein Nutzer schnell findet, was er sucht, browst er weniger herum. Bei Kunden, die eine Web­site mit Wow-Effekt haben wollen, wird das Argument der Energiesparsamkeit allerdings eher nicht greifen. Wie gut, dass es dafür mit einem anderen wichtigen Ziel einhergeht: der Performance. Weniger Schnickschnack bedeutet weniger Daten und damit eine schnellere Website. Und die ist auch im Interesse des Unternehmens, das User anziehen und halten will – sei es, weil sie Content konsumieren oder Produkte kaufen sollen. Mithilfe eines vorab festgelegten Performance-Budgets lässt sich gut argumen­tieren, welche Elemente eingesetzt werden können und auf welche man besser verzichten sollte.

Langweilige Text-Websites ohne visuelle Hingucker sind natürlich keine Lösung. Videos, interaktive Animationen und formatfüllende Bilder haben ihre Berechtigung und können sowohl aus Informations- als auch Designgründen notwendig sein. »Es geht um die richtige Balance: So viel wie nötig, so wenig wie möglich«, sagt Stefan Kruijer. Man sollte also die Elemente gut abwägen und im Zweifelsfall auf optisches Feuerwerk verzichten. Auch dieser An­spruch findet sich schon in den Designthesen von Dieter Rams (»Gutes Design ist so wenig Design wie möglich«). »Bei anderen Aspekten finden wir ja auch Kompromisse, etwa bei der Performance«, so Niklas Jordan. »Energieverbrauch sollte ein KPI sein, anhand dessen man Design bewertet – und entsprechend an­passt.« Wie modern eine energieeffiziente Website aussehen kann, zeigt der mit Solarstrom be­triebene Auftritt des »Low-Tech Magazine«.

Zusätzlich helfen Konzepte aus dem Behavioural Design – wie Nudging – dabei, die Nutzer für den Energieverbrauch ihres Onlineverhaltens zu sensibilisieren und sie zum Handeln zu bewegen, etwa in Form von Benachrichtigungen bei übermäßigem Social-Media-Konsum oder Hinweisen, die ihn zum Löschen von Daten auffordern. Denkbar wären auch ein Haltbarkeitsdatum für Chatverläufe, Einstellun­gen bei Streaminganbietern, nicht automatisch die höchste Auflösung auszuspielen, oder eine »No Vi­deo«-Option beim Musikhören auf YouTube. Dabei geht es nicht darum, mit erhobenem Zeigefinger zu belehren oder zu bevormunden, sondern darum, Be­wusstsein für ein Problem zu schaffen, das viele noch nicht kennen – etwa auch im Rahmen der berufli­chen und akademischen Bildung. Stefan Kruijer geht noch einen Schritt weiter und schlägt vor, Flatrates abzuschaffen. Wenn Nutzer wieder einzeln für Fil­me, Serien und Musik bezahlen müssten, würde we­niger konsumiert. Ob man diese Entwicklung wirklich rückgängig machen könnte, ist fraglich – aber ein interessanter Ansatz ist es durchaus.

Ressourcen­schonende Digitalisierung: Kleine Schritte machen

Digitalisierung kann beides sein: Klimakiller und Klimaretter – pauschale Urteile werden der komple­xen Realität auch hier nicht gerecht. Es kommt immer darauf an, was man damit macht. Das Training von KI-Algorithmen beansprucht enorm viel Energie, kann aber gleichzeitig enormen Nutzen für Millionen von Menschen bringen. Und für die Umwelt: Google hat nach eigenen Angaben dank seiner KI-Technologie DeepMind den Energieverbrauch seiner Rechenzentren um 40 Prozent senken können.

Wir müssen aber aufpassen, dass die positiven Auswirkungen nicht von den negativen überlagert werden. Digitale Produkte und Services ressourcen­schonender zu gestalten, ist dabei ein bedeutender Schritt. Und auch wenn man gegen Energiefresser wie das Online-Streaming wenig ausrichten kann, so hilft es doch, sich zumindest das Problem klarzumachen, das eigene Verhalten zu hinterfragen und manche Entscheidungen bewusster zu treffen. Wir können nicht alles richtig machen – aber irgendwo sollten wir anfangen. 

Seit der Recherche für diesen Artikel sucht Redakteurin Nina Kirst mit der ökologischen Suchmaschine Ecosia, lässt nicht mehr so viele Browser-Tabs offen und versucht, abends öfter mal zum Buch zu greifen, statt Netflix zu gucken.

Checkliste für ein grüneres Internet

Diese Tipps und Tools sparen beim Webdesign Daten und Energie

1. Stromquellen und CO2-Ausstoß messen

Auf der The-Green-Web-Foundation-Site kann man checken, ob eine Website mit erneuerbaren Energien betrieben wird und sich über grüne Hoster informieren. Ecograder macht Angaben über die Nachhaltigkeit einer Website und gibt Tipps, an welchen Schrauben man drehen kann, um die Bilanz zu verbessern. WebsiteCarbon berechnet, wie viel CO2 eine Website pro Aufruf und geschätzt im Jahr verursacht.
Das Firefox-Plugin Carbonalyser von dem Think Tank The Shift Project zeigt Nutzern den Energieverbrauch und CO2-Ausstoß ihres Browserverhaltens an.

2. Performance kalkulieren, tracken und optimieren

Mit dem Performance Budget Calculator kann man sich ein Ziel setzen – zum Beispiel eine Ladezeit von 3 Sekunden – und berechnen, wie groß eine Website dafür sein darf. Anbieter wie SpeedCurve, Calibre, Sitespeed.io oder Google Page Speed tracken die Performance kontinuierlich und unterstützen bei der Optimierung.

3. Contentstrategie überdenken

Es müssen nicht immer Hintergrundvideos oder großformatige Bilder sein. Vektorgrafiken, Icons oder typografische Details sind visuell manchmal sogar spannender als hochaufgelöste Fotos und setzen Akzente. Auch Werbeanzeigen, Tracking von Drittanbietern oder Social-Media-Buttons verursachen viel Daten-Load und sind nicht immer sinnvoll oder notwendig. Gute SEO hilft zudem bei der Auffindbarkeit der Inhalte.

4. Bilder komprimieren

Für WordPress gibt es Plug-ins, die Bilder beim Upload automa­tisch komprimieren. Mit kostenlosen Tools wie smush it!, ImageOptim oder kraken.io lassen sich Bilder schnell und einfach verkleinern. Mit WebP bietet Google ein Format für komprimierte Bilder an, das kleiner ist als PNG und JPEG. Um zu verhindern, dass etwa große One-Pager bei jedem Aufruf komplett geladen werden, kann man zudem ein Lazy-Loading-Plug-in installieren, sodass Inhalte nach und nach beim Runterscrollen aufgerufen werden.

5. Fonts und Typografie optimieren

Systemschriften liegen auf jedem Rechner und verbrauchen am wenigsten Energie, schränken aber die Designoptionen stark ein. Web­fonts bieten mehr gestalterische Freiheit, werden aber auf externen Servern gehostet, sodass die Zahl der HTTP-Requests und mit ihnen die Ladezeit und der Energieverbrauch steigen. Man kann sie aber »subsetten«, das heißt, nur die Glyphen laden, die tatsächlich gebraucht werden. Zwischen Systemschriften und Webfonts liegt in Sachen Datei­größe das Variable-Fonts-Format. Embedded Fonts machen die Seite an sich schwerer, reduzieren dafür aber die HTTP-Requests. Generell sollte man die Zahl der Schriften begrenzten – vor allem bei Webfonts.

Buchtipp: »Designing for Sustainability«
Weitere Profi-Tipps gibt Tim Frick in seinem 2016 bei O’Reilly Media erschienenen Buch »Designing for Sus­tainability. A Guide to Building Greener Digital Products and Services«
(336 Seiten,25 US-Dollar, ISBN 978-1491-93577-4).

Mehr Tipps für Sustainable Web Design – inklusive Manifesto – gibt es auch hier https://sustainablewebdesign.org/ sowie in dem gleichnamigen Buch von Tom Greenwood.

»This is a solar-powered website, which means it sometimes goes offline«

Das Team des spanischen »Low-Tech Magazine« hat eine abgespeckte Version seines Onlinemagazins gestaltet, die es selbst hostet und mit Solarstrom betreibt

● Beim »Low-Tech Magazine« ist der Name Programm. Das Redaktionsteam hinterfragt nicht nur blinde Technikgläubigkeit und berichtet über Nachhaltigkeitsthemen, sondern es hat auch eine mit Solarstrom betriebene Version seiner Website aufgesetzt. Diese wird von einem Apartment in Barcelona aus selbst gehostet, wo auch der Strom gewonnen wird. Scheint an der Costa Brava länger nicht die Son­ne, geht die Seite irgendwann offline. Das kommt allerdings ziemlich selten vor. Mit der Website will das »Low-Tech Magazine« aber nicht nur ein Zeichen für erneuerbare Energien setzen, sondern auch darauf aufmerksam machen, wie man Inhalte weniger datenintensiv aufbereiten kann. Dafür nutzten die Designer und Entwickler verschiedene Methoden:

1. Static Website

Statt bei jedem Aufruf neu generiert zu werden, existiert die Website als ein Set von Dokumenten auf der Harddisk des Servers. Sie ist immer da – nicht erst, wenn ein Nutzer sie aufruft. Dadurch benötigt sie keine kontinuierliche Rechen­leistung – und daher weniger Energie.

2. Dithered Images

Mithilfe eines alten Komprimierungsverfahrens (Dithering) hat das Team die Dateigröße der Bilder enorm reduziert. Das war besonders wichtig, da die Redaktion nicht auf eine visuell ansprechende Bebilderung verzichten wollte. Dafür konvertieren die Designer alle Motive in Schwarzweißdaten mit vier Graustufen und kolorieren diese in Farben nach, die sie den verschiedenen Themenrubriken zuwiesen. Dafür nutzen sie die nativen Bildmanipulationsmöglichkeiten des Browsers. Durch diese Methode verbrauchen die Bilder auf der Website etwa zehnmal weniger Energie als vorher.

3. Default Typeface und kein Logo

Um Requests an den Server und Energie für Datenspeicherung einzusparen, entschied sich das Team dafür, keinen Custom Font zu verwenden und auch auf die font-family-Definition in CSS zu verzichten, sodass Besucher der Website die Default-Schrift ihres Brow­sers angezeigt bekommen. Statt eines Logos gibt es eine einfache Wortmarke mit einem visuellen Twist: Der Bindestrich wurde durch einen nach links zeigenden Pfeil ersetzt.

4. Kein Tracking von Drittanbietern, keine Werbung, keine Cookies

Da die Website auf einem eigenen Ser­ver gehostet wird, braucht es keine Analysesoftware von Drittanbietern wie Google Analytics. Das Team kann das Nutzerverhalten auf der Website in den Ser­verdaten selbst einsehen. Ebenfalls unnötig sind Cookie-Warnungen, da die Website keine verwendet.
Dieses Beispiel ist natürlich ein Extrem, aber es zeigt, was möglich ist, wenn man sich ein bestimm­tes Ziel setzt. Neben der Solar-Seite betreibt das Ma­gazin weiterhin eine reguläre Website. Diese ist auch recht reduziert gestaltet – und sieht interessanterweise viel langweiliger aus als die Low-Energy-Variante. Weitere Informationen zur Hardware sowie zum Webdesign samt Link zum Quellcode gibt es unter https://is.gd/lowtechmag 

»Energieeffizienz muss genauso zur Designethik gehören wie Barrierefreiheit«

Wir haben den Web- und UX-Experten Niklas Jordan gefragt, was jeder von uns tun kann, um digitale Produkte nachhaltiger zu gestalten und zu nutzen. Das Interview zum Thema Sustainable Web.

Sustainable Web: Tools, Websites und weitere Tipps

Eine vollständige Linkliste der genannten Websites und Tools zum Thema Green Web findet ihr bei uns gesammelt.

Dieser Artikel stammt aus der PAGE 12.2019, die Sie als PAGE+-Abonnent kostenlos herunterladen können.

12.201

PDF-Download: PAGE 12.2019

Produkt-Details anzeigen

Portfolio Design: Tipps und Tools ++ Game Design: Trends, Aus- & Weiterbildung ++ Nachhaltiges Webdesign ++ Kommunikation für die Generation Z ++ Making-of: Anzeigetafeln mit E-Paper ++ UX Research in der Praxis ++ E-Learning für Designer ++ Employer Branding für die Kreativbranche

8,80 €

AGB