We have a confession to make.
Up till the other week, our website had a carbon footprint that we were not particularly proud of.
Fessing up
It’s not the nicest thing to share but our slightly out-dated website was grubbier than we realised. In fact, it was in the bottom 11% in web pages, according to websitecarbon.com
Of course this couldn’t go on. So we got our zero waste bucket of website cleaning things out and started redesigning our website.
Even we were blown away by the impact we’ve had. Our pages are now in the top 20% of environmentally sustainable web pages.
Hurrah indeed!
We know there’s more improvements to make, but we’re very pleased with this step change improvement.
How we designed our carbon saving web pages
“Every design change had the environment in mind. We researched and followed low impact web design practices as closely as we could. It was a collaborative effort across tech and design.” Says designer Joe.
He explains, “from a technical perspective a lot of work went into the architecture of the page and how we could reduce the amount of data and imagery that was presented to the user.”
It’s common knowledge now that big images are carbon guzzlers, so “we created various formats of each image and only loaded the ones that the user needed to see for whatever specific device they are using.”
Joe goes on to say, “From a design perspective we focused on a dark colour palette to reduce energy consumption and small size imagery only where it was absolutely necessary and wherever we could we used svg files that were designed to be as lightweight as possible.”
These design constraints have ended up with a fresh new, contemporary look that we love, not just for its eco creds but also for its slick aesthetic.
Our changes have meant that for every 10,000 visitors, our web pages only use 1 trees’ worth of carbon instead of 20.
Our top low carbon web design tips
- Introduce a dark background
- Remove big images
- Use icons instead of images where possible
- Only load content when people scroll onto it
Follow our lead
It’s simpler than you think. Our lead designer Joe says: “Whilst there definitely were some challenges, once we defined the initial look and feel, along with the architecture of the build and the changes in process, it wasn’t hard to flow that through the rest of the landing pages.
Joe concludes, “Once you have that initial learning, you can apply it to all of web design going forward. It’s about making small, smart, considered changes.”
As the climate crisis deepens, we need to save every drop of energy that we can. Shifting websites away from generic white backgrounds towards darker tones can only be a good thing environmentally.
Tom Greenwood, Wholegrain Digital, in his article on dark colour web design best practice, featuring Do Nation
Now we just need to re-brand this blog!
Do Nation blog 