Insights from creating a low carbon website

One of the specific commitments we made last year was to transition to renewable hosting for our website and reduce our digital carbon footprint.

This started with our website.

Our old website was created using Squarespace, which makes things a little more complicated. On platforms like Wix, Squarespace etc you get the full package — and therefore a trade off: easier design for “dummies” but no option for choosing a hosting provider. Having enquired with Squarespace on a number of occasions, it was not looking like we were going to get to where we needed any time soon (Squarespace — we are looking at you!). So we had to transition to a custom-created website that was more flexible and addressed 3 specific issues:

• Could be optimised for carbon impact — website efficiency and design choices are a big part of the digital footprint;
• Had renewable energy-powered hosting option;
• Still could fit into an SME budget and offer user-friendly maintenance.
  

Here is the challenge for Rory Lawrence at WayMoby – Brand Identity Design– a Boutique Design Studio — and off we go. Rory has never had this sort of inquiry before, but he was happy to take this on.

Insight from the process

Here are a few insights from the process that we would like to share:

The new website design was built around the idea of simplicity.

It is easy to make something complicated, but extremely difficult to make something simple. In this case, the requirement of making the website low-carbon focussed the efforts from the very beginning.

We used Webflow

‍A no-code cloud solution for website creation and hosting. It generates clean semantic code without unnecessary scripts.

We used sustainability principles “reduce, reuse and recycle”

Some examples of how we embedded these into the website design include how we:

• Refused code, images, and animation that may look fancy but add no value for our website visitors.
• Reduced the image sizes, compression and formats.
• Reused the same visual elements wherever possible.
• Used a standard font: Montserrat, which is supported by all devices and does not require extra loading. As a result, we developed a website that represents us whilst still loading quickly and performing well on all devices, even with unstable internet connections.

We optimised for energy usage

‍Each component of the website operations matters not just the website performance — the energy your web host uses to power its servers, your domain registrar, any other links and widgets your website has on its pages and how those websites/ networks are powered etc. We went through optimizing all of these as much as possible to see results.

There is one element that we retained on the website even though it adds carbon — Climate Clock. We think it is important to keep a reminder of our stark reality in plain view!

We balanced visuals and 'weight'

‍To make a website that works and looks great, it was important to find the right balance between images that create visual interest but don’t add too much weight to the website.

Some examples of optimising images include:

• Using a transparent image: thus only loading once and appearing several times.
• All the images are resized and cropped: to be as small as possible without sacrificing quality.
• Animated only essential elements: that contribute to better UX. Animation might look great and hypnotise users, but it is too heavy. It may create problems loading correctly on mobile phones, not to mention the vast server space it occupies. Simplifying all functionalities reduces the server load and energy consumption.

So how did we do on carbon?

We use the Wholegrain Digital's Website Carbon Calculator to measure our efforts. The new version of our website is more than 80% cleaner than the previous one based on the below stats.

Before

After

We have one snag….

It suggests we are not powered by renewable energy hosting provider? But the Green Web Foundation says this:

‍

So what is the deal?

Two things:

1. Green Web foundation includes compensation (i.e. offsets) into the definition of Green.

So the provider might not be using renewable energy but using offsets to qualify. We have explored a number of “green hosting” providers, many of which either didn’t disclose what energy they used or were open about “matching the energy” or using offsets. Beware of the range of definitions when you are taking on the “green hosting”! 

2. Webflow websites are hosted on Amazon Web Services (AWS) — AWS’ target is to move to 100% renewable energy by 2025 — currently almost 90%.

This is an improvement from what we had before but is not 100% renewables powered. However, Amazon is one of the largest investors in new renewable energy sources so these 90% are not offsets or REGOs, these are coming directly from generators that would not be there if not for this investment.  

‍

Why didn’t we go for a hosting provider with 100% renewable energy?

Having spoken to a few website developers, it simply meant a more expensive project and maintenance — using a different platform like Wordpress to build the website from scratch with more complex upkeep after (complex for our team and the type of expertise we have access to). For a small business like ours, this had to be a trade off to make.

We are not at zero impact yet, so we will continue to look for refinements and actively follow AWS renewables development.

We believe this to be an example of a clear win-win for everyone involved in implementing these solutions:

• Bemari team can be proud that their new virtual “office window” looks great and comes with a carbon footprint that is a little lighter!
• Website visitors enjoy its aesthetically pleasing look and powerful easy-to-digest marketing messages.
• Rory, our developer, mastered a new area of expertise, can now considers low-carbon website creation one of his unique value propositions.
• More organisations can now benefit from Rory’s magic touch and more websites will be redesigned to have a lower carbon impact.
• Hopefully, you benefited from reading our lessons learned from this process and can evaluate your website decisions.
  
  

PS: A big word of caution for all of us to be aware of — even if per view each page is lighter, the more views the pages get, the higher the carbon footprint (like with anything else - a lot of something small is still a lot!). So we want each of the pages that are visited to count and not drive traffic to something that we do not think offers value worth the carbon impact.

Want your business to leverage this win-win strategy? Get in touch!