Lowww: How to design for a low carbon world wide web - Morgenbooster
•
0 likes•112 views
Browsing the internet for inspiration for your next vacation is as bad for the environment as actually traveling there by plane. Well, at least on a large scale. That is because accumulated, the internet emits the same amount of CO2 as the airline industry.
Recommended
More Related Content
Similar to Lowww: How to design for a low carbon world wide web - Morgenbooster
Similar to Lowww: How to design for a low carbon world wide web - Morgenbooster (20)
More from 1508 A/S
More from 1508 A/S (20)
Recently uploaded
Recently uploaded (20)
Lowww: How to design for a low carbon world wide web - Morgenbooster
- 1. Lowww: How to design for a low carbon world wide web 1508™ Morgenbooster
- 2. Sarah Reuss Allingham Special Advisor Danish Energy Agency Client and product owner of sparenergi.dk Kristine Emilie Hansen User Experience Designer 1508 Copenhagen Part of the design team behind sparenergi.dk Morgenbooster 1508™
- 3. Morgenbooster 1508 - A strategic design company Based in Aarhus and Copenhagen Digital experiences Loveable brands Sustainable businesses 1508™
- 5. Why why why Case: sparenergi.dk Saving energy on sparenergi.dk What difference did it make? How to get started Agenda 1508™ Morgenbooster
- 10. 1508™ Morgenbooster 01 1993 14 mio. users 2000 400 mio. users
- 11. 1508™ Morgenbooster 01 Carbon emission of the internet > carbon emission of the aviation industry
- 13. 1508™ Morgenbooster 01 Data centre storing data User device executing data Transmission transporting data
- 14. 1508™ Morgenbooster 01 Data centre storing data User device executing data Transmission transporting data
- 16. 1508™ Morgenbooster 01 Cold warehouse storing prawns My stove executing prawns Container ships transporting prawns
- 17. 1508™ Morgenbooster 01 Data centre storing data User device executing data Transmission transporting data
- 19. Morgenbooster 1508™ It is our responsibility to reduce the energy consumption of our digital solutions to reduce their carbon footprint
- 20. 1508™ Morgenbooster 01 Is legislation coming for us?
- 26. 1508™ Morgenbooster 02 Our value proposition is in the core narrative “Vi står til rådighed med inspiration, viden og råd til, hvordan du får mest ud af energien” We are special because We are here to ensure a greener future We are not trying to sell you anything We know a lot about energy
- 27. Search engine keywords Press and PR Meetings and events Phone and email support Partnerships and network Display and advertising Chatbot “Boliganalysen” Email Influencers and ambassadors EED & Building Directive Politics: Economy & usage Energistyrelsen as owner IT: Legislations and security Stakeholders: partners and contractors Channels: Awareness and value proposition 1508™ Morgenbooster 02 Stakeholders
- 28. 1508™ Morgenbooster 02 Why low carbon design? To practice what we preach Show the public that you are ready to do the same as them Because it is a win-win Better solutions with higher performances and a greater brand value
- 29. 1508™ Morgenbooster 03 How might we save energy on sparenergi.dk?
- 32. 1508™ Morgenbooster 02 Responsible digital design Designing digital products and services that puts people and the planet first: Clean Efficient Open Honest Regenerative Resilient
- 33. 1508™ Morgenbooster 03 Data centre storing data User device executing data Transmission transporting data Hosting • Hosting provider Page weight • Pages • Images • Illustrations • Video • Animation • Font • Code UX and device • User-centricity • Prototype • Structure • Colours • Copy
- 34. 1508™ Morgenbooster 03 Data centre storing data Hosting • Hosting provider • Pages • Images • Illustrations • Video • Animation • Font • Code • User-centricity • Prototype • Structure • Colours • Copy
- 35. 1508™ Morgenbooster 03 Use local servers close to the user Choose a sustainable hosting provider Hosting provider
- 37. 1508™ Morgenbooster 03 Rackhosting Taastrup https://www.thegreenwebfoundation.org/tools/directory/
- 38. 1508™ Morgenbooster 03 Transmission transporting data • Hosting provider Page weight • Pages • Images • Illustrations • Video • Animation • Font • Code • User-centricity • Prototype • Structure • Colours • Copy
- 39. 1508™ Morgenbooster 03 Reduce amount of pages Only add a new page if it enhances the UX Continuously delete, delete, delete Pages
- 40. 1508™ Morgenbooster 03 From 2013 old pages to 300 new pages
- 41. 1508™ Morgenbooster 03 Avoid Replace with illustrations Load lazy Images
- 42. 1508™ Morgenbooster 03 Old site 1 image = 5000 words
- 45. 1508™ Morgenbooster 03 PNG PNG Retina (2X) JPG JPG Retina (2X) WEBP WEBP Retina (2X) Banner 1200 x 500 172.8 kB 564.1 kB 136.7 kB 235.7 kB 28.3 kB 75.0 kB
- 46. 1508™ Morgenbooster 03 Use instead of images Select SVG format Style with CSS code Load lazy Only use when valuable Illustrations
- 55. 1508™ Morgenbooster 03 Avoid Replace with animations Load very lazy - Let user choose Don’t autoplay or loop Provide alternatives Video
- 56. 1508™ Morgenbooster 03 Old site 1 sec video = 10 images = 50000 words
- 59. 1508™ Morgenbooster 03 Compress or animate SVG files in code Only use when valuable Animation
- 62. 1508™ Morgenbooster 03 Select variable font if 4< weights Select static font if 4> weights Avoid custom fonts Use W0FF2 format Font
- 63. 1508™ Morgenbooster 03 New site Roboto Flex (variable font) Regular, light, semibold and bold
- 64. 1508™ Morgenbooster 03 Font type Fonts TTF format WOFF2 format System Times New Roman 0 KB 0 KB Static open source Roboto Regular 168 KB 64 KB Static open source Roboto Light 167 KB 63 KB Static open source Roboto Semibold Static open source Roboto Bold 167 KB 64 KB Variable Roboto Flex 1,7 MB 729 KB
- 65. 1508™ Morgenbooster 03 Optimise fonts and visuals Code efficiently and clean Use lighter code languages Etc. Code
- 66. 1508™ Morgenbooster 03 User device executing data • Hosting provider • Pages • Images • Illustrations • Video • Animation • Font • Code UX and device • User-centricity • Prototype • Structure • Colours • Copy
- 67. 1508™ Morgenbooster 03 Research user needs Involve all stakeholders Document insights Return to insights continuously User-centricity
- 69. 1508™ Morgenbooster 03 Build prototypes Use it to involve stakeholders Test with users Prototype
- 72. 1508™ Morgenbooster 03 Create frictionless user journeys Ensure well-structured way-finding Put user in control Use recognised design patterns Structure
- 77. 1508™ Morgenbooster 03 Use dark shades on OLED Use less blue and more red and green Increase contrast Colours
- 82. 1508™ Morgenbooster 03 Stick to a clear hierarchy Write copy with purpose Use easy-to-understand language Prioritise SEO Copy
- 86. 1508™ Morgenbooster 03 Data centre storing data User device executing data Transmission transporting data Hosting Page weight UX and device
- 87. 1508™ Morgenbooster 03 Employ a design system Base it on web standards Design system
- 91. 1508™ Morgenbooster 03 Reduce emails Only send to the users who want them Make it easy to say no Newsletters
- 95. 1508™ Morgenbooster 03 Reduce Only track and store what you need Delete tracking data after use Etc. Plugins, widgets, third parties, tracking…
- 98. 1508™ Morgenbooster 04 Did it make a difference?
- 100. 1508™ Morgenbooster 04 Calculating emissions 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-speci fi c carbon factor) https://sustainablewebdesign.org/calculating-digital-emissions/
- 101. 1508™ Morgenbooster 04 Data centre storing data Transmission transporting data Hosting Page weight
- 102. 1508™ Morgenbooster 04 Change of mindset 01 An eye-opener in Energistyrelsen 02 An argument for design solutions 03 All the others want to do the same
- 104. 1508™ Morgenbooster 05 How to get started
- 105. 1508™ Morgenbooster 05 Advice from a client 1 Create principles, make an informed choice based on those and balance it with your value proposition
- 106. 1508™ Morgenbooster 05 Advice from a client 2 Evaluate how much the user should be in control of the energy consumption
- 107. 1508™ Morgenbooster 05 Advice from a client 3 Avoid greenwashing
- 108. 1508™ Morgenbooster 05 Web carbon calculator Find it via the link LINK
- 109. 1508™ Morgenbooster 05 1508 low carbon audit We will send you the link
- 110. 1508™ Morgenbooster 05 1508 low carbon check list Find it via the link LINK
- 111. 1508™ Morgenbooster 05 1508 low carbon course Sign-up by email to keh@1508.dk LINK
- 112. 1508™ Morgenbooster 05 Key takeaways Be aware - discuss - prioritise
- 113. Sarah Reuss Allingham Special Advisor Danish Energy Agency shra@ens.dk Kristine Emilie Hansen User Experience Designer 1508 Copenhagen keh@1508.dk Morgenbooster 1508™ Thank you Questions?