How-To

Grüner gestalten: So geht nachhaltiges Webdesign

(Abbildung: Shutterstock / NeMaria)

Der ökologische Fußabdruck unserer Onlineaktivitäten wächst stetig. Doch kaum ein Nutzer denkt beim Surfen an riesige Rechenzentren, die Daten hin und her ­schieben. Können wir mit einem anderen Ansatz in der Webentwicklung das Internet umweltfreundlicher gestalten? Die Antwort in unserem Schwerpunkt Klima und Tech.

Wäre das Internet ein Land, es würde Platz 6 der Liste der ­Länder mit dem größten CO₂-Ausstoß belegen. Inzwischen ­haben ­unsere Onlineaktivitäten einen ähnlich großen ökologischen Fuß­abdruck wie der globale Luftverkehr. Doch im Alltag werden wir als Nutzer nur selten mit dieser Tatsache konfrontiert. Um ­unseren ökologischen Fußabdruck zu messen, geben wir an, wie viele Kilometer wir im Jahr zurücklegen, wo wir wohnen und wie wir uns ernähren. Doch wie viel wir im Internet surfen, wie ­lange wir streamen oder chatten, wird kaum berücksichtigt. Denn all die Bits, die wir im Internet abrufen, landen nicht auf ­unserer persönlichen Stromrechnung, sondern auf der der ­riesigen Rechen­zentren, die uns beispielsweise Katzenvideos weltweit jederzeit verfügbar machen. Rechenleistung, Kühlung und unterbrechungsfreie Stromversorgung von Tausenden Servern kosten täglich Unmengen an Energie: Die Kommunikations- und Informations­technologie hat im Jahr 2017 allein in Deutschland ungefähr 47 Milliarden Kilowattstunden Strom verbraucht, Tendenz ganz klar steigend.

Die Youtube-Startseite, bestehend aus Vorschaubildern, Werbeanzeigen, Popups, großem ­Headerbild und vielem mehr ­verbraucht hingegen deutlich mehr CO2 pro Aufruf. (Screenshot: Youtube)

Die Youtube-Startseite, bestehend aus Vorschaubildern, Werbeanzeigen, Popups, großem ­Headerbild und vielem mehr ­verbraucht hingegen deutlich mehr CO2 pro Aufruf. (Screenshot: Youtube)

Der Klimakiller im Web hat also einen Namen: Bit. Je mehr ­Daten in Form von Codezeilen, Bilddateien und so weiter ­transferiert werden, desto höher ist der Energieverbrauch und damit der CO₂-Ausstoß einer Website. Der Aufruf der ­Wikipedia-Startseite, einer Seite mit wenigen Stilelementen und kleinen Bildern, verbraucht zum Beispiel 0,59 Gramm CO₂. Die Youtube-Startseite, bestehend aus etlichen Vorschaubildern, Werbeanzeigen, Popups, großem Headerbild und vielem mehr verbraucht hingegen mehr als die vierfache Menge CO₂: 2,88 Gramm pro Aufruf.

Jetzt das t3n Magazin abonnieren!

Green Hosting, bei dem die Hoster der Website mit Ökostrom arbeiten, auf effiziente Klimatisierung setzen und ein eigenes Rechenzentrum betreiben, sorgt für Schadensbegrenzung. In Deutschland ist dies zum Beispiel bei Biohost oder Mittwald möglich. Doch reicht das aus, um das entstandene CO₂ zu kompen­sieren? Oder sollten wir nicht viel stärker an der Ursache, also dem riesigen Datenverkehr, arbeiten? Immer mehr ­Webdesigner und entwickler beschäftigen sich mit der Frage, wie wir auch im digitalen Raum nachhaltig handeln können. Denn der ­schlichte Aufruf an die Nutzer, weniger zu surfen, ist nicht nur wenig erfolgsversprechend – die Branche muss sich ihrer Verant­wortung ebenso bewusst werden und Ursachenbekämpfung betreiben. Zum Beispiel durch die Entwicklung schlanker, nachhaltiger Websites, die nicht unzählige Bits beim Laden verbrauchen und noch dazu die Nutzerfreundlichkeit erhöhen.

Starthilfe – was macht eure Website und was kann die Konkurrenz?

  • Auf ecograder.com können Websites auf verschiedene Kriterien hin untersucht werden. Seitengeschwindigkeit und Nachhaltigkeit gehen dabei Hand in Hand.
  • Auf websitecarbon.com kann der CO2-Ausstoß von Websites anhand der übermittelten Datenmenge, Energiequelle des Rechenzentrums und den monatlichen Besuchern gemessen werden.
  • Auf clickclean.org seht ihr, welche populären Seiten und Apps mit grünem Strom betrieben werden.

Eine durchschnittliche Website ist inzwischen zwei ­Megaby­te groß. Vor drei Jahren war es noch knapp ein Megabyte. Doch geht es überhaupt kleiner, ohne auf schickes Webdesign und gute User-Experience zu verzichten?

Jack Lennox hat sich dieser Frage angenommen und eine WordPress-Website über Nachhaltigkeit im Web mit einer Größe von nur sechs Kilobyte entworfen: sustywp.com. Die Zutatenliste: keine Bilder, keine Navigationsleiste, Systemschriften, die bereits lokal installiert sind und nicht extra übertragen werden müssen, ein Menü, das als eigenständige Seite lädt und durch zwei ­Designelemente wie ein Popup wirkt, ein minimisiertes und komprimiertes CSS. Herausgekommen ist eine wunderbar schlanke, barrierefreie und reduzierte Website mit schneller Ladezeit und gutem Suchmaschinen-Ranking. Eine Website, die zeigt, wie viel Performance man gewinnt, wenn man sich auf das Wesentliche zurückbesinnt. Adam Silver, Interaction-Designer und Inspirationsgeber von Jack Lennox, schreibt dazu auf seinem Blog: „Das schnellste Feature ist eines, das wir gar nicht bauen mussten“.

Prinzipien des nachhaltigen Webdesigns

Eine Unternehmenswebsite wird noch immer als digitale Visiten­karte oder Aushängeschild im Web gesehen. Also etwas, das nicht nur funktionieren muss, sondern auch Eindruck machen soll. Aus Sicht der Nutzer sind zunächst aber folgende Kriterien für die Nutzung einer Website entscheidend:

  1. Seitengeschwindigkeit – wie schnell lädt die Seite?
  2. Zielfindung – wie einfach finde ich das, was ich suche?
  3. Responsive – wie gut funktioniert die Seite auf meinem Gerät?
  4. Usability – wie schnell finde ich mich auf der Seite zurecht?
  5. Aussehen – spricht mich die Seite optisch an?

Diese Hierarchie zeigt, dass beim Webdesign vor allem Geschwindigkeit und Einfachheit eine große Rolle spielen. Eine optisch sehr ansprechende Seite ist sinnlos, wenn der Nutzer sie aufgrund ­langer Ladezeiten sofort wieder verlässt oder die mobile Darstellung ­katastrophal ist. Informationen sollen schnell laden und einfach gefunden werden. Deshalb ist ein schlankes ­Webdesign nicht nur umweltfreundlich, sondern kommt auch der User-­Experience und somit der Anzahl der gewonnen Leads entgegen.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

6 Kommentare
Carl Bednirz

Wow, toller Beitrag!! Endlich wird das Thema mal aufgegriffen, da vielen völlig unbekannt ist welchen CO2 Footprint das Internet & Co. hinterlässt.

Ich von Surfgreen.dev bin als Fullstack Developer auf die Entwicklung nachhaltiger und grüner Webapps und Websites spezialisiert.

Mit surfgreen.dev können Websites bezüglich ihrer Nachhaltigkeit getestet werden, zwar erst in einer frühen Alpha version, aber es klappt.

Danke nochmals für den Beitrag und das Aufgreifen dieses Themas

Antworten
Johan
Johan

Ich finde den Beitrag klasse! Es ist wichtig für Klimaschutz einzustehen und so kann sich jeder darüber bewusst werden wofür er CO2 freisetzt. Aufklärung statt fordern finde ich besser.
Wenn jeder Teilnehmer der Fridays for Future Bewegung auf den Bildtransfer per Whatsapp, Facebook und auch auf die Youtube-Videos verzichtet wie viele Urlaube kann ich dann wohl mit dem Flugzeug machen?
Entsetzt bin ich allerdings auch über Carl Bednirz Kommentar, der eine Webseite betreibt die beim Aufruf 4,29 g CO2 ausstößt und hier von Nachhaltigkeit und grünen Webapps spricht.

Antworten
Wolfgang Einhorn
Wolfgang Einhorn

Die ganze Anstrengung produziert doch noch mehr CO2-Ausstoß. Natürlich muss man sich Gedanken um das Klima machen, aber nicht in solchen Dimensionen. Was zur Zeit abgeht ist der Wahnsinn. Man könnte sagen, die Menschheit, oder noch genauer gesagt, die Deutschen, sind in Panik. In so einem Zustand sollte man keine Entscheidungen treffen. Wie z.B. Ausstieg aus der Atomenergie. Statt das ganze Geld in die Energie-Wende zu stecken, hätten wir lieber in die Forschung der Sicherheit der Atomkraftwerke und die Wiederverwertung der Brennstäbe investiert, vermutlich stünden wir heute viel besser da.
Selbst, wenn wir auf alles verzichten würden, und wie im Mittelalter weiter leben, werden wir den Klimawandel, vermutlich, um 0,001 % verlangsamen, am Ende kommt es trotzdem wie es kommen muss. Der Wandel der Klima besteht schon seit der Entstehung der Erde.
Ein schönes sonniges WE wünsche ich noch :)

Antworten
cenco

Super Beitrag vielen Dank!

Antworten
MFDEZ
MFDEZ

Danke für diesen Beitrag! Die Seite „websitecarbon.com“ wird hier empfohlen, auf dieser Seite wird unten „trees for life“ als Anlaufstelle zum Bäumchenpflanzen genannt. Ist jemandem mal aufgefallen, wie schlecht die trees for life Seite bei websitecarbon.com abschneidet? Das ist peinlich finde ich. Ich habe mal eine Mail an trees for life geschickt mit diesem Hinweis. Bin gespannt ob ich eine Antwort bekomme!

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung