This website has been specifically designed to reduce CO2 emissions and energy consumption associated with accessing and viewing our content.

The following design elements and features have been implemented to avoid unnecessary HTTP requests that result in slower load times, poor user experience, and higher energy consumption and CO2 emissions.

In an industry first, we documented exactly how we approached and solved this challenge so we can inspire fellow designers, agencies and other industries to do the same. This case study also serves as a roadmap to help designers create low emission websites as a new service they can offer clients looking to reduce their impact.

If the internet was a country it would be world’s fourth largest polluter. We need to do better.

Recently we went to trivia night and one of the questions was ‘What has a bigger carbon footprint: sending 100 emails or driving 1km in a car?’

We answered ‘Driving 1km in a car’, because duh.

Well, we were wrong.

Since learning this startling fact and losing yet another round of trivia, we wondered what the carbon footprint of our email usage was. We went through all our mail folders and deleted every email we didn’t need or weren’t actively engaged in conversation with. We also decided that moving forward we would only respond to emails that were necessary (which has since increased our productivity — bonus!).

Before we knew it we had delved deeper into the murky depths of digital landfill, and like a Choose Your Own Adventure story we had two options:

1. Turn back
2. Do a complete digital audit



We couldn’t unknow what we’d already learned, and once you know better, you do better, right? So we started researching tools and resources that would help us calculate our emissions. 

These are our findings: 


According to the Website Carbon Calculator, our old website produced more carbon than 76.5% of web pages tested. Over one year with ±10,000 monthly page views, it produced:

• 145.6kg of CO2 equivalent: the same weight as a piano and as much CO2 as boiling water for 19,728 cups of tea

• The same amount of carbon that 7 trees absorb in one year

• 329kWh of energy

• The same amount of electricity to drive an electric car 2,108km

This was incredibly alarming and we knew we had to create a new site asap. We started this process by auditing our old website.

CODE

BEFORE

We revisited the old site’s code and noticed there were too many unnecessary HTML tags that had duplicated over time. This resulted in a high volume of requests sent to the server, impacting the overall site speed and user experience as well as being more energy intensive:

AFTER

Our new site’s code is clean with no unnecessary or duplicated HTML tags. The site runs faster and smoother.

---

TYPOGRAPHY

BEFORE

For the old site’s typography we used Monument Grotesk with different fonts: Regular, Medium, Italic. We recently changed this to the variable version so that one font file contained the same number of stylistic variations, instead of three separate font files for Regular, Medium, Italic. This was to further reduce the number of HTTP requests, but we found it wasn’t enough.

AFTER

• Primary font: Arial Regular

• Secondary font: Courier New Regular

These are both system fonts that are already installed on your device(s), therefore reducing HTTP requests, energy and emissions.

We admit we’re not super thrilled about these fonts, but we can’t in good faith use the fonts we want if we know they’re contributing to higher emissions.

• The MEK wordmark appears as text-only in lieu of a web font or image file. Our logo symbol only appears in the site’s favicon.

• Emojis and other decorative design elements are not used in order to reduce emissions. *cry face emoji*

---

COLOUR

BEFORE

We had a versatile palette of vibrant and neutral colours we used across the old site. The background colour was white to showcase our design work with clean, breathable pages that communicated copy efficiently and effectively, however white is the most energy intensive because it comprises all the colours in the colour spectrum.

AFTER

• Dark mode with a surface colour of #121212

• White at 87% opacity

• Disabled text at 38% opacity

• The contrast ratio of pink is 7:1

All colours, ratios and opacities adhere to Google’s Material Design and pass the Web Content Accessibility Guidelines (WCAG) and Colour Contrast Checker.

The new site is in dark mode (obviously). We’re not super thrilled about this either because we’ve always had light mode websites with beautiful bold colour. From a user experience perspective, dark mode is more visually appealing, and also reduces eye strain (we haven’t found any scientific data on this so if you have any please let us know).

We used pink because blue is ubiquitous in dark mode palettes and is energy intensive. Pink is one of MEK’s brand colours and is uncommon in brands in our industry and advocacy space. Also, it’s fun.





UPDATE: Since launching our new site we’re loving dark mode. *heart eyes emoji*

---

IMAGES

BEFORE

The images on our old site were high resolution JPGs with an average file size of ~700KB. These files negatively impacted speed and significantly increased energy usage and emissions.

AFTER

Images on our new site are <500KB and optimised and compressed to minimise file handling times and loads. Lazy loading is implemented, which means images only load when you scroll down to them.

---

CONTENT

BEFORE

The first thing we noticed on our old site that was energy intensive was our homepage, which had an automatic repeating slideshow of seven full bleed images ranging from 114KB to 798KB. This drastically increased the site’s speed and load time resulting in high bounce rates. The old site also included various media such as reels, videos and animations, at an average of ~8MB per file.

AFTER

The new site only has static images. They aren’t displayed at full size in order to further minimise loading but you can click on images to enlarge them. Not having big beautiful media and content with a dynamic layout pains us as designers, but we think we did a pretty good job making this site as ‘designery’ as possible within the limited constraints we had to work with.

---

LAYOUT

• The new layout is clear and easy to follow, reducing your number of clicks and allowing greater accessibility of content.

• Navigation is simplified and clearly described to make information easy to find.

• While the site design is stripped back and functional, it relies on strong typography to ensure visual interest and user engagement, minimise lengthy copy and divide sections of content into digestible forms.

---

RESULTS

After launching this site we ran it through the Website Carbon Calculator again:

OLD SITE

• Dirtier than 76.5% of web pages tested

• Produced 1.21g of CO2 every time someone visited our site

NEW SITE

• Cleaner than 57% of web pages tested

• Produces only 0.42g of CO2 every time someone visits our site

—

OLD SITE

• Produced 145.6kg of CO2 equivalent: the same weight as a piano and as much CO2 as boiling water for 19,728 cups of tea

NEW SITE

• Produces 50.5kg of CO2 equivalent: the same weight as <1/3 of a piano and as much CO2 as boiling water for 6,850 cups of tea

—

OLD SITE

• Produced the same amount of carbon that 7 trees absorb in one year

NEW SITE

• Produces the same amount of carbon that 3 trees absorb in one year

—

OLD SITE

• Produced the same amount of electricity to drive an electric car 2,108km

NEW SITE

• Produces the same amount of electricity to drive an electric car 732km

Overall we reduced our website carbon emissions by 67%.

---

NEXT

The other ways to reduce our emissions are by switching to a green host and planting more trees to minimise our carbon impact.

So our next steps are:

1. Moving to a green host by 2024. By using green hosting, our site will emit ~9% less CO2.

What’s a green host? All websites are hosted on servers, and most of the world’s servers are powered by fossil fuels. Green web hosts use clean, renewable energy.

2. MEK plants 10 trees through Carbon Positive Australia for each project we complete. We have now increased this to 15 trees to further reduce our carbon emissions.

3. We’ll continue looking for more ways to improve this site and reduce our digital impact. If you have any tips or suggestions, please email impact@mek.studio.

---

LINKS

Website Carbon Calculator
Google Material Design
Web Content Accessibility Guidelines
Colour Contrast Checker
Shortpixel
Sustainable Digital Design
Sustainable Web Manifesto
The Green Web Foundation
How to Build a Low-tech Website
Make Your Website More Energy Efficient