The Sustainable Creative Charter – co-created as part of Goodfest Cornwall 2021 – 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, our senior sustainable web developer, explains how he went about creating the website and why we made the decisions to create it in this way.
View the Sustainable Creative Charter website.
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 and considered? 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 colour palette. 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 sprinkle of PHP with 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 21kb of data transfer. This means the site uses about 0.01g C02 per page view.
For those that don’t know what this means, essentially it eludes to 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. The website sits on our servers, which are powered by renewable energy.
Flourishes – only when running on renewables
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 by default, carbon aware
You’d be hard-pressed to find a website that doesn’t include some level of analytics code to track how it is being used. Many opt for Google Analytics, which has a lot of features for free. It is certainly a go-to source for analytics.
However – its privacy kind of sucks, requiring you to add a cookie notification banner to your website. Plus, it’s pretty heavy to load as an analytics platform.
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.
If you’re interested in learning more about creating sustainable websites, Nick writes about his learnings over on the-sustainable.dev. You can sign up for free to access all the resources.
Need help in making your website more sustainable? Leap can help make your website low-carbon. Get in touch and let’s see what we can achieve together.