Recommended
More Related Content
Similar to Start Your Journey In Creating Sustainable Web Designs
Similar to Start Your Journey In Creating Sustainable Web Designs (20)
More from UXDXConf
More from UXDXConf (20)
Recently uploaded
Recently uploaded (20)
Start Your Journey In Creating Sustainable Web Designs
- 2. —A COLLEAGUE “It does not need to be plastic... there are recyclable bottles as well”
- 3. vs.
- 6. It is more important to practice sustainable habits than favour one material over the other.
- 7. Claire Thornewill Web Performance Consultant Netcentric GmbH
- 8. The Internet
- 10. DIGITAL = GREEN
- 11. 1.6 billion tons in greenhouse gas emissions annually most polluting country in the world of global greenhouse emissions
- 12. 3.7% of global greenhouse emissions most polluting country in the world 1.6 billion tons in greenhouse gas emissions annually
- 13. 3.7% of global greenhouse emissions 3rd most polluting country in the world 1.6 billion tons in greenhouse gas emissions annually
- 14. Email alone... typical year of incoming mail for a business user 136 kg 1 less email one fewer “thank you” email a day would save more than 16,433 tonnes of C02 equivalent to taking 3,334 diesel cars off the road
- 15. Behaviour... low-carbon technology resulting in higher-carbon because we use it more one-sixtieth the footprint of a letter sending 60 times more emails
- 16. It is not what you are consuming, it is about how you consume it.
- 17. —TOM GREENWOOD Sustainable Web Design “Sustainable web design is an approach to designing web services that prioritises the health of our planet”
- 19. Where do I even start?
- 20. ● www.ecograder.com ● www.websitecarbon.com ● webpagetest.org ● Page Speed Insights Measure
- 22. The whole team Define a purpose. don’t put something on the web unless it really matters to you and your users Less is more. the faster users fulfill their goal, the less energy they will spend Define a budget. embrace performance budgets and learn to live within them
- 24. Designers JEDI practices. Assets. using images efficiently is one of the best strategies to reduce file sizes and energy use Custom fonts. try to use system fonts that are already on the users device Dark mode. Using dark designs reduces the brightness the screen, which means the less energy is used shift our perspective to design for the least privileged users Justice, Equity, Diversity, and Inclusion
- 25. Content & Marketing Reduce heavy content. Give it an expiry date. consider that your content should be taken down after it has served its purpose be mindful with the type of content you are using on the page and reduce the imagery that has little purpose Make it actionable. make content as clear as possible to reduce the time users spend on deciding which path to take
- 26. Content & Marketing Reduce heavy content. Give it an expiry date. consider that your content should be taken down after it has served its purpose be mindful with the type of content you are using on the page and reduce the imagery that has little purpose Make it actionable. make content as clear as possible to reduce the time users spend on deciding which path to take
- 27. Developers Up to date tech stack. Reduce Javascript. ask yourself if JS is really necessary and how you can make it more efficient technology keeps evolving and getting more advanced and efficient so make sure you are up to date Switch to a green host. the energy news to come from somewhere to run data center and the cooling systems, make sure it is renewable
- 28. Impact low high Impact Reduce media files Dark mode Reduce Javascript Update stack regularly Optimise hosting Optimise assets & fonts etc. Remove old content JEDI principles
- 29. It is not what you are consuming, it is about how you consume it.
- 30. Live more consciously and mindfully in everything you do. At home. At work.
- 31. Claire Thornewill Web Performance Consultant Netcentric GmbH
Editor's Notes
- “I would recommend to have some small bottles of water available, as the tap water is not being used so often, we should not take any risk drinking from it.”
- How many of you choose glass over plastic - how many of you do it because you are trying to do your part?
- Glass has an advantage in recyclability and the production of the packaging, however, because of the enormous difference in weight, the impact of glass, especially in the transportation phase, is significantly higher. You might instinctively reach for a glass bottle to avoid buying a plastic alternative, but glass also takes more resources and energy to produce.
- How many of you use a tote bag because it’s better for the environment
- 32 Bags! what people are talking about enough are the carbon emissions of things and so we think we are being green. It has been calculated that a tote bag needs to be used 327 times - 10.464 uses here you see There are so many ways it costs the planet that you haven’t thought about Awareness is what missing - I am only learning myself.
- Its not about the material - its about the behaviour - because if you dont think about it it can have quite an environmental cost that we dont think we are https://www.envirotech-online.com/news/business-news/44/breaking-news/glass-vs-plastic-which-bottles-are-worse/48297
- I want to talk about a really large hidden environmental cost that many people havent thought about.
- When we think digital we think eco Reading newspaper online does not waste paper … same as reading a book, sending an email instead of a letter (its faster, its cheaper and its way more convenient) Right, because newspaper needs paper and Internet doesn’t … sooo, Internet is green … unfortunately that is not the case.
- Even though it doesn’t use paper or plastic, Internet uses one other very important and often eco problematic resource … ELECTRICITY Electricity needs to be produced somewhere and unfortunately most common way still is by burning fossil fuels. 80%
- According to the BBC 1.6 billion tons of greenhouse gas emissions estimated to be produced in the manufacture and running of digital technologies between all internet users around the world ca. 4 Billion it means each of us is responsible for ca. 414kg of carbon dioxide a year - A typical tree can absorb around 21 kilograms of carbon dioxide (CO2) per year => 20 trees https://www.bbc.com/future/article/20200305-why-your-internet-habits-are-not-as-clean-as-you-think https://www.viessmann.co.uk/heating-advice/how-much-co2-does-tree-absorb
- According to the BBC - the internet alone makes up 3.7% of global greenhouse emissions, according to some estimates. It is similar to the amount produced by the airline industry globally and these emissions are predicted to double by 2025.
- According to the BBC - the internet alone makes up 3.7% of global greenhouse emissions, according to some estimates. It is similar to the amount produced by the airline industry globally and these emissions are predicted to double by 2025.
- typical year of incoming mail for a business user – including sending, filtering and reading – creates a carbon footprint of around 136kg -equivalent to driving 320km in an average car. Thats a little more than london to leeds A recent study by the energy company OVO found that the UK sends more than 64 million unnecessary emails every day. Furthermore, if we sent one fewer “thank you” email a day, it would save more than 16,433 tonnes of carbon dioxide a year. That figure is the equivalent to taking 3,334 diesel cars off the road. The total impact is up to 23,475 tonnes of CO2 a year.
- The average email has just one-sixtieth the footprint of a letter, according to a back-of-the-envelope comparison. That looks like a carbon saving unless you end up sending 60 times more emails than the number of letters you would have posted in days gone by. Lots of people do. This is a good example of the rebound effect – a low-carbon technology resulting in higher-carbon living simply because we use it more.
- Live more consciously and mindfully - same goes for your internet consumption Go straight to a website and remove a step by removing your search - 16 million trees would need to be planted to offset the pollution caused by the estimated 1.9 trillion searches on google alone
- -- sustainable web design is mostly about lowering the amount of energy needed to access the website -- intertwined with UX and performance We have the responsibility as designers, developers and product managers to be mindful about how we design and build things -- you can reduce your carbon footprint by using sustainable design and development practices: the lighter the site is the less energy it uses, less bandwidth and less computational resources it will use and as a bonus you will get fast and smooth user experience -- all roles are equally responsible and for each of these optimisation PO has to be onboard, designer has to take into consideration when designing and developer has to implement it
- Most important thing when it comes to optimising and natural step one is always: measure How bad/good it actually is ?
- Most important thing when it comes to optimising and natural step one is always: measure How bad/good it actually is ?
- [aprox … XX min] Measurements for google.com on website carbon
- https://addyosmani.com/blog/performance-budgets/ -we bloat pages with features because they are popular, standard, cool, cute, sexy
- JEDI - When we shift our perspective to design for the least privileged users who have slow connections and more basic devices, we not only create more accessible and equitable digital experiences, we also create more efficient experiences that use less data and less processing energy. We built a tool to simulate: connection speed, CPU level, memory level, reduce motion, save data, tracking Assets - Ensure that all images have a justifiable purpose. Size images as small as possible to achieve your objectives and see if you can achieve similar visual impact with alternatives such as SVG graphics and CSS styles. Are images scaled appropriately for display devices? Are file sizes optimized? Does the CMS automatically resize uploaded user images to ones more appropriate to the web? Custom Fonts -A typical custom font file can be over 200kb and may only include a single weight. Multiple typefaces and multiple font weights can add up quickly, increasing energy use and causing slow performance. If you need them, OPTIMISE: subset and use latest formats woff2 and dont load them in your Header Dark mode -To see something on the screen a lot of small lamps have to shine in different color, and you can guess, the less bright light is, less energy it uses, which means darker designs support sustainable design and it is less strain on the eyes
- -- for years now enemy no1 for developers have been carousels
- -- for years now enemy no1 for developers have been carousels
- Everyday technology is more advanced than the day before - So revising stack on a regular basis and seeing what is new can make a huge impact Chrome Dev Summit - 80 petabytes of unneeded Legacy JS is being delivered per month => that was recalculated to 54,000 metric tons of CO2 => which needs 37 million trees to offset ⇒ 37 million trees just because of Legacy JS !!! Host providers have thousands of computers to process data and the room gets very warm - They need to keep the air cool, so air conditioning systems are a must for this industry and those systems consume a lot of energy. The Green Web Foundation is doing a fantastic job by providing a list of the most eco-friendly host providers in the world. Consider picking one of them for your next project.
- Live more consciously and mindfully - same goes for your internet consumption Go straight to a website and remove a step by removing your search - 16 million trees would need to be planted to offset the pollution caused by the estimated 1.9 trillion searches on google alone