The document discusses the environmental impact of web development and digital practices, highlighting the need for sustainability in technology. It presents a framework for improving design, UX, and development while minimizing carbon footprints and promoting renewable resources. The authors propose various strategies to enhance efficiency and reduce energy consumption in digital solutions.

1. Don’t click this
Morgenbooster
19. April 2023
1508 x Knowit Experience

2. Kristine Emiie Hansen
UX Designer
1508 Copenhagen
Peter Solow
Lead Developer
Knowit Experience Copenhagen
We are

4. 01/ What is the problem?
02/ What can we do about it?
03/ How can we do better with design and UX?
04/ How can we do better with development?
05/ Can we measure it?
06/ Where do you start?
Agenda

5. 01/ What is the problem?
02/ What can we do about it?
03/ How can we do better with design and UX?
04/ How can we do better with development?
05/ Can we measure it?
06/ Where do you start?

6. Sustainability
Responsible
developer
Responsible
designer
Responsible
owner

7. 2000
400 mio. users
1993
14 mio. users
The internet

8. Carbon emission of the internet’s data storage alone
= aviation industry

9. 90 %
of all data produced is not ever viewed
again after 3 months.
2018
We produced 33
zettabytes of data
2035
We need to produce
2.142 zettabytes
Takes 752 years of non-stop, no-sleep reading
for every human on the planet to read 1 zettabyte

10. More people has
climbed Mount
Everest than visited
page 11 on Google.

11. Waste
Digital devices
Use
Digital devices
Manufacture
Digital devices
Data centre
Storing data
User`s device
Executing data
Transmission
Transporting data

12. Cold storage warehouse
Storing prawns
Container ships
Transporting prawns
My kitchen
Cooking prawns

13. In 2020 the Danish electricity production
emitted 5,2 mio. tons of CO2
USA, 2021
Sweden, 2021

14. 01/ What is the problem?
02/ What can we do about it?
03/ How can we do better with design and UX?
04/ How can we do better with development?
05/ Can we measure it?
06/ Where do you start?

15. Things that
somebody can do
Things that
we can do

17. Planet-sentered

19. 0 electricity 0 CO2
=
=
0 digital solutions

20. 1 sec video 10 images 50.000 words
= =

21. Device power
Page weight
Hosting
Data centre
Storing data
Transmission
Transporting data
User`s device
Executing data

22. A page weight budget =
A budget of how much a
webpage can weigh in e.g kB
Video Copy Animations Plugins Images Code Font
0 kB 1900 kB

23. 01/ What is the problem?
02/ What can we do about it?
03/ How can we do better with design and UX?
04/ How can we do better with development?
05/ Can we measure it?
06/ Where do you start?

24. Research and validate with
users to…
 Reduce pages and
content
 Reduce clicks through
IA, navigation and
search
 Identify opportunities
for reducing non-digital
carbon footprint
UX
Goal: As little time as possible spent on our site

25.  Delete, delete, delete
 Archive offline
 Write clear and
efficient copy
 Inform to create
awareness
Content

26. PNG PNG Retina (2X) JPG JPG Retina (2X) WEBP WEBP Retina (2X)
Banner 1200 x 500 172.8kB 564.1kB
136.7k
B
235.7kB 28.3kB 75.0kB
 Avoid or make smaller
 Simplify
 Load lazy, don’t hide
(e.g. carousels)
 Compress
 Choose best format
10 images 50.000 words
=
Images

27. Example: herning.dk

28.  Use instead of images
 Simplify
 Choose SVG format
 Style with CSS code
Illustrations

29.  Avoid or shorten
 Let user choose
 Don’t autoplay
 Lower definition
 Choose WebM format
Video
1 sec video 10 images
=

30. 0
350
Black Red Green Blue White
Current
drawn
(mA)
Colors at max brightness
 Use dark shades (on
OLED)
 Use less blue and more
red and green
 Increase contrast
Colour
+25 %

31. Example: sparenergi.dk

32. Example: herningbib.dk

33.  Choose a system or
variable font
 Reduce amount of font
weights
 Choose W0FF2 format
Font
Fonts System Font TTF WOFF2 Subset WOFF2
Arial 0kB
Times New Roman 0kB
Inter UI Regular 253kB 88kB 10kB
Inter UI Bold 256kB 95kB 10kB
Inter UI Italic 259kB 95kB 10kB
Roboto Regular 172kB 66kB 9kB
Roboto Bold 171kB 67kB 9kB
Roboto Italic 174kB 72kB 11kB

34. 01/ What is the problem?
02/ What can we do about it?
03/ How can we do better with design and UX?
04/ How can we do better with development?
05/ Can we measure it?
06/ Where do you start?

35. The Sustainable
Web Manifesto
• Clean: Services provided and used will be powered
by renewable energy.
• Efficient: Products and services will use the least
amount of energy and material resources possible.
• Open: Products and services will be accessible, allow
users to control their data, and enable the open
exchange of information.
• Honest: Products and services will not mislead or
exploit users.
• Regenerative: Products and services will support an
economy that nourishes people and the planet.
• Resilient: Products and services will function in
times and places where users need them most.

36. Data storage alone is responsible for
about 1.6 billion tons of greenhouse
gases annually.
A study from 2017 showed that about ¼ of
all servers are zombie servers.

39. https://sustainablewebdesign.org/is-the-hosting-located-as-close-as-possible-to-the-core-
user-base-or-use-a-cdn/
Transmission of data around the world
consumes a lot of energy, and the further the
data has to travel, the more energy is
consumed.
Always select a data center as close to the
core user base as possible. For web projects
that have an international user base, using a
content delivery network (CDN) helps to
reduce the distance that large files travel
through networks to reach each user, and thus
reduces energy consumption.

40. 0
20
40
60
80
100
120
140
160
(c)
c
(c)
Rust
(C)
c
+
+
(c)
Ada
(v)
Java
(c)
Pascal
(c)
Chapel
(v)
Lisp
(c)
Ocaml
(c)
Fortran
(c)
Swift
(c)
Haskell
(V)
C#
(c)
Go
(i)
Dart
(v)
F#
(i)
JavaScript
(v)
Racket
(i)
TypeScript
(i)
Hack
(i)
PHP
(v)
Erlang
(i)
Lua
(i)
Jruby
(i)
Ruby
(i)
Python
(i)
Perl
Energy Time MB
Not all languages are equal
Energy Efficiency across Programming Languages
https://greenlab.di.uminho.pt/wp-content/uploads/2017/

41. App. 25% of all internet data is tracking data.
On average, only 10% of tracking data is ever used.
Stop watching me
Script Front end weight
Google Analytics 42.3kb
Google Tag Manager 39.4kb
Matomo Analytics 39.3kb
HotJar 92kb

42. Total page weight: 5mb
Ad tracking: 4.5mb
Everything else: 0.5mb
USA Today

43. Monthly metric tons of CO2 emission
20.53 30.42
106.74 113.83
160.36
501.1
SNAPCHAT PINTEREST LINKEDIN FACEBOOK MICROSOFT GOOGLE
Monthly metric tonnes of CO2 emission
“The carbon cost of browsing
cookies contained in the top 1
million most-viewed websites
on the internet produced
11.442 metric tons of carbon
dioxide per month due to the
energy consumption for the
computing power to maintain
them.”
Joana Moll,
https://carbolytics.org/
The cookies that ask
European Union users for their
consent to the use of cookies,
were the third-most carbon
intensive of millions of cookies
on a given website.

44. Video
duration
HDV 1080 h264 720 MPEG-2
1 minute 157MB 371MB 943MB
5 minutes 786MB 1.8GB 4.7GB
20 minutes 3.1GB 7.4GB 18.8GB
60 minutes 9.4GB 22.3GB 47.1GB
Video killed the earth
App. 27% of online video use is pornography -
Making it responsible for 0.5% of the world’s CO2 emission.
20%
20%
60%
Distribution of
Online dataflow
All Non Video Other Video
Online Video
The Swift Project
https://theshiftproject.org/en/article/unsustainable-use-online-video/

45. Images PNG
PNG Retina
(2X)
JPG
JPG Retina
(2X)
WEBP
WEBP
Retina
(2X)
64 x 64 3.3kb 9.0kb 3.3kb 9.7kb 900b 2.3kb
128 x 128 8.5kb 25.6kb 9.7kb 29.5kb 2.4kb 6.1kb
humbnail
382 x 255
38.0kb 128.0kb 44.1kb 78.7kb 9.1kb 24.1kb
Medium
Image 640
x 480
106.8kb 350.6kb 60.0kb 145.9kb 20.8kb 56.7kb
Banner
1200 x 500
172.8kb 564.1kb 136.7kb 235.7kb 28.3kb 75.0kb
Full
screen
1440 x 900
354.5kb 1.1mb 148.9kb 303.5kb 54.3kb 133.0kb
A picture is worth 1000 words

46. Fonts System Font TTF WOFF2 Subset WOFF2
Arial 0kb
Times New
Roman
0kb
Inter UI
Regular
253kb 88kb 10kb
Inter UI Bold 256kb 95kb 10kb
Inter UI
Italic
259kb 95kb 10kb
Roboto
Regular
172kb 66kb 9kb
Roboto Bold 171kb 67kb 9kb
Roboto Italic 174kb 72kb 11kb
A font-face to launch 259 KB

47. Durga Prasad Acharya
https://geekflare.com/green-coding/#geekflare-toc-how-can-larger-lines-of-code-
harm-the-environment
Coding can become greener instantly if we
adopt a similar development process as we did
20+ years ago when coding was strict to sizes
and lengths.
Over the years, the ability of programmers to
write less refined or longer code became
limitless with the growing use of libraries and
frameworks.

48. 01/ What is the problem?
02/ What can we do about it?
03/ How can we do better with design and UX?
04/ How can we do better with development?
05/ Can we measure it?
06/ Where do you start?

49. Energy per visit in kWh (E):
E = [Data Transfer per Visit (new visitors) in GB x 0.81
kWh/GB x 0.75] + [Data Transfer per Visit (returning
visitors) in GB x 0.81 kWh/GB x 0.25 x 0.02]
Emissions per visit in grams CO2e (C):
C = E x 442 g/kWh (or alternative/region-specific carbon
factor)
https://sustainablewebdesign.org/calculating-digital-emissions/

51. https://sustainabletech.se/

54. Relative Measurements
VS

55. 01/ What is the problem?
02/ What can we do about it?
03/ How can we do better with design and UX?
04/ How can we do better with development?
05/ Can we measure it?
06/ Where do you start?

56. Sustainability is a organisational issue

57. Hollistic approach to sustainable web development
UX/Design
Scoping
Concept
Service/Support
Tec. Analysis
Development
Pitch

58. 1. Retain.
There will be data that can’t be moved, or mainframe modernization that can be postponed.
2. Re-host.
Move the workload from a virtual machine (VM) to a public cloud. In these cases, lift-and-shift is actually the right fit, especially if
on-premise has become too costly.
3. Refactor.
Change the application’s code without changing its behavior, so there’s no change in user experience, but speed or efficiency should
improve.
4. Re-architect.
Modify the source code, which often means radically changing architecture to microservices. This usually allows it to use the cloud
and improve scalability.
5. Rebuild.
Totally rebuild in a cloud native way.
6. Replace.
Move to an off-the-shelf software-as-a-service product (SaaS).
7. Retire.
Deprecate the application.
The 7 R’s of Modernization
Jennifer Riggins
https://thenewstack.io/app-modernization-why-lift-and-shift-isnt-good-

59. Knowit Web Sustainability Audit Process
AUDIT WORKSHOP REPPORT
Data Collection
Technical analyses
UX / Design analyses
Content analyses
Business insights
Stakeholder discussion
Impact Effort Matrix
Audit results
Insights
Actions
(Time and Budget)

63. The internet is a major contributor to our global
emission

64. There are solutions to many of these problems

65. Even the smallest change can make a
difference

66. There is no better time to start than now

67. QR

68. Kristine Emiie Hansen
UX Designer
keh@1508.dk
Peter Solow
Lead Developer
peter.solow@knowit.dk
Thank you