Wer sich mit einem neuen Thema auseinandersetzt, der kommt nicht daran vorbei, sich auch die Grundlagen genau anzusehen. Denn nur wenn die Basis stimmt, können wir auch darauf aufbauen. Wir wollen euch das natürlich nicht vorenthalten und haben euch einmal die wichtigsten Basics für ein energiesparendes Design zusammengestellt.
Stichwort Darkmode - wir haben viel darüber gelesen, dass dunkle Themes nicht einfach nur cool aussehen sollen, sondern (abhängig von der Bildschirmart) auch Energie sparen. Der Grund dafür ist ganz einfach. Je dunkler eine Farbe, desto weniger Energie benötigt euer Bildschirm um diese Farbe anzuzeigen. Übersetzt heißt das, dass weiße Hintergründe auf OLED Bildschirmen Energiefresser sind, wenn man den Verbrauch mit schwarzen Hintergründen vergleicht.
Wir wollen jetzt natürlich nicht nur noch schwarze Webseiten, Apps und Portale gestalten. Das wäre aus Designsicht schon ganz schön trist. Was wir aber damit sagen wollen, ist, dass ein paar dunklere Farben den Energieverbrauch einer Webseite beeinflussen können. Und nicht nur die Helligkeit der Farben spielt dabei eine Rolle, sondern auch der Farbton an sich. So hat z.B. Google in einer internen Studie festgestellt, dass die Darstellung von Blau 25% mehr Energie verbraucht, als Grün oder Rot. Wenn ihr mehr darüber erfahren wollt, dann schaut euch den Talk “Cost of a pixel color” auf der Android Dev Summit '18 an.
Wenn wir bedenken, dass die Einsparungen durch den Dark Mode im Vergleich zu anderen Maßnahmen kaum erwähnenswert sind, dann priorisieren wir die Farbwahl als energiesparendes Mittel eher niedrig ein. Der Vollständigkeit halber soll sie in unserer Liste aber ihren Platz behalten.
Jeder Designer lernt in seiner Ausbildung wie Schriften gekonnt zum Einsatz kommen. Dabei benötigt ein gutes Design auch keine Vielzahl an Schriftarten und -styles. Weniger ist hier bekanntlich immer mehr. Und im Web trifft das nicht nur aus gestalterischer Sicht zu, sondern auch aus Performance Gründen. Aber ganz egal ob wir 1, 2 oder 5 Schriftstyles in unserem Design verwenden, es gibt immer noch weitere Möglichkeiten, die Anwendung unserer Fonts zu optimieren.
Ja, wir geben zu. Das ist auch kein Vorschlag, den wir gerne lesen (oder in diesem Fall selbst befolgen). Es gibt so viele tolle Schriften da draußen, die wir verwenden können (und eigentlich auch wollen!). Systemschriften wirken dagegen inspirationslos und langweilig. Aber, wenn wir unser Designego außen vor lassen und uns rein auf das Thema Nachhaltigkeit konzentrieren, dann sind die energiesparendsten Schriften eben nunmal die, die schon bei unseren Usern auf ihren Geräten liegen. Und nicht erst an sie übertragen werden müssen.
Wenn ihr wie ich gerne Google Fonts für eure Designs verwendet, dann erhaltet ihr nach dem Download die Schriften als “.ttf” . Um Speicherplatz zu sparen und die Ladezeiten zu optimieren, könnt ihr eure .ttf-Dateien beispielsweise in einem Tool wie Fontsquirrel ganz einfach in “.woff” oder “.woff2” umwandeln. Durch die Kompression der Fonts sparen sie Speicherplatz und werden schneller geladen. Und die Nachteile? Während “.woff” von den gängigsten Browsern unterstützt wird, ist die Weiterentwicklung .woff2 noch nicht so weit verbreitet.
Habt ihr schon einmal mit variablen Fonts gearbeitet? Die sind eine super Alternative, wenn trotz allem relativ viele Schriftschnitte benötigt werden. Denn statt z.B. 5 Schriftschnitten einer Font, ladet ihr nur eine Fontdatei herunter, die ihr beliebig anpassen könnt. Je nachdem, was euch der Schriftdesigner erlaubt. Gängige Einstellungen sind neben der Stärke oft auch die Schriftweite. Oder sogar ganz spielerisch wie im Beispiel der Schriftart Caraque, die man einfach “schmelzen” lassen kann. Auf Google Fonts findet ihr inzwischen auch eine Vielzahl an tollen variablen Fonts. Und auch hier nicht vergessen - das richtige Dateiformat spart euch zusätzlich noch einmal einiges an Ladezeit.
Bildelemente haben im Web eine Vielzahl an Aufgaben zu erfüllen. Sie sollen bestimmte Emotionen wecken, das Design auflockern, Inhalte unterstreichen oder erklären, den Blick unserer User lenken, oder sie vom bestehenden Angebot einer Seite überzeugen. Bilder vermitteln schon bevor ich die erste Zeile Text gelesen habe einen Eindruck einer Seite und sind oft entscheidend dafür, wie sich ein User über eine Seite bewegt. Spricht ihn ein Bild an, oder schreckt es ihn schon auf den ersten Blick ab?
Keine Frage. Eine gut konzipierte Bildwelt hat ohne Zweifel einen Mehrwert für unsere User. Die Kehrseite - falsch eingesetzt benötigen sie eine Menge Speicherplatz und erhöhen so die Ladezeiten und die Performance einer Seite. (Ladezeit = übertragende Datenmenge = hoher Energieverbrauch) Also was können wir tun um das zu vermeiden?
Eines sollten wir uns immer fragen - welchen Mehrwert bieten unsere Bilder? Hier gilt: Qualität schlägt Quantität. Also lieber ein paar hochwertige Bilder machen lassen, die ein Unternehmen, einen Service oder ein Produkt individuell darstellen, als auf eine Vielzahl von unüberlegten Stockbildern zurück zu greifen, die aber kaum einen individuellen Mehrwert bieten. Eine individuelle Bildwelt hat zudem den großen Vorteil, dass sie charakteristisch ist und einen hohen Wiedererkennungswert hat.
Es müssen nicht immer großflächige Bilder sein, manchmal bieten individuell angepasste Illustrationen und Icons einen viel größeren Mehrwert, da ihr Sinn oft schneller erfassbar ist. Sie unterstützen also beim Verständnis von Inhalten. Vektordateien (wie “.svgs”) haben außerdem im Vergleich zu pixelbasierten Bildern (wie .jpgs oder .pngs) zwei große Vorteile: Zum einen können Sie richtig angelegt ohne große Verluste skaliert werden und passen sich so auch allen Bildschirmgrößen ohne Probleme an. Und zum anderen benötigen sie im Vergleich nur sehr wenig Speicherplatz.
Eines ist sicher klar im Gegensatz zu Printprodukten benötigen wir im Web keine hochauflösenden Bilddateien für eine optimale Darstellung. Wir können also schon durch eine geringere Auflösung die Dateien sehr viel kleiner halten. Unsere Arbeit mit Pimcore hat den großen Vorteil, dass wir an dieser Stelle im Design nicht weiter optimieren müssen, da dies für uns übernommen wird. Wer diesen Vorteil nicht hat, der kann seine Assets mit ein paar Tricks noch vor Übergabe an die Entwicklung weiter optimieren. Mit Tools wie z.B. TinyPNG oder Kraken.io kann zusätzlich teilweise bis zu 80% einer Dateigröße eingespart werden. Mein Tipp: trotzdem immer noch einmal im Anschluss die Bildqualität prüfen, da bei einzelnen Bildern der Verlust zu hoch sein kann.
Beim Thema Dateihygiene scheiden sich die Designer-Geister. Während die einen penibel auf Ordnung in ihren Arbeitsdateien achten, so fehlt bei anderen einfach die Zeit (oder auch die Motivation) sich mit dem Aufräumen ihrer Layouts auseinander zu setzen. Spätestens wenn wir unsere Vektordateien fürs Development exportieren sollten wir da aber noch einmal über unseren Schatten springen und die Dateien aufräumen. Leere Ebenen, doppelte Inhalte und fehlende Ordnung sind in der Darstellung eine Fehlerquelle und belegen auch unnötig Speicherplatz.
Auch hier unterstützt uns Pimcore wieder, indem es sich um die Optimierung unserer Bilder kümmert. Solange wir für unsere Breakpoints die richtigen Thumbnailgrößen eingestellt haben, haben wir als Designer weiter nichts zu tun, außer der Bereitstellung der Bilder an sich. Wer diesen Vorteil nicht hat, der sollte auf jeden Fall darauf achten, Assets in der richtigen Größe zur Verfügung zu stellen. Denn es macht einen ziemlichen Unterschied, ob ein Bild in 200x200px oder in 2000x2000px exportiert und hochgeladen wird
Animationen und Videocontent sind eine tolle Möglichkeit um den Usern auch komplexe Informationen verständlich zu vermitteln. Die Kehrseite der Medaille: Videodateien benötigen sehr viel Speicherplatz und wirken sich negativ auf die Ladezeiten einer Webseite aus. Wie beim Bildmaterial ist es also auch hier wichtig sich gut zu überlegen, wie und wo Videos auf der Webseite eingesetzt werden sollen. Hat das Video einen wirklichen Mehrwert für den User oder nicht?
An diesem Punkt können wir wieder 2 Dinge bedenken: Den Dateityp und die Dateigröße des Videomaterials. Nicht jeder Videocontent muss (und sollte) klassisch als .mp4 oder .gif eingebunden werden. Eine Alternative für bewegte Illustrationen sind beispielsweise vektorbasierte SVG-Animationen. Für unsere eigene Webseite nutzen wir LottieFiles, ein Framework für SVG Animationen das von Airbnb zur Verfügung gestellt wird und frei nutzbar ist. Das Tool hilft nicht nur dabei illustrierte Animationen einfach zu erstellen, sondern ist auch wirklich einfach auf einer Webseite einzubinden.
Eine weitere Möglichkeit, die wir in der Konzeption bereits einplanen können, ist es den Usern freie Hand zu geben. Sie selbst entscheiden zu lassen, welche Videoinhalte sie wirklich laden möchten. Indem wir im ersten Schritt nur ein Vorschaubild zeigen, werden Videos erst geladen, wenn unsere User darauf klicken.
Und auch die Auswahl der Videoqualität können wir ihnen überlassen. YouTube macht es vor und bietet bei Videos eine Auswahlmöglichkeit, die sich auch automatisch an Bildgröße, Internetgeschwindigkeit und Upload-Qualität orientieren kann.
Am Ende dreht sich alles um Ladezeiten (welche übersetzt die eingesetzte Energie zum Transport der Daten wiederspiegelt) und bewusste Designentscheidungen. Wir müssen nicht komplett auf Bildelemente und Videos verzichten. Stattdessen sollten wir damit beginnen, den Einsatz zu hinterfragen und besser zu planen. Und das ist nicht nur umweltfreundlicher sondern sorgt auch für eine bessere User Experience, ebenso, wie eine bessere Bewertung bei den einschlägigen Suchmaschinen.
Sie wollen mehr erfahren?
Dann schreiben Sie uns. Wir freuen uns immer über den Austausch zum Thema Nachhaltiges Design.
Einfach mal sprechen?
Mein Name ist Billy Thiemann, langjähriger Entwickler, Digitalisierungsexperte und Geschäftsführer von LEANATIC.
Lassen Sie mir Ihre E-Mail-Adresse oder Telefonnummer da – Ich freue mich darauf, Sie kennenzulernen.
