Grüne Websites

Es freut mich, dass du dich für grüne Websites interessierst.

Was sind grüne Websites?

Grüne Websites sind solche, die dem Umweltschutzgedanken bestmöglich Rechnung tragen.

Wie kann eine Website dem Umweltschutzgedanken entsprechen?

Eine Website kann zumindest in einem Punkt umweltfreundlich sein: Wenn sie so wenig Strom wie möglich benötigt und dieser noch dazu aus entsprechenden Quellen stammt („Grüner Strom“).

Und wie kann eine Website wenig Strom benötigen?

Das geht, indem so wenig Daten wie möglich übertragen werden und so wenig Code wie möglich ausgeführt wird. Erreicht werden kann das durch entsprechenden Programmcode, den Umständen angepasste Ressourcen (Bilder, Grafiken, Videos, etc.), sowie einer gewissen Reduktion.

Was ist überhaupt eine Website?

Dir ist vermutlich der Begriff „Homepage“ geläufiger, denn er wird vielfach synonym für „Website“ verwendet - manche sagen auch „Webseite“ dazu. Jedoch ist die „Homepage“ nur ein Teil einer „Website“, nämlich deren „Startseite“, eine von mehreren „Webseiten“ in einer „Website“ („site“ bedeutet so viel wie „Stelle, Standort, Stätte“).

Was ist „grün“ an meinen Websites?

Grüner Strom

Eine eigene Photovoltaik-Anlage für mein Büro (und letztlich für unser ganzes Haus) ist in Planung, deren Umsetzung jedoch von meinem geschäftlichen Erfolg und der Verfügbarkeit abhängig. In der Zwischenzeit verwende ich zertifiziert grünen Strom (aktuell: 100% Wasserkraft)
Meine Websites werden bei solchen Webhostern betrieben, die explizit auf die Verwendung von grünem Strom setzen und die vorzugsweise in Österreich beheimatet sind.

Handwerk

Ich fertige meine Websites mit einem Editor, viel Know-how und Gefühl - und verzichte auf Baukastensysteme (CMS) wie WordPress. Dadurch kann ich den benötigten Programmcode so schlank wie möglich halten.
Dazu ein paar Zahlen:
Mehr als 95% Einsparungen
Ich habe einzelne Seiten von Websites, die mit CMS erstellt worden waren, nachgebaut, um zu sehen, wie hoch das Sparpotenzial tatsächlich ist - und es ist enorm!
Mich interessierte in erster Linie der „Programmcode“ als solcher - also HTML, CSS, JS.
Eine Eigenschaft, die CMS offenbar grundsätzlich mitbringen, ist, sehr viel JS-Code zu implementieren - ob nun gleich in der HTML-Datei oder als Referenz darin.
Eine zweite ist, den HTML-Code durch verschachtelte Elemente aufzublähen - das ist, wie ich aus eigener Programmier-Erfahrug weiß, eine Notwendigkeit, um allen möglichen gestalterischen Anforderungen gerecht zu werden.

Eine Site wurde mit Wix gebaut, die andere mit WordPress.
Die Analyse gestaltete sich relativ einfach: mithilfe der Netzwerkanalyse im Browser (in meinem Fall Firefox) - diese lässt sich in eine har-Datei exportieren, welche wiederum mit Online-Analyse-Tools (in meinem Fall das der Google Admin Toolbox) soweit aufbereitet werden, dass sie problemlos mit einer Tabellen-Kalkulation (in meinem Fall LibreOffice Calc) ausgewertet werden können.
Nachdem ich die Wix-Seite nachgebaut und die Zahlen vorliegen hatte, staunte ich über alle Maßen: ich konnte den Programmcode um 99,5% (sic!) reduzieren.
Von WordPress als „Marktführer“ erwartete ich dann wesentlich weniger „Overhead“ (= Daten, die unnotwendigerweiser generiert bzw. übertragen werden) - in meinen kühnsten Träumen lag die Ersparnis bei 80%.
Also baute ich nach, analysierte ... und war fast genauso schockiert wie zuvor: hier lag die Einsparungen beim Programmcode bei 97,5%!
Und im Gegensatz zu Wix enttäuschte mich WordPress auch bei den Fotos:
Die Wix-Site wurde mit JPG-Originalen (jede mehrere MB groß) gefüttert - herausgekommen ist eine stattliche Anzahl an WEBP-Dateien, die für die verschiedenen Auflösungen (Responsivität) verwendet werden können (also keine übergroßen Fotos für kleine Displays).
Bei der WordPress-Seite war nichts davon zu merken: die übergroßen Fotos wurden für jede Displaygröße unverändert übernommen - sie waren sogar für den Desktop (27" Monitor, 2560x1440) um einiges zu groß.
Es ist natürlich gut möglich, dass die CMS nicht alleine dafür verantwortlich sind, sondern einiges auch auf das Konto der Anwender:innen (Designer:innen, die mit CMS Websites bauen) geht - es wird Einstellungsmöglichkeiten geben bzw. bei Fotogrößen könnte auch vorab eingegriffen werden.
Wie man es auch dreht und wendet - CMS haben großes Potenzial für Overheads - ob nun generisch bedingt (stark verschachtelte HTML-Elemente), vom Benutzer verursacht (schlechte Einstellungen) oder beides (keine Anpassung von Ressourcen). Sie sorgen dafür, dass viel zu viel an 0en und 1en durchs Internet gejagt werden - sie sind, mit einem Wort, verschwenderisch.

Heimarbeit

Ich arbeite zuhause, verwende daher sehr selten Verkehrsmittel (und wenn, dann tunlichst öffentliche) und kann es mir ersparen, in weiteren Räumlichkeiten Energie zu verwenden.

Reduktion

technisch (meine Leistungen)

minimierter Programmcode
Dabei geht es nicht darum, so wenig Code wie möglich zu schreiben, sondern diesen vor dem Einsatz von unnötigem Ballast zu befreien: die Entfernung von nicht benötigten Leerzeichen, Tabulatoren, Zeilenumbrüchen.
Diese werden nämlich vom Browser bei der Darstellung der Seite nicht benötigt, sondern sind der Entwicklung geschuldet, bei der ein Mensch vor der Maschine sitzt und den Code nur extrem schwer lesen könnte, wenn eine gewisse Struktur darin fehlte.
Fotos in benötigten Größen
Das ist ein gerne vernachlässigtes Feature, birgt jedoch großes Einsparungspotenzial:
Moderne Kameras machen fast ausschließlich Fotos, die für Websites viel zu groß sind, da sie in Original-Darstellung nicht mal mehr komplett auf einen Desktop-Monitor passen - außer er ist sehr groß. In den meisten Fällen jedoch wird für die Betrachtung einer Website ein Display verwendet, das wesentlich kleiner ist - um im Falle sehr hoher Auflösungen entscheiden sich viele Webdesigner dafür, nur einen Teil der Bildschirmbreite zu verwenden und links und rechts freie Bereiche zu lassen.
Noch größer ist die Diskrepanz, wenn von den Fotos sogenannte „Thumbnails“ angezeigt werden - also „Miniaturausgaben“ für eine Galerie beispielsweise.
Oder auch, wenn Desktop-Monitore mit Smartphones verglichen werden: Ein Foto mit den Dimensionen 1200x800 Pixel, das angenommenerweise für die Desktop-Darstellung genau richtig ist, wäre für das Smartphone 2,5 bis 3 mal zu breit. Die Reduktion des Fotos auf diese Breite würde die Gesamtgröße des Fotos auf 1/5 bis 1/6 herabsetzen (also 80 - 85% Ersparnis).

... und Qualitäten
Auch an der Qualität kann geschraubt werden: JPG-Dateien beispielsweise können viel stärker komprimiert werden, als die Standardeinstellungen bei Grafikprogrammen sind, ohne dass es auffällt; auch der Grafik-Typ spielt einer Rolle: JPG sind kleiner als PNG, noch mehr Ersparnis bringt das WEBP-Format.
Vektorgrafiken
Für Grafiken, die keine Fotos sind, empfiehlt sich in den meisten Fällen die Verwendung von Vektorgrafiken - diese haben zwei große Vorteile ihren Pixel-Pendants gegenüber: die Dateien sind meist kleiner und sie sind stufenlos und verlustfrei skalierbar, weshalb es nicht notwendig ist, verschieden Größen für verschiedene Displays zur Verfügung zu stellen.
Javascript- und CSS-Ressourcen
Das, was CMS im Großen sind, sind „im Kleinen“ JS- und CSS-Frameworks und -Bibliotheken, wie Angular, jQuery oder Bootstrap: ein Potenzial für Overhead. Natürlich können sie aus der Perspektive des Entwicklers eine Offenbarung sein, da sie in vielerlei Hinsicht die Programmierung vereinfachen - jedoch sind sie IMHO erst ab einer gewissen Komplexität der Website gerechtfertigt (v.a., wenn man meinen strengen „Umweltschutz-Maßstab“ anlegt).

Klarerweise gibt es auch Ausnahmen: Wenn jemand einen ausgeklügelten Online-Editor (fast schon ein Office-Programm) oder ebensolche Tabellen benötigt - in solchen Fällen rechtfertigen die Einsparungen die Eigenentwicklung nicht mehr. Warum? Weil diese (zumindest die guten) bereits so ausgereift sind, wie man es bei Eigenentwicklung (alleine) nicht erreicht - und wenn man es dann doch wagte, würde man dafür ein grüttelt Maß an Energie verbrauchen ... für etwas, das es schon gibt.

inhaltlich (deine Leistungen mit meiner Hilfe)

Fotos und Videos
Es wäre ein Unding, auf Fotos verzichten zu wollen. Aber es sollte mehrere Überlegungen wert sein, welche es tatsächlich auf die Website schaffen - eine Begrenzung auf wenige, dafür inhaltsstarke, hebt auch die Qualität der Site.
Videos hingegen sollten die absolute Ausnahme sein. Sie sind erst dann sinnvoll, wenn Informationen in geschriebenem Wort und stehendem Bild ein großes Ausmaß annehmen sollten - sprich: wenn es wesentlich einfacher ist, etwas in einemm Video zu erklären, als lange Aufsätze zu schreiben und diese mit Bildern zu begleiten.
Animationen
Etwas, das sich permanent auf dem Display bewegt, benötigt auch permanent Rechnerleistung.
Animationen hingegen, die für ein Feedback an die Benutzer:innen sorgen, sind willkommen.
Texte
„Wohlgestalt und auf den Punkt gebracht“ ist die Devise.
Ich bin bei der Formulierung gerne behilflich; darüber hinaus verfüge ich über sehr gute Orthographie- und Grammatikkenntnisse, weshalb ich mich auch als Lektor für deine Texte eigne.

Was zeichnet meine Websites sonst noch aus?

Barrierefreiheit

In meinen Websites sind sämtliche Regeln und Empfehlungen implementiert, die die Benutzung der Site für Menschen mit Einschränkungen gewährleisten.

Außerdem laufen sie auf allen modernen Browsern fehlerfrei - ältere Browser (z.B. Internet Explorer) werden jedoch nicht berücksichtigt (kann bei Notwendigkeit eingebaut werden, ist jedoch eine individuelle Leistung).

Benutzerfreundlichkeit

Besucher:innen von Websites sollen sich dort wohlfühlen, sich schnell zurechtfinden und daher auch gerne wiederkommen. Ich orientiere mich deshalb bei der Grundstruktur meiner Sites an Standards oder Gewohnheiten, die sich schon eingebürgert haben.

Darüber hinaus sind meine Websites zu 100% responsiv.

Individualität

Unter Verwendung von Standards und Reduktion von Ressourcen darf ein individueller Webauftritt natürlich nicht leiden. Es ist die Kunst des Webdesigners, diesen Spagat zu vollbringen.

Performance

Das ist eine natürliche Folge meiner Entwicklungs-Prinzipien: Je weniger zu übertragen und zu berechnen ist, desto schneller geht es auch.

Responsivität

Deine Website soll auf jedem Endgerät (Smartphone, Tablet, Desktop) und letztlich in jeder Größe gut aussehen. Meine Websites tun das.

Suchmaschinen-Optimierung

Jeder, der mittels Suchmaschinen im Internet nach Informationen sucht, die auch deine Website bietet, soll jene so gut wie möglich finden.

Ich beschäftige mich als Webentwickler nur mit „OnPage-Optimierungen“ (Seitenstruktur, interne Links, Keywords, etc.) - andere SEO-relevante Dinge („Wie kommt die Site in die Ergebnisliste einer Google-Suche?“, „Wie verweise ich auf meine Site von einem SocialMedia-Kanal aus?“) sind deine Sache bzw. die eines entsprechenden Profis (SocialMedia- und/oder SEO-Agenturen).

Was ist, wenn du schon eine Website hast, diese aber vergrünern möchtest?

Auch daran soll es nicht scheitern - im Gegenteil: Viele Dinge, die die Erstellung einer Website aufwendig machen, sind schon erledigt - es fehlt nur noch die Reduktion und der Umzug zu einem neuen Hoster ... und eventuell Optimierungsarbeiten.