Umweltfreundlichkeit im Design

Less is more beads message typography

Grünes digitales Design - Wie passen Nachhaltigkeit und UX-Design zusammen?

Vielen Menschen ist gar nicht bewusst, dass alles, was wir im Internet tun auch einen negativen Effekt auf die Umwelt haben kann. Der CO2-Fußabdruck des Internets ist riesig: Wenn das Internet ein Land wäre, wäre es unter denen mit der höchsten CO2-Bilanz. Bisher beschäftigen sich allerdings noch relativ wenige Web-, Interface und UX Designer:innen damit, wie digitale Produkte und Services nachhaltiger gestaltet werden können. Da nehme ich mich selbst nicht aus – bei der Recherche für diesen Artikel ist erst aufgefallen, wie viel Potential meine eigene Website da noch mitbringt.

Dabei kann man mit umweltfreundlichem Design sogar zwei Fliegen mit einer Klappe schlagen. Denn viele Techniken von grünem UX-Design tragen auch zu einer besseren Nutzer:innenfreundlichkeit bei. Je nachdem aus welchem Bereich du kommst, klingen einige der Tipps für dich vielleicht sehr technisch, vielleicht helfen sie dir aber dabei, mit dem Entwicklungsteam ins Gespräch zu kommen.

Wir starten mit den einfachen und relativ schnell gemachten Dingen, damit ihr sofort loslegen könnt :)

1. Bestelle Newsletter ab, die du nicht mehr liest.

Denn alles, was hin und her geschickt wird, verbraucht Ressourcen.

2. Gestalte die Anhänge einer E-Mail so klein wie möglich

PDFs mit vielen Bildern kann man mit Online-Tools wunderbar komprimieren. Oder sende einen Link.

3. Bestandsaufnahme

Ermittle den CO2-Fußabrdruck deiner Internetseite. Dafür kannst du beispielsweise folgendes Werkzeug verwenden: websitecarbon.com

Analysiere mit Page Speed Insight den Inhalt deiner Webseite und schau dir Vorschläge zur Verbesserung der Geschwindigkeit an.

Dadurch bekommst du erste Informationen zu der Leistung und dem ökologischen Einfluss einer Webseite.

4. Unnötiges entfernen

Je mehr Daten hoch- und runtergeladen und zwischen Servern hin- und hergeschickt werden müssen, desto höher ist der CO2-Verbrauch. Denn viele Daten bedeuten viel Stromverbrauch und viel Stromverbrauch bedeutet eine hohe Emission.

Lösche also Dinge, die nicht essentiell sind. Durch zu viele Zusatzangebote auf deiner Webseite kann die Ladegeschwindigkeit drastisch erhöht werden. Es kann helfen, übermäßige Add-ons von deiner Seite zu entfernen. Überprüfe regelmäßig die Plug-ins, Mediadateien und wenig genutzte Funktionen. Wie sinnvoll sind sie und stellen sie wirklich einen Mehrwert für die Nutzer:innen dar?

Mit einem Performance Budget Calculator (z.B. www.performancebudget.io) kann man diesen Aspekt schon am Beginn des Designprozesses mitdenken. Man setzt sich ein festes Ziel – wie schnell soll die Webseite unter bestimmten Bedingungen geladen sein (z.B. innerhalb von vier Sekunden bei 3G). Daraus ergibt sich dann eine maximale Dateigröße für die Seite und man muss sich entscheiden, welche Elemente man verwenden möchte.

Durch eine klare und aufgeräumte Webseite sorgst du indirekt auch für eine bessere Lesbarkeit und eine einfache Navigation, denn dies ermöglicht es Nutzer:innen, schnell und einfach zu finden, wonach sie suchen und führt damit auch zu einer höheren Zufriedenheit auf Seite der Nutzer:innen. Und damit kommen wir zum nächsten Punkt:

5. Navigation verbessern und Bedienfreundlichkeit erhöhen

User:innen sollten möglichst mit ein oder zwei Klicks zu dem gesuchten Inhalt gelangen. Das vermeidet Ladezeiten und freut die Nutzer:innen. Um eine bessere Navigation zu ermöglichen, sollten folgende Punkte beachtet werden:

  • klar benannte Menüs
  • klare und hilfreiche Kategorien und Unterkategorien
  • eine leicht zu findende und leicht zu bedienende Suchfunktion
  • Farben und Kontraste können helfen, die Navigation zu vereinfachen.

6. Benutze weniger Schriften

Es gibt den wachsenden Trend, individuelle Schriften zu nutzen, um sich abzugrenzen. Dies führt aber zu einer höheren Datenlast.

Wenn es um Schriften geht, ist weniger sowieso mehr. Schau, ob du vielleicht einfach weniger einsetzen kannst.

Um den Text zugänglicher zu machen, ist es günstig, Google Fonts (https://fonts.google.com/) zu nutzen – die Schriften können von jeder Person und auf jedem Gerät gelesen werden und reduzieren den Datentransfer.

7. Datenmenge reduzieren

Die Dateigröße von Internetseiten ist in den letzten Jahren immer mehr angewachsen. Das liegt vor allem daran, dass die Nutzung von Fotos und Videos extrem zugenommen hat.

Bilder und Videos benötigen den meisten Platz und haben oft eine viel höhere Qualität als notwendig. Wenn du Videos verwendest, gestalte sie so kurz wie möglich, mit einer niedrigeren Auflösung und komprimiert. Lass den Nutzer:innen die Wahl, ob sie das Video anschauen möchten: Vermeide automatisches Wiedergeben.

Zum Komprimieren von Bildern und Videos kannst du Werkzeuge nutzen, um die Größe des bildlichen Inhalts zu reduzieren. z.B: tinypng, ImageOptim oder Smush.it.

Das Nutzen von Vektorgrafiken ermöglicht es außerdem, Bilder zu jeder Größe zu skalieren, ohne Qualität einzubüßen.

Du kannst auch unterschiedliche Bildgrößen für unterschiedliche Geräte anbieten, um noch mehr einzusparen.

8. Wiederverwenden

Verwende Bilder und Videos noch einmal, ohne dass es monoton wirkt. Dafür kannst du beispielsweise CSS3-Filter und Overlay-Techniken nutzen, um abwechslungsreiche Varianten von Bildern zu kreieren. Das gleiche funktioniert auch mit Videos :)

9. Nutze Grünes Hosting

Eine der besten Möglichkeiten, wie du deine Webseite umweltfreundlicher gestalten kannst, ist es, auf Grünes Hosting umzusteigen. Damit ist ein Host gemeint, der sich durch nachhaltige Energien, also Ökostrom aus erneuerbaren Quellen, speist. Weniger empfehlenswert sind Ökostrom-Anbieter:innen, welche noch mit Kohle- und Atomstrom arbeiten.

Unter The Green Web Foundation kannst du eine Liste von Grünen Hostinganbieter:innen finden.

In folgendem Artikel von Utopia findet sich auch eine differenzierte Übersicht über die Angebote.

Falls du dann noch ein grünes Hostingangebot finden kannst, was zusätzlich auch noch physisch nah an der Mehrheit deiner Nutzer:innen ist, ist das noch besser. Denn es braucht mehr Energie, Daten über eine größere Distanz zu senden. Ich hoste bei Hetzner (https://www.hetzner.com/de/unternehmen/umweltschutz/), die Ökostrom nutzen und deren Rechenzentren in Deutschland stehen.

10. Cloud-Hosting

Vielleicht sind Cloud-Lösungen eine gute Variante für dich? Diese sind gesamtsichtlich umweltfreundlicher als konventionelle Datenzentren. Dadurch können auch die laufenden Kosten reduziert werden, denn man bekommt ein komplettes Rundum-Paket und zahlt nur für das, was man auch nutzt.

11. Aus geringerer Entfernung senden

Mit einem content delivery network (CDN) kann man Daten aus geringerer Entfernung senden. Je nachdem, von welchem Ort aus die Seite angefordert wird, arbeitet dann ein anderes Datenzentrum und stellt die Daten bereit. Das führt zu einem geringeren Energieverbrauch. Ein CDN funktioniert wie ein Proxy-Server, welcher eine Kopie der Daten speichert, die Nutzer:innen vorher schon einmal angefordert haben (die Daten müssen also nicht noch einmal geladen werden). Dies reduziert die Last des eigenen Servers und führt zu einer schnelleren Webseite.

12. Erlaube Browser-Caching

Damit können wiederkehrende Besucher:innen die Webseite schneller laden, da nicht alle Daten noch einmal komplett vom Server heruntergeladen werden müssen, sondern von einem lokalen Cache geladen werden können.

13. WordPress Plugins

Zum Schluss haben wir noch ein paar Tipps für die Nutzung von WordPress.
WordPress ist die größte Blogging-Plattform - 1/3 aller weltweiten Webseiten werden aktuell mit Wordpress betrieben. Welche Möglichkeiten gibt es, die Arbeit mit WordPress klimafreundlicher gestalten?

Zum einen kannst du umweltfreundlichere WordPress-Themes nutzen und Plug-ins ausmisten. Nutze das Query Monitor-Plug-in – mit diesem kannst du entsprechende Plug-ins, Themes und Funktionen aufspüren und deine Seite verbessern. Du kannst auch den Plugin Performance Profiler nutzen, um zu überprüfen, welches Plug-in die meisten Ressourcen benötigt.

Weitere nützliche Plugins für WordPress:

  • Smush Wordpress Plugin Ein kostenloses WP-Plugin für Bildkompression, Lazy-Load, Verbessern der Ladegeschwindigkeit und vielen weiteren nützlichen Funktionen.

  • Koko Analytics WordPress Pugin mit sehr hohen Datensicherheits-Standards und geringer Datenmenge und der Möglichkeit direkt im WordPress-Backend seine Seiten zu analysieren.

  • CSS/JS WordPress Plugins: Mittels Autooptimize, Hummingbird oder ähnlichen Plugins, kannst du dein CSS und JavaScript optimieren und komprimieren.

  • Caching WordPress Plugins: Mit W3 Total Cache oder Hummingbird als Caching Plugin erreichst du bessere Resultate bei Performance und der Datenübertragung.

Weitere tolle Tipps, um WordPress umweltfreundlicher zu gestalten, finden sich auf

Greener WP, wo sich auch ein ökologischer Nachhaltigkeits-Scanner findet.

Zusätzliche Webseiten, um auf Grünstrom und CO2-Ausstoß zu überprüfen:

  • Greenpeace ClickGreen: Finde heraus, ob eine App mit Erneuerbaren Energien betrieben wird
  • Carbonalyser: Firefox-Add-on von The Shift Project – damit lässt sich der Stromverbrauch und die Treibhausgase visualisieren, die dein Internet-Browsing bewirkt

All diese kleinen Schritte können viel bewirken. Wie Helen Keller schon sagte: “Alone we can do so little; together we can do so much.”

Bildquellen: freepik

{{ message }}

{{ 'Comments are closed.' | trans }}