The Hidden Impact of Websites: Building a Greener Digital World

Are you a designer or developer looking to commit to a more sustainable approach, but can’t figure out how to convince your boss? Or are you a business owner wanting to learn how your website impacts the environment, but don’t know where to begin?

Good news, you’ve come to the right place!

No matter who are you, what you do or where you come from, sustainable design affects us all.

In this free webinar, we’ll be sharing our insights, tips and tricks vital for building websites in a more sustainable way. You'll leave with the knowledge to make software choices that minimise environmental footprint and empower you to move towards a greener digital future.

Session Overview

- Explore the environmental impact of the digital world and how optimising your website is a key factor in reducing your carbon footprint.
- Deep dive into future-proofing your digital destination and unpick the 10 principles of sustainable design.
- Walk through the best practices and tools for low-carbon design that delivers high-impact results without compromising on design or functionality.
- Discover why a carbon-conscious approach will not only benefit the environment but communities and businesses as well.
- Finally, we’ll end with a Q&A session and you’ll have an opportunity to connect with like-minded individuals all committed to making a lasting impact.

Who is the Speaker?

The speaker is Matt Wheeler, Founder and Director of madeby.studio, a Leeds-based website sustainability consultancy.

Matt is the Co-Founder & Digital Director of madeby.studio, founded in 2019. More recently, he has focused on leading his team to build web experiences for businesses that care about people and the planet. He is listed of one a BIMA 100 within the 'Champions for Change: Planet' category for the work he has been doing in digital sustainability.

He is a formally trained graphic designer and self-taught software developer where he has used his knowledge to build effective design systems and development frameworks with careful consideration of sustainability, inclusion and accessibility.

Transcript

1. Hi, I'm Matt Wheeler Co-Founder & Digital Director @ madeby.studio The Hidden Impact of Websites: Building a Greener Digital World. @mattmultiplied 1
2. We pride ourselves on our commitment to technical excellence, building digital solutions with sustainability & accessibility ingrained at every step of the process. High performing responsible websites. 2
3. What We Do. We focus on three pillars to deliver our award winning digital solutions: People, planet and profit. We're specialists in crafting sustainable websites and online applications that are better for the planet and your bottom line. Websites. Our team of digital experts can provide an in-depth audit, analysis and action plan to transition towards a sustainable and profitable future. Digital Consultancy. Can you identify a clear ROI on your current digital marketing? We embed data tracking across content, social and digital media creation to get real results. Digital Marketing. 3
4. Trusted by global brands. 4
5. The hidden impact of websites. 1 5
6. The aviation industry accounts for 2.5% of global greenhouse gas emissions. Our World in Data, 2020 6
7. Internet use accounts for 3.7% of global greenhouse gas emissions. Energuide, 2020 7
8. If the Internet was a country, it would be the 4th largest polluter. Sustainable Web Manifesto, 2021 8
10. Green Hosting solves all our problems. 10
12. It solves part of the problem. 12
13. It's time for the web to become more sustainable. 2 13
14. Sustainable UI/UX Design. 1 14
15. 1. Incorporate JEDI design practises. • • • • Does the design process for your website incorporate: Justice Equity Diversity Inclusion As digital professionals, we're privileged with fast internet connections and powerful devices. Remember to design for everyone, not just you. 15
16. 2. Plan the journey. • • • • • • • A shorter, more concise user journey not only provides an increased ROI but also saves on energy. Some things to think about: Clarity of content Usage of whitespace - good or bad? Primary call to action Potential distractions Amount of clicks to goal User accessibility features Deceptive design patterns 16
17. 3. Keep it lightweight. • • • • • • You will have heard the saying, "Less is more". Not only does this improve your website efficiency, but it's a common UI/UX best practice that helps: Scalability Accessibility Performance Information clarity Website efficiency Design consistency 17
18. 4. Reduce, optimise & remove 'heavy' assets. • • • Images, videos and fonts are often the 'heaviest' elements of a website. Are they providing value to your users? Reduce Optimise Remove 18
19. 5. Use a concise design system. • • • • Using a design system helps streamline the process for both designers and developers, providing an overall more sustainable product through: Saving time on development Making components reusable Standardising colours & fonts Component level accessibility 19
20. Sustainable Development. 2 20
21. 6. Green web hosting. • • • • Green web hosting is a server that uses 100% renewable energy to power its data centre. Green Web Foundation Digital Ocean (LON 1) Scaleway Krystal The more sustainable a website is, the more traffic a server can handle, reducing infrastructure costs. 21
22. 7. Repeat & reuse. • • • • • Another best practise of development is using repeatable and reusable components: Make it modular Reduce technical debt Deliver consistent results Align with web best practises Take advantage of code-splitting 22
23. 8. Reduce page weight. • • • • • • • • Optimise everything as much as you can to reduce the page weight. Minify your code Restrict font weights Inline scripts and styles Use static site generation Optimise images and videos Lazy load all your visual assets Modern image & video formats Remove unnecessary code bloat 23
24. 9. Cache, cache, cache. • • Serving a cache version of your website greatly reduces the required energy to serve your website. Increase performance Reduce page weight 24
25. 10. Is that content really needed? 90.6% of internet content gets absolutely no traffic from Google. So ask yourself, is it really needed? 25
26. Being sustainable doesn't mean sacrificing results. 3 26
27. Typical Website. The results shown on the right are a baseline median for a typical website. A typical web page generates 0.235g of CO2e per view. With 10,000 monthly views, this amounts to 29kg of CO2 annually. This is comparable to 3820 hours of using an LED lightbulb! 10,000 page views per month visualised annually for a typical website. 3820 Hours used of an LED bulb 1364 Kettles boiled for cups of tea 167 Hours used of a mobile phone Carbon Rating Scale C 27
29. 1453 Hours used of an LED bulb 519 Kettles boiled for cups of tea 152 Hours used of a mobile phone Veco Audit. The results shown on the right is the current impact of your website. Your web page generates 0.090g of CO2e per view. With 10,000 monthly views, this amounts to 29kg of CO2 annually. This is comparable to 3820 hours of using an LED lightbulb! 10,000 page views per month visualised annually for your websites homepage. Carbon Rating Scale A Green Hosting Y 29
30. Google Lighthouse Audit. Performance 97 Best Practises 100 Accessibility 100 SEO 100 30
31. 265% increase in website engagement time within the first 3 months of launch. 31
32. Ultimately, it's all about reducing wastage. 32
33. audit.madeby.studio 🔗 33
34. A few helpful resources. 4 34
35. Web Sustainability Guidelines 1.0 35
36. Sustainable Web Design​ 36
37. The Green Web Foundation 37
38. Green Software Foundation​ 38
39. Bringing together the North’s GreenTech community to connect, share knowledge and collaborate. Thursday 19th September 2024 links.greentechgathering.co.uk hello@greentechgathering.co.uk Thursday 19th September 17:30-20:30 📍 Parallax, The Elbow Rooms, 64 Call Ln, Leeds LS1 6DT
40. For a free website audit: audit.madeby.studio Digital Enterprise Top 100 | Great British Entrepreneur Awards Finalist | Santander X Entrepreneurship Awards Nominee | Leeds Digital Festival Thrive Award Nominee | SME News - Most Innovative Web Design Agency 2024 | Santander X Global Awards 2021 UK Finalist | Yorkshire 42 Under 42 2022 | Northern Enterprise Awards - Best Graphic Design & Development Company 2022 | BIMA 100 Champions for Change: Planet Matt Wheeler matt@madeby.studio @mattmultiplied 40