The Sustainable Creative Charter was co-created as part of Goodfest Cornwall 2021. It is built as an example for other creatives; an example of how you can design and build an ultra-low carbon website whilst retaining a creative edge. In this article, Nick, Leap’s senior web developer, explains how he went about creating the website.
View the Sustainable Creative Charter
Design
The site is really as light on design as it can be, to be as carbon efficient as possible. I wanted this to be an experiment. How light can the site be, whilst still feeling designed? It is a creative charter after all!
The main aesthetic relies on system fonts (the default fonts that come pre-loaded on your device), which these days are really quite lovely, (San Francisco on Mac OS/iOS, Roboto on Android devices etc) and using a stripped-back gradient colour palette that is still accessible.
The ‘logo’ is pure SVG. No images here. This means it is vector-based, it can shrink and grow without losing quality, all the while being lighter in bytes than an image equivalent. It also means we can change the colour of the logo with code, without loading any additional resources.
Simplicity of build
The website is a custom, wonderfully simple theme, built over WordPress. The site could have been built completely static without the use of a content management system, but for this project, we knew that there was going to be a time when content needed to be updated quickly, in almost real-time during the festival that the charter is created from. It also needed to be managed and updated in the future by users who don’t have developer skill sets. WordPress, in our opinion, is still one of the best solutions for this kind of website build.
The simplicity within the theme means; no build tools; no CSS starter kits; no CSS preprocessor; no JQuery or other Javascript libraries, just plain vanilla JS. It’s been great to strip things back even further for this project and work with the three core fundamentals of the web: HTML, CSS and JavaScript – with a sprinkling of PHP within WordPress.
Further from this, we have stripped out many of the default loaded items from WordPress itself. Using functions within our code, we stripped out Gutenberg (WordPress’s now default editing system), JQuery, Emoji font handling and more, greatly reducing WordPress’s initial loading weight.
Carbon efficiency
The site is built to be light. Very light. Around 125kb of data transfer. The site uses about 0.09g C02 per page view.
This means it’s a very fast loading, low-impact, low-carbon website. No custom fonts, considered, light styling, and only adding design flourishes when the server it runs on is powered by more renewable energy sources than fossil fuels. Our servers are carbon neutral – but they pull power from the National Grid which has fossil fuel-generated electricity in its mix of power.
Flourishes – only when running on renewable energy
As it states in the website’s footer;
The design of this website is adjusted based upon the number of fossil fuels on the grid.
For this site, this means that we can add additional animation to the logo, and colour changes across the website based upon the number of renewables on the National Grid. These animations and changes are light, but still have a carbon cost to them, as they require the machine viewing the website to use additional power through the browser needing to run them.
Our approach to this? Hook into the National Grid’s Carbon Intensity API and use the information returned to tell the website whether to run these flourishes or not. Our servers are based in the North West of England. If there is too much fossil fuel being used across the National Grid in that region then the website will be more static. If there is more renewable energy in the mix then the flourishes kick in, adding to the experience of the website.
Analytics – private and carbon aware
For The Sustainable Creative Charter, we wanted to do something different. We opted for Cabin. A privacy-first analytics platform. It is very light, doesn’t use cookies, and is hooked into the Website Carbon API to give an indication of how much carbon different web pages create. With this in place, we can see some useful data on the numbers of people viewing the website and where they come from, but we don’t need to create a GDPR cookie consent banner, as all the data is anonymous.
We hope you agree that it is possible to create a simple, low-carbon designed website. One that doesn’t cost the earth to produce or operate. We’re proud of The Sustainable Creative Charter and look forward to seeing it progress and grow out of Goodfest Cornwall 2021.
View the Sustainable Creative Charter website.
