Ich durfte einen Vortrag von Tom Greenwood @eatwholegrain zu seinem gleichnamigen Buch hören und habe ihn in dieser Sketchnote zusammengefasst:
Inhalt des Bildes
Sustainable WebDesign by Tom Greenwood
The Problem (big red exclamation mark)
The internet uses 700 million tons CO2 per year. That's the same amount as Germany. That's also the same amount global aviation produces.
Track less!
Measure CO2
Using websitecarbon.com you can measure your website's CO2 consumption.
Don't drug the user!
There's a person in front of a game machine. The person is expecting more likes and looks drowsy.
First: Streamline user journeys
You see a person that clicks very often on a website and is getting frustrated.
Then you see a person that clicks only three times on a website and is done and very happy.
effective images
Fewer images are better than a lot of images.
resolution
A smaller image size reduces traffic on websites.
image file type
choose image formats from one of these: JPG, webp, avif. They are smaller than the original.
blur edges
An image with blurred edges looks almost the same but is smaller than the original.
black & white
An image that is monochrome is often smaller than a colourful one.
Videos
Use them carfully!
Turn autoplay off by default.
Reduce time of the video.
Use lower resolution videos.
Compress videos.
An arrow leads to the next section, saying "better":
Animation
SEO friendly.
more accessbily (a11y)
use less data. An animation can save about 90% of the data compared to a video.
Fonts
System Fonts are the most efficient fonts you can use.
If you have your own: optimse custom fonts.
Use less font weights. Only provide characters you use.
Important quote
"What's good for performance is usually good for the environment."
‒ Tom Greenwood ‒
Sustainable Web Manifesto
Sign it.
Colours
Darker colours are more energy efficient. Think about providing a dark mode in your software.
Efficient Coding Languages
There are ratings that show energy efficiency of coding languages.
Ranking from better to worse:
- C, Rust, C++
- JavaScript, Java, C#
- Ruby, Perl, Python
Design for the less priveledged
Less priveledged people often have cheap phones and less bandwidth. Also accessibilty reaches more people.
0,5 MB is enough for an average website.
‒ Alex Russel, Google ‒
Copyright @frie321984 07/2021