How might we design websites to use less energy and produce less carbon?
Digital design strategies to reduce carbon emissions, improve inclusivity, and foster sustainable user behaviour
About
Every web page visited, image loaded, video streamed, online purchase made, information submitted, and backend system call generated by online activity requires energy to power and process the data flowing between devices, network systems, servers and back again, many times over—all of which emit CO2.Information Communication Technology (computers, phones, and TVs) are now responsible for far more greenhouse gas emissions than the aviation industry.The best place to start reducing the emissions from digital products and channels is to check options for green web hosting.
Green hosting
Simply altering your choice of hosting can make a significant impact
Assess your websites
Use online tools to assess the current state of your website, set a benchmark, and get tips to improve.
- Ecograder provides a score out of 100 for websites and provides advice on how to improve sustainability via performance, find-ability, and UX—ecograder.com
- The Website Carbon Calculator estimates the carbon footprint of web pages and provides tips to improve—websitecarbon.com
- To aid continuous improvements, ‘Ecoping’ is an analytics tool to track website carbon emissions—ecoping.earth
- web provide reports on the performance of a page and provides suggestions on how it may be improved— pagespeed.web.dev
There is a lot to improving the sustainability of digital experiences, and much of it is to do with minimising code use and system structures. But there are also numerous strategies that the designers can implement to reduce the energy used by systems and users.
- Optimise content
- Use images, videos, custom fonts, and animations sparingly
- Optimise videos and images using tools like tinypng.com
- For images, use WebP or AVIF format for complex images like photos, and PNG or GIF for simple images like logos
- For video, use WebM instead of MP4 and GIF—WebM has higher compression, so its quality may not be as good as MP4, but it should be acceptable
- For graphics, Use SVGs and sprite sheets
- Minimise styling
- Design for mobile first
- Maximise user journey efficiency
- Minimise emails and communications
- Encourage sustainable behaviour
Sustainable digital design
- Making sustainable improvements to an existing site ↗
- Life-centred design for digital designers ↗
- An inclusive and planet-friendly digital style guide ↗—Let’s embed sustainability, accessibility, and diversity into our style guides
Inclusive digital design
- An inclusive and planet-friendly digital style guide ↗—Let’s embed sustainability, accessibility, and diversity into our style guides
- UX Accessibility Checklist (WCAG 2.1AA) ↗—A ‘learn as you do’ accessibility checklist
Sustainable User behaviour
Links
Explore free tools and more
Create a free account to access LCD tools, free guides, videos, and more
Take the lead
Life-centred design aligns designers and businesses with global goals, and gives them the skills to respond to today’s wicked problems in practical and measurable ways.
#2 Amazon Best Seller in Engineering Design, Dec ’22
“The ideas really resonated with me as I’ve felt this growing unease with human centred design’s echo chamber”
“Super helpful tools for designers… I’ll be sharing them with the students.”
“An amazing book about the topic.”
