This is a series of diary entries about our journey to a cleaner site. You can check out our full Green For Good pledge here.

In this diary entry, we’re looking at pillar 5 of the pledge: “We’ll prove beautiful doesn’t mean big CO2 impact”. Colours, fonts and other brand assets all take energy to maintain and serve. So, we’ll be looking into ways to make our brand greener, which may include changes to how the site looks (dark mode by default for example), and seeing if we can use alternatives to energy-intensive brand assets while still having a beautiful site. 

Website to Green mode toggle 

17/02/2022 Matt Arnold- Frontend Developer

Green For Good is a year-long project – we have a lot to do. We hate the thought of the carbon impact we’ll have on the world before we’ve fully ‘greened’ our site, so in the meantime, we’ve created a quick solution to help – a green toggle, which is optional for people to use while browsing our website.

When green mode is in action,  large videos and images are turned off, both of which impact our carbon impact score. By activating the toggle, a ‘sustainable-mode’ cookie is saved in the user’s browser and the page is refreshed. Cookies are pieces of data used to remember information about a user. 

A conditional statement in the code checks whether this cookie – a simple boolean – is set to true. If it is, large images, video content and tracking code don’t get rendered.

We’ll be back soon with another update looking at another area we’ve tackled to improve our site. In the meantime you might be interested in this article on the carbon footprint of the Internet which contains some interesting facts.

Remove whitespace with no purpose

06/06/2022 Ed Nicholson- Brand Experience Director

One of the aspects we discussed at the workshop was removing unnecessary white space on our website. It was a hotly debated subject,  trying to strike the balance of  website and brand design aesthetics versus potential carbon savings. 

After discussing the topic with our engineers, we agreed the carbon saving was minimal, and actually the effort needed to make the substantial changes required would generate greater carbon emissions.

We recognise that parts of our site require digital experiences that are more carbon-intensive than others. To that end, we’re not advocating plain text websites. Instead, it’s about minimising CO2 impact where we can, in ways that make sense. 

Modify Organic logo to animated scalable vector graphic (SVG)

06/06/2022 Ed Nicholson- Brand Experience Director

As part of the work to reduce our carbon impact, we’ve been investigating different ways to convey our brand across the Organic website. For example, if we reduce the use of imagery and video, how else can we visually present our brand?We discussed a number of possibilities. These included reducing white space (discussed above), implementing a typographical-only website, and having more SVG animated parts for logos etc. For the time being, we’re progressing with the green toggle, giving users the opportunity to define whether they want a rich experience or not. As time goes by, we may tweak the overall design to consider some of our other ideas.