Sustainable WebDesign — Sketchnote zum Vortrag von Tom Greenwood

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:

1. C, Rust, C++
2. JavaScript, Java, C#
3. 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