13 Schritte zu einer nachhaltigen Webseite

You are currently viewing 13 Schritte zu einer nachhaltigen Webseite

Du hast oder möchtest eine Webseite? Und möchtest diese möglichst nachhaltig gestalten? Dann hast du das richtige Eckchen des Internets gefunden (yay). Das Internet verbraucht viel Strom, stösst gleich viel CO2 aus wie der globale Flugverkehr und muss darum dringend nachhaltig gestaltet werden. Ich zeige dir, wie du genau das in 13 Schritten für deine bald nachhaltige Webseite tun kannst.

Stromfresser Internet

Tickets gleich auf dem Handy vorzeigen, anstatt auszudrucken, Online-Konferenzen, Emails statt Briefe – die Digitalisierung spart enorm viel Papier ein. Was bedeutet, dass weniger Bäume für die Papierindustrie gefällt werden müssen. Bäume, die CO2 wieder in O2 umwandeln könnten, hätten wir sie nicht gerade gefällt. Bis vor ein paar Jahren hab ich mich also gar nicht gefragt, ob denn die digitale Welt wirklich nachhaltiger ist. Klar, ich hab Ökostrom zuhause. Aber das Internet? Kommt aus dem LAN-Stecker (ääähm, ja, das war ungefähr so weit, wie ich gedacht hatte, bis ich zu recherchieren anfing).

Wenn man nämlich nun dieses LAN-Kabel zurückverfolgt landet man bei Hunderttausenden von Servern auf der ganzen Welt. Und damit bei dem riiiiiiesigen Stromfresser Internet, denn diese Server werden mit Strom betrieben. Ready für ein paar wachrüttelnde Zahlen?

Die Schattenseite der Digitalisierung in Zahlen

  • digitale Geräte brauchen ca. 12 % Prozent des globalen Strombedarfs
  • Wäre das Internet ein Land, wäre es auf Platz 6 beim CO2 Ausstoss
  • 830 Millionen Tonnen CO2 werden järhlich durch die Internetnutzung ausgestossen, das ist gleich viel wie der weltweite Flugverkehr
  • “Wir produzieren jeden Tag 500 Millionen Tweets. 294 Milliarden E-Mails. Vier Milliarden Gigabyte an Facebook-Daten. 720.000 Stunden YouTube-Videos.“ so Melvin Vopson
  • Das Streamen von Filmen und Musik verbraucht jährlich mehr als 200 Milliarden Kilowattstunden Strom.

Geschockt? Ich auch. Die gute Nachricht: Es gibt immer eine Alternative. Egal ob Smartphone, Tomate oder Webseite – es gibt für fast alles unterdessen eine nachhaltigere Version. Ich nutze beispielsweise ein reparierbares Shift-Phone, esse Biotomaten aus dem Garten und mache nachhaltiges Webdesign.

Aber privat kannst du viel tun, wenn du im Internet unterwegs bist. Nutze eine Suchmaschine, die datenschutzfreundlich und nachhaltig ist (ich nutze qwant.com), miste deine Daten aus und wenn du eine Webseite hast, kommen hier ganz viele Tipps, wie du sie ebenfalls nachhaltiger machen kannst.

Nachhaltiges Webdesign in 13 Schritten

1. Nachhaltiger Webhost mit Ökostrom

Hosts, die Ökostrom nutzen, gibt es einige, ein paar schreiben sich sogar Nachhaltigkeit gross auf die Fahne – am besten suchst du nach einem Host, der möglichst nah bei dir ist – sprich im gleichen Land oder vielleicht im Nachbarland. Denn Übersee verbraucht mehr Daten und macht die Geschichte mit dem Datenschutz wieder komplizierter.

2. Wordpress Theme

Auf Wordpress gibt es tausende von verschiedenen Themes. Leider gibt es keinen Filter, mit welchem nachhaltige WP-Themes herausgefiltert werden können, aber mithilfe von Reviews findet man schnell heraus, wie gut das Theme bei folgenden Punkten abschneidet:

  • Effizienz und Usability (klare, einfache und übersichtlich gestaltete Themes)
  • Ladegeschwindigkeit (je leichter die Seite – sprich weniger Daten – desto schneller ist sie auch)
  • SEO (gewisse Themes haben schon gewisse, optimalere Einstellungen für SEO)
  • Kompabilität (ein gutes Theme lässt sich mit vielen Plugins nutzen)
  • Responsive Design (Webseiten sollten sich unbedingt auf verschiedene Formate anpassen lassen, für Handy, Tablet und PC)

Diese Faktoren sind nötig, damit die Seite möglichst wenig Strom braucht, die Kund:innen klar und direkt führt, schnell und einfach gefunden und von verschiedenen Geräten und unterschiedlichsten Menschen gut genutzt werden kann. Ich persönlich nutze meist das Theme OceanWP und bin sehr zufrieden damit.

3. Bilder und Videos

Momentan ist es trendy, ein Video als Hintergrund zu haben. Mag ja ganz schick wirken, aber ganz ehrlich, wenn das dann selbst bei der Mobil-Version geladen wird, braucht das auch unterwegs viele (mobile) Daten. Aus Nachhaltigkeitsgründen ist es also besser, nicht zu viele und zu grosse Videos und Bilder auf der Webseite zu haben.

Bildergrösse anpassen

Ich mache meine Fotos prinzipiell selbst, verkleinere sie dann und lade sie dann auf Wordpress hoch. Rein theoretisch könnte man natürlich auch die super hochauflösenden Dinger ins Netz stellen. Aber das braucht enorm viel Speicherplatz, vor allem, wenn du einen Blog hast, und immer weitere Fotos dazukommen.

Dazu musst du wissen, wie gross das Bild in deinem Theme auftaucht. Und so klein machst du dann dein Bild. Dazu gibt es verschiedene kostenlose Programme (z.B. Photoscape oder Gwenview).

4. Texte

Ich lese sehr gerne. Neben Sachbüchern darf es gerne auch mal ein Roman sein. Aber nicht auf deiner Webseite. Nicht einmal, wenn du Schriftsteller:in bist. Denn dann will ich deinen Roman in Buchformat haben. Nicht auf deiner Webseite.

Denn ja, Buchstaben brauchen natürlich nicht so viel Energie im Vergleich zu Bildern oder Videos. Aber wenn wir schon aufräumen, dann richtig. Überlege dir, wie viele Seiten  und wie viel Text wirklich nötig ist. (Ich sollte diesen Artikel auch gleich nochmals durchgehen und alles streichen, was nicht wirklich nötig ist).

Das ist übrigens auch für deine Positionierung super…

Wenn deine Texte kurz und knackig sind, die Bilder schnell geladen, ist das nicht nur nachhaltiger, sondern auch für deine Positionierung super. Menschen wissen sofort, wofür du stehst. Sie wissen, was sie bei dir bekommen können und was nicht. Und das ist ja schliesslich das Ziel jeder Webseite.

…Und für dein SEO

Menschen & Google lieben es, wenn du nicht lange um den heissen Brei redest. Langsame Seiten mögen weder Menschen noch Suchmaschinen.

5. Social Media Frei

Auf den ersten Blick hat Social Media nichts mit nachhaltigem Webdesign zu tun. Schliesslich programmierst weder du noch ich Facebook. Wenn man aber in Betracht zieht, wie viele Daten gerade Selbstständige auf Social Media produzieren, hat es eben sehr wohl mit dem Thema zu tun. Denn was du auf deiner eigenen, nachhaltig produzierten und mit Ökostrom gehosteten Webseite hochlädst, hast du unter Kontrolle. Bei Instagram, Tiktok, Facebook & Co hast du keinen Einfluss. Ich glaube nicht, dass es Marc interessiert, wenn du ihm schreibst, dass er doch bitte sein Business ein wenig nachhaltiger gestalten möge.

Überlege dir also, was du wirklich posten willst. Kommentare, Fotos, Scrollen – all das braucht Unmengen an Energie. Weniger ist also einmal mehr mehr 🙂

Mann kann übrigens auch selbstständig und komplett Social Media frei arbeiten… Alternativen gibt es dazu genügend.

6. SEO

Suchmaschinenoptimierung ist eigentlich Optimierung für Besucher:innen. Denn je schneller die Besucher:innen das finden, was sie wirklich suchen, desto weniger Suchanfragen, aka Strom braucht es.

Eine klare Positionierung, ALT-Texte bei den Bildern, gut lesbare Texte sind ein einige von vielen Dingen, die du beachten solltest, damit deine Webseite gut rankt und schnell gefunden wird. Laura Filz wäre hier die Expertin, wenn es um nachhaltiges SEO geht.

7. Inklusion und Barrierefreiheit

Seit ich selber den Doppelpunkt konsequent auf meiner Webseite einsetze und auch beim Sprechen versuche, geschlechterneutral zu reden, fällt es mir auf, wie viele grosse Webseiten, die noch immer nur die männliche Version nutzen. Darunter die Post und die SBB. Ich wüsste nicht, warum Männer mehr Zug fahren sollten…

Mit dem Doppelpunkt oder Sternchen* kannst du schon mal alle Menschen ansprechen. Oder du nutzt einfach eine gender-neutrale Formulierung.

Bilder kannst du ganz einfach mit Alt-Attributen versehen, sodass er von Screenreadern vorgelesen werden kann, wenn das Bild zu lange nicht geladen werden kann oder aber eine Sehbeeinträchtigte Person deine Webseite besucht.

Auch bei Videos kann man Untertitel und Transkripte einfügen. Das kann auch von Vorteil sein, wenn jemand irgendwo ohne Headset ein Video angucken will, aber den Ton auf Stumm haben möchte…

Ausreichend Kontrast im Design ist für Menschen mit eingeschränktem Sehvermögen super wichtig. Auf barrierefreies.design kannst du deine Seite testen und noch viel mehr zum Thema erfahren.

8. Ehrlichkeit & Transparenz

Marketing kann mit Worten und auch mit Design ziemlich fies betrieben werden. Mithilfe von psychologischen Triggern und sogenannten Dark Patterns, können Besucher:innen manipuliert werden, etwas zu tun, was sie vielleicht gar nicht wirklich wollen.

So können beispielsweise zusätzliche Kosten erst ganz am Ende des Kaufprozesses eingeblendet werden, zeitlicher Druck aufgebaut (nur noch 3 auf Lager, was beispielsweise bei digitalen Produkten völlig absurd ist) oder beim Cookie-Banner die „Ablehnen“ Option fast schon unsichtbar ist.

Auch mit achtsamen und ethischem Marketing kann man Geld verdienen 😉 (und vielleicht auch besser schlafen und zufriedenere Kunden haben).

9. Inhalt & Business

Ist das, was du mit deinem Business betreibst auch nachhaltig? Falls ja, super. Ansonsten kannst du dir auch noch die Frage stellen, wie du nicht nur deine Webseite, sondern dein ganzes Business nachhaltiger gestalten kannst.

Danach deine Inhalte auf der Webseite anpassen und dich darüber freuen, dass du der Welt und vor allem zukünftigen Generationen etwas Gutes tust.

10. Schriften

Wie gut lesbar ist deine Schrift? (Hier könnte ich noch was verbessern, das weiss ich – meine Überschriften-Schrift ist nicht gerade leserfreundlich… aber sooo schön). Nebst der Lesbarkeit ist auch die Verfügbarkeit ein Thema: Web Safe Fonts, die auf allen Systemen vorhanden sind, müssen nicht geladen werden. Ansonsten WOFF oder WOFF2 Formate und nur so wenig verschiedene Schriftschnitte wie wirklich nötig ist, nutzen.

11. Datenschutz

Datenschutz ist nicht nur aus ökologischer sondern auch aus sozialer Nachhaltigkeit ein wichtiges Thema (ja, ich weiss, die ganzen Cookie-Banner nerven aber auch ganz schön). Weniger Cookies = Weniger Daten.

Möglichst wenig tracken verbraucht weniger Strom und wenn es doch nötig ist, nicht mit Datenriesen, die diese Daten selbst auch nutzen (wie Google Analytics). Es gibt beispielsweise Matamo als Alternative.

Beim Cookie-Banner kannst du zusätzlich darauf achten, dass er nicht mit sogenannten Dark-Pattern arbeitet, in dem der Ablehnen Button „versteckter“ erscheint. Annehmen und Ablehnen sollten gleichgewichtige Optionen sein.

12. Open Source

Die ausführliche Erklärung, warum Open Source nachhaltig ist, findest du in diesem Artikel. Kurz gefasst kann ein frei zugänglicher Quellcode zum Beispiel viel länger aktualisiert werden, als es üblicherweise für ein Unternehmen rentabel ist. Und mit aktueller Software, die vor allem auch immer wieder Sicherheitsupdates bekommt, lässt sich auch Hardware viel länger nutzen. Dadurch entsteht dann weniger Elektroschrott.

Wordpress, viele Themes und Plugins werden unter der Open Source Lizenz veröffentlicht und erfüllen also schon mal gute Vorraussetzungen.

13. Ladegeschwindigkeit

Um die Ladegeschwindigkeit zu erhöhen, habe ich oben schon vieles zu Bildern, Texten etc. geschrieben. Zusätzlich kannst du Caching verwenden. Dabei werden bestimmte Daten der Webseite temporär gespeichert und müssen nicht jedes Mal neu übertragen werden. Das wiederum macht die Seite schneller und umweltfreundlicher.

Alles erledigt? Dann teste deine Webseite

Du möchtest gerne wissen, wie nachhaltig deine oder eine andere Webseite ist? Dann verlinke ich dir hier ein paar coole Tools, mit denen du das in sekundenschnelle testen kannst:

Falls du bei der Erstellung deiner nachhaltigen Webseite Hilfe brauchst, darfst du mich gerne kontaktieren. Natürlich auch wenn du noch eine Frage zum Thema hast oder dich etwas spezifisch weiter interessieren würde – das taucht dann vielleicht bald als weiterer Blogartikel auf.

Post per Brieftaube Buchfink

Du erhältst liebevolle Newsletter mit Tipps und Tricks zu (nachhaltigen) Webseiten, einem tollem Grafikauftritt und ab und zu ein paar achtsame Marketing-Hinweise.

Du kannst dich jederzeit mit nur einem Klick wieder aus dem Newsletter austragen.
Weitere Infos findest du in der Datenschutzerklärung.