Was ist Green Webdesign?

Green Buildings, Green Smoothies und Green Fuel – mittlerweile gibt es für alles Erdenkliche eine grüne Version. Nicht alle vermeintlich grünen Produkte sind es auch wirklich, denn hinter der Öko-Fassade kann sich auch Greenwashing verstecken. Dabei handelt es sich um reines Marketing ohne echte Nachhaltigkeitsmaßnahmen, um vom grünen Trend zu profitieren.

Von solchen Versuchen, sich ein grünes Image aufzubauen, möchten wir bei nova Abstand nehmen. Mit unseren digitalen Produkten sind wir dabei in einer anderen Situation als Unternehmen, die analoge Produkte verkaufen und zum Beispiel auf eine nachhaltigere Verpackung aus Pappe umsteigen können. In der Online-Welt kann es durchaus herausfordernd sein, umweltfreundlich zu agieren – doch wir wollen dazulernen und versuchen, nachhaltiger zu handeln. Ein Ansatz dafür ist Green Webdesign.

Aber was ist das eigentlich? Um auf diese Frage eine Antwort zu finden, besuchen Seyran und ich ein Online-Seminar der Akademie für Design und Nachhaltigkeit.

Als erstes werden wir aufgeklärt, warum Green Webdesign ein wichtiges Thema in der digitalen Branche ist: Derzeit hat jeder Mensch in Deutschland einen durchschnittlichen CO2-Fußabdruck von zwölf Tonnen pro Jahr – klimaverträglich wären allerdings nur zwei Tonnen. Alleine durch den Gebrauch von Internet, Fernseher, Smartphone und Laptop stößt jede*r Deutsche jährlich ungefähr 0,85 Tonnen CO2 aus. Im Klartext heißt das: Wir müssen unseren digitalen CO2-Fußabdruck deutlich verringern, um den Klimawandel zu stoppen.

Was können wir im Webdesign tun?

Um Daten und somit Energie und CO2 zu sparen, können wir für Websites zum Beispiel eine Art “Daten-Budget” festlegen. Zurzeit ist die durchschnittliche Website zwei Megabyte groß, ein Ziel für sparsamere Seiten wären circa 140 Kilobyte – also rund 70% weniger.

Unser Dozent Otto erklärt, dass Bilder ein wichtiger Punkt beim Green Webdesign sind, denn sie machen etwa die Hälfte des CO2-Fußabdrucks einer Webseite aus. Um Ressourcen zu sparen, sollten sie daher sparsam und gut überlegt eingesetzt werden. Spezielle Formate wie WEBP und HEIF ermöglichen es, Bilder und Grafiken in kleineren Dateigrößen hochzuladen. Videos spielen ebenfalls eine Rolle: Sie können je nach Möglichkeit durch SVG-Animationen oder Audios ersetzt werden. Auch der Upload im sparsameren HTML5/WEBM-Format kann helfen, um Daten zu sparen. Außerdem sollte auf automatisches Abspielen verzichtet werden – das nervt die meisten User sowieso. Das nächste Thema ist Typografie, denn auch für die Schriften im Web müssen Daten geladen werden. Otto erklärt, dass wir besser Systemschriften verwenden und nur wenige unterschiedliche Schriftarten und Schriftschnitte einsetzen sollen. Um die Größe von Schriftdateien zu optimieren, können wir sie in das WOFF-Format konvertieren. Er gibt auch den Tipp, keine Webfont-Abos abzuschließen, sondern die Webfonts selbst auf einem nachhaltigen Hoster zu hosten. Darüber hinaus gibt es die Möglichkeit, variable Schriften zu verwenden – das machen wir bei nova bereits. Durch ihre Varianz müssen sie nur einmal geladen werden und wir benötigen keine weiteren Schriftschnitte mehr. So sparen wir Daten und Energie!  

Dann fängt Otto an, von Programmierung zu reden. Ohje, schnell ein paar Notizen für die Entwickler machen! Wir lernen, dass auch die Programmierung einer Website oder App ihren Energieverbrauch und CO2-Ausstoß beeinflussen kann. Eine schlanke und codesparende Programmierung reduziert die Datenmenge – dabei eignet sich zum Beispiel Tool CodeKit, um den Code zu komprimieren und so Daten zu sparen. Statt großen Bibliotheken sollen besser modulare Frameworks eingesetzt werden, und auch die Wiederverwendung von Code macht die Programmierung effizienter und spart Energie.

Schließlich geht es um das Hosting der Website: Hier soll die Auslieferung der Website an den Client möglichst sparsam erfolgen. Mittlerweile bieten viele Webhosting-Anbieter ein Green Hosting an, bei dem die Server mit Ökostrom betrieben werden. Wir nehmen den Tipp mit, die optimale Servergröße auszurechnen, um nicht unnötig einen zu leistungsfähigen Server zu betreiben. Als Hausaufgabe nehmen wir außerdem noch mit, im Backend der Websiten mal wieder aufzuräumen. Hier sollen wir als Redakteure und Redakteurinnen regelmäßig die Daten strukturieren und alte, nicht mehr benötigte Daten löschen.

CO2-Ausstoß einer Website berechnen

Im Online-Seminar haben wir ein spannendes Tool kennengelernt, das wir gerne noch erwähnen möchten. Mit Websitecarbon lässt sich der CO2-Ausstoß einer Website berechnen und mit anderen Websites vergleichen. Hier erfährt man auch, wie viele Bäume man pflanzen müsste, um die Emissionen auszugleichen. Wir freuen uns, dass nova.digital die Bewertung “cleaner als 75% der getesteten Websites” erhält! Drei Bäume pflanzen sollten wir trotzdem – vielleicht eine Idee für das nächste Teamevent?

Ein Graffiti an der Straßenecke, eine Anzeige im Netz. Mal als komplexe Geschichten, mal nur als Fetzen. Mal nehmen wir sie bewusst wahr, häufig nur unbewusst und oftmals überhaupt nicht: Texte. Zum Schutze einer Überfrachtung an Informationen blenden wir sie gerne aus – oder überfliegen sie. Mit Inhalten bombardiert, entscheiden wir uns schon nach wenigen Sekunden, das Textangebot wahrzunehmen oder abzuspringen. Das unliebsame Wort, das diesen Tatbestand beschreibt, schimpft sich Aufmerksamkeitsspanne. Diese sinkt von Jahr zu Jahr und wurde zur Genüge ergründet. Für unsere nova ist sie so etwas wie der ewige Erzfeind – unser persönlicher Bowser sozusagen. Immerhin möchten wir wissenswerte Inhalte mit der anvisierten Zielgruppe matchen. Also begaben Caro und ich uns kurzerhand auf die Suche nach der Essenz eines Textes. Unser Ziel: dem Zuviel an Formulierungen ein Ende bereiten! Der sinkenden Aufmerksamkeitsspanne ihre Macht entziehen. Die Fortbildung „Einfach und prägnant formulieren“ ward gebucht und unsere Mission begann.

Einfach und prägnant formulieren – durch Kürze!

Wir lernten, wie lange ein Satz so sein sollte. Worauf man achten muss, dass Infos bei Leser*innen einschlagen. Als Freundinnen und Freunde des gepflegten Wortes kam uns einiges davon bereits bekannt vor. Dennoch konnten gerade die vielfältigen Übungen unsere textlichen Sinne schärfen. Nüchtern wurde uns dargelegt, wie viel Schrott eigentlich so geschrieben wird. Und das – leider mal wieder – insbesondere im Web. Mit Wortfluten wird online an der Zielgruppe vorbei formuliert und damit vielmals umsonst geschrieben. Etwas, das wir in unserem Arbeitsalltag unbedingt vermeiden möchten. Also lauschten wir weiter den scharfzüngigen Worten unseres Referenten.

Die für uns vielleicht weitreichendste Lehre offenbarte sich mit einem Leitsatz. Dieser lautete: wirklich gute Sätze umfassen 10-15 Wörter. Eine Erkenntnis, die nova-intern mittlerweile zum elften und zugleich höchsten Gebot aufgestiegen ist. Gerade in den anschließenden Wochen wurde kein Satz ohne akribisches Nachzählen formuliert. Ja, das hatte mitunter Zwangscharakter. Doch von diesem konnten wir uns – sehr zur Freude unserer Mitmenschen – auch wieder befreien. Heute wissen wir, dass ein Satz auch mal 16 oder mehr Wörter haben darf. Immerhin entsteht dadurch auch so etwas wie ein Leserhythmus. Dennoch sollten solche Konstruktionen die Ausnahme bleiben. Wir wollen ja nicht ins Leere schreiben, sondern Herz und Interesse unserer Zielgruppe treffen. Übrigens: Kürze nicht nur in Sätzen suchen! Auch in den Worten selbst sollte diese zu finden sein. Und so wurde ein weiteres Gesetz erhoben: Silben zählen! Denn wenn man die Erbsenzählerei mit Erbsenzählen abkürzen kann, sollte man dies auch tun.

Ein Bild sagt mehr als tausend Worte – oder Zahlen.

Eine weitere Möglichkeit, an Prägnanz zu gewinnen, ist das bildliche Schreiben. Es ist eine alte Floskel, die aber wieder einmal zutrifft. Ein präzises Bild macht viele Worte überflüssig. Dadurch gewinnt der Text nicht nur an Präzision, sondern entfaltet nebenbei seine Atmosphäre. Bevor man ausufernd über Glücksgefühle berichtet, genügt der Griff zum Feuerwerk. Ist die Gemütslage mal nicht so prächtig, können wir uns wortsparend bei der Wolke bedienen. Aber auch hier gilt: ungewöhnliche Bilder sorgen für Spannung und Überraschung. Folgt nach jeder Wolke ein Feuerwerk, wird es auch schnell langweilig. Besonders wichtig werden diese Bilder beim Gebrauch abstrakter Zahlen. Diese sind für Leser*innen meist nicht griffig und erzeugen keine Bilder vor ihren inneren Augen. Der Weltrekord im Weitsprung von 8,95 m hört sich super an. Noch besser, wenn man verbildlicht, dass damit zwei SUV-Längen weit gesprungen wurde.

Am Ende war das Zählen.

Was bleibt also rückblickend von unserer Fortbildung? Eine überstandene Zwangsstörung, vielfältige Eindrücke und neue Ansätze, wie wir mit Texten umgehen. Wir formulieren nicht nur präziser, unser Sprachgefühl und -sinn haben allgemein einen Feinschliff erfahren. Viele der Leitsätze und Gesetze beachten wir seither in unserem Arbeitsalltag bewusst. Manche Regeln dagegen haben sich heimlich in unserem Unterbewusstsein verankert. So lese ich gerade meinen Blog-Beitrag Korrektur und bin etwas überrascht – ja schockiert. Kein Satz ist in diesem zu finden, der die magischen 15 Wörter überschreitet. Auf den Schock folgt die Erkenntnis: Fortbildung geglückt, würde ich sagen. Die Prägnanz, sie wurde gefunden. Die neue Mission lautet nun: unsere Kundinnen und Kunden daran teilhaben zu lassen. Für sie die richtige Formulierung zu wählen. Mit Prägnanz und Kürze der Aufmerksamkeitsspanne entgegentreten.

Was ist eigentlich Navigation?

Und noch wichtiger: wie gestaltet man die perfekte Navigation einer Website? Beim Online-Workshop “Designing The Perfect Navigation” des Smashing Magazine haben wir an zwei Abenden diese und weitere Fragen geklärt.

UX-Guru Vitaly Friedman führte die Gruppe aus internationalen Teilnehmer*innen durch sein gigantisches Archiv aus Positiv- und Negativbeispielen, die er über die Jahre hinweg gesammelt hat. Anhand von Screenshots und Videoaufnahmen haben wir unterschiedliche Lösungen und Umsetzungen von Hamburgern, Slidern, Carousels uvm. in der Gruppe diskutiert und auch bewertet.

Navigation ist überall

Was wir beim Gestalten einer Navigation immer im Hinterkopf behalten sollten: User kommen mit einer bestimmten Absicht auf eine Seite. Als Designer*in kennt man diese vielleicht – vielleicht aber auch nicht! Daher müssen wir versuchen, jede mögliche Absicht zu unterstützen, Antworten zu bieten und durch das Design zum Handeln zu ermutigen. Navigation ist vielseitig und auf keinen Fall nur das, was wir unter der Hauptnavigation, also dem Menü einer Seite, verstehen. Navigation besteht nicht nur aus Hamburger-Menüs oder Dropdowns – alles, mit dem man im Web interagieren kann, ist eine Art von Navigation. Alles, was User von einem Screen zum nächsten bringt, ist Navigation. Sie muss nicht auf allen Seiten gleich aussehen oder ähnlich funktionieren, wichtig ist nur, dass sie hervorsticht.

Der Banana-Test

In den Beispielen von Vitaly wird schnell klar: Selbst ohne Kenntnis chinesischer Schriftzeichen ist es zumindest möglich, zu verstehen, dass man sich auf einer chinesischen Shop-Seite befindet. Auf dieser gibt es eine Suchfunktion, Kategorien und nummerierte Slider. Anhand dieser bekannten Elemente bekommen wir als User eine Vorstellung davon, was auf dieser Website passiert und wie sie funktioniert.

Um dieses blinde Verständnis im Gestaltungsprozess zu prüfen, starten wir den Banana-Test. Hört sich skurril an – ist aber umso effektiver! Bei einer Website oder einem Prototypen ersetzen wir dazu einfach alle Texte mit “Banana”. So wird getestet, ob ein User alleine durch Design, Platzierung oder Anordnung versteht, was für eine Funktion die unterschiedlichen Elemente haben. Gelingt der Test, können wir uns sicher sein, dass die Seite auch ohne Worte verstanden wird.

Die Erwartungen der User

Für die Navigation müssen wir allgemein beachten, welche Funktion die User von bestimmten Elementen erwarten. Zeigt ein Pfeil bei einem Slider nach rechts, erwarten die User natürlich, dass sich der Slider auch nach rechts bewegt. Ein “X” steht bekanntlich für schließen und ein Plus-Symbol für ausklappen oder zum Warenkorb hinzufügen. Sind solche einst gelernten Funktionen plötzlich anders belegt oder funktionslos (bspw. als Deko-Element), führt das zu Frust.

Ein Versuch

So berichtete Vitaly von einem Versuch, bei dem Menüpunkte mit unterschiedlichen Icon-Text-Kombinationen getestet wurden. Zur Auswahl standen die Varianten “> Menü” und “Menü >”. Dabei wurden die Erwartungen der Versuchsteilnehmer*innen ausgewertet und es wurde beobachtet, wohin sie klicken. Das Ergebnis: Die meisten rechneten damit, dass sich das Menü ändert und nicht, dass man auf eine neue Seite kommt. War das Icon links vom Menüpunkt platziert, klickten fast 100% der Teilnehmer*innen auf den Text, weil sie dem Icon in dieser Anordnung nicht vertrauten. Die Teilnehmer*innen nahmen das Icon nur als Deko-Element wahr und vermuteten stattdessen eine Funktion hinter dem Text.

War das Icon rechts vom Menüpunkt platziert, wurde es nicht mehr “ignoriert”, sondern angeklickt. Hier nahmen die Teilnehmer*innen also an, dass auch das Icon eine Funktion hat. Der beste Fall wäre natürlich, dass beide Varianten zum Ziel führen. Denn Icon und Text sollten immer als Einheit funktionieren und ihnen sollten auf keinen Fall unterschiedliche Funktion zugewiesen werden.

Was genau ist nun also Navigation?

Im Grunde geht es dabei immer um bekannte Muster, die von Usern intuitiv erkannt werden. Nun könnte man vermuten, dass es doch die einfachste und sinnvollste Lösung wäre, auf allen Seiten des Internets immer die gleiche Navigations-Logik anzuwenden. Aber wäre das nicht furchtbar langweilig? Es wäre doch schlimm, wenn es nichts Neues und Überraschendes mehr zu entdecken gäbe? Für uns als Digitalagentur wäre dies ein Graus. Denn wir sind stets auf der Suche nach optisch herausstechenden Navigationen, die logisch aufgebaut sind und perfekt funktionieren – wir sagen User-Frust den Kampf an!

Umso mehr freuten wir uns darüber als sich Pascal, seines Zeichens Teamlead der Webentwicklung, unlängst dafür entschied, einen fünftägigen Workshop zu besuchen. Das Schönste daran: er gewährt uns allen nun einen Einblick und berichtet über die Learnings, die er für seinen Arbeitsalltag mitnehmen konnte.

 

“Die genaue Bezeichnung des Workshops lautete ‚Front-End Accessibility Masterclass‘. Im ersten Moment klingt das sehr hochgestochen, aber im Grunde wurden in diesem Workshop verschiedene und aktuelle Themen des Bereichs Barrierefreiheit unter die Lupe genommen. Unter digitaler Barrierefreiheit versteht man, dass Webseiten so gestaltet werden, dass sie auch von Menschen mit bestimmten Einschränkungen, wie bspw. einem geringen Sehvermögen, genutzt werden können. 

 

Der Workshop hatte viele Themen. Sie reichten von der komplexen technischen Perspektive bis hin zur einfachen Bedienung. Auch wurden Tools vorgestellt, mit denen eine Simulation diverser Einschränkungen erstellt werden konnte. Auf diese Weise wurde z.B. getestet, ob Webseiten einer Rot-Grün-Sehschwäche standhalten würden. Das war spannend zu sehen und sorgte für einige Überraschungen.   

 

Natürlich gab es auch den Live-Test. Webseiten wurden auf ihre Barrierefreiheit gemeinsam untersucht. Funfact: Der Weg für die Online-Zugfahrt ist in Deutschland noch gar nicht mal so barrierefrei. Österreich und Italien schnitten hier – laut Kursgeberin – deutlich besser ab. Man bekam schnell ein Gefühl dafür, dass wir manche Punkte noch besser machen können. 

 

Die vielen Themenbereiche und Learnings brauchten Zeit. Der Workshop ging daher über fünf Tage. Der bekannte ‚Klick‘ stellte sich bei mir tatsächlich in dem Moment ein, als ich gesehen habe, was für Möglichkeiten es eigentlich gibt, für eine gute Barrierefreiheit zu sorgen. Und wie einfach genau diese Dinge teilweise umzusetzen sind. Diese Einsicht war irgendwie erschreckend. Etwas mehr anstrengen und wir könnten manche Websites deutlich barrierefreier gestalten! 

 

In meiner bisherigen Laufbahn habe ich noch nie einen so tiefen Einblick in dieses Thema bekommen. Das schließt auch meine Ausbildung mit ein, in der genau dieses Gebiet eigentlich eine lehrreiche und wichtige Unterrichtseinheit ergeben würde. Natürlich ist das Ganze aber auch nicht völlig trivial und auf vieles muss gezielt geachtet werden. Aber wenn dieser Blick von Anfang an in das Projekt eingearbeitet und mitgedacht wird, also schon Teil bei den first steps ist, dann lässt sich das auch umsetzen.

 

Durch den Workshop habe ich ein Gespür für diese Themen bekommen und meine Skills erweitert. Ich weiß nun, worauf ich achten muss und versuche, dieses Wissen in meinen Arbeitsalltag einzubauen.”

In meinem Arbeitsalltag versuche ich seitdem, wenn es irgendwie geht, diese Dinge auch anzuwenden. Ich frage mich selbst: Wurde die Website für die Barrierefreiheit optimiert? Sind die Farben und Kontraste darauf abgestimmt? Was passiert, wenn ich mit meinen Tools eine Einschränkung simuliere? Kann man die Website dann überhaupt noch nutzen?