Every website has a carbon footprint. Every time someone loads a page, data travels through servers, across networks, and onto a screen – and all of that uses energy. Most of the time, it uses a lot more energy than it needs to.
This is the story of a recent client project where we took a website from a grade F carbon rating to an A, cut its carbon emissions by roughly 90%, and – this is the bit I really want you to hear – made it beautiful, more functional, and easier to manage in the process.
Not despite the sustainability focus. Because of it.
The starting point: slow, clunky, and a grade F
When this client came to me, her existing website was doing its job on paper – it was live, it had pages, people could find it. But under the hood? It was slow. It was a bit clunky. The user experience didn’t reflect the quality of the work she does. And when we ran it through three different carbon calculators (I always cross-check multiple tools to get an accurate picture), every single one came back with a grade F.
For context, that F means the site was dirtier than the vast majority of websites tested. Every single page load was generating more carbon emissions than it needed to.
Here’s the thing that made this project feel especially aligned, though: this client’s entire business is built around helping people run their businesses in a way that’s sustainable – not in an environmental sense, but in terms of their own energy, capacity, and wellbeing. She supports coaches, healers, and creatives with grounded, soulful operations so they can show up for their clients without burning out.
So when she told me she specifically wanted to work with a sustainable web designer because she wanted her website to reflect those values? Yeah. That landed.
The moment that set the creative direction
Before we got into the full build, I designed a Coming Soon page with her new branding. It was a temporary page to replace the old site while we worked behind the scenes, but it ended up being a turning point for the whole project.
I hadn’t designed a site in this style before – spacious, high-end, grounded. I’ll be honest, I wasn’t 100% sure if I’d nailed the brief. And then the feedback came through:
“You’ve nailed it beyond what I even anticipated. If this is how good the coming soon page is I cannot wait for the website.”
That response gave me a huge confidence boost and locked in the creative direction for the rest of the build. Sometimes a single page tells you everything you need to know about where a project is heading.
What actually goes into a sustainable website redesign
Let me pull back the curtain a bit, because I think there’s a common assumption that “sustainable website” means stripping everything back to plain text on a white background. That couldn’t be further from the truth.
Here’s what this build actually involved:
Strategy first, always
Before a single pixel was placed, we mapped out the site structure, user journeys, and content strategy. A sustainable website isn’t just about lighter files – it’s about making sure every page, every section, and every element is there for a reason. Less bloat, more intention.
Accessibility from day one
Accessibility isn’t an add-on. It’s not something you retrofit after the pretty stuff is done. From colour contrast ratios to heading hierarchy to keyboard navigation, accessibility was woven into every design decision from the start. Because a website that doesn’t work for everyone doesn’t really work.
the design details that made my client say "I LOVE this"
This is a custom build – what I call a Breach-level project – and the design reflects that. We’re talking:
- Micro-interactions on icons – subtle hover animations that bring the page to life without adding unnecessary weight. My client’s reaction when she saw the numbers light up on hover? “So cool! Love the attention to detail.”
- A visual process timeline – mapping out her client journey in a way that’s clean, easy to follow, and looks stunning.
- Tag-filtered archives – so her blog posts and client stories can be browsed by category, making it genuinely useful for visitors rather than just a chronological dump.
- A “back to top” button – small, but thoughtful. These are the details that show you care about the experience.
Every one of those features was built with performance in mind. Lightweight code, optimised assets, no unnecessary scripts running in the background.
Custom fields: the behind-the-scenes game-changer
This one’s a bit more technical, but it was a big part of this project – and a big learning moment for me.
We wanted a tagging system that would work consistently across three different post categories (blog posts, client stories, and podcast episodes). My first instinct was to build full custom post types, but then I had one of those “aha” moments: I didn’t need separate post types at all. I could create custom fields with conditional logic, so specific fields only show up on posts assigned to a certain category.
It sounds simple when I say it now, but getting there involved trialling two different plugins, about two to three different approaches for each, and a fair bit of problem-solving. What we landed on works brilliantly – it gives the site a consistent, polished look on the front end while making it much easier for the client to manage content on the backend.
Twenty-plus years in this industry, and this project still pushed me into new territory. There’s always more to learn, and I think that’s a good thing.
The human side of the build
I want to be real about something: this project didn’t follow a straight line. I dealt with some significant energy challenges during the build, and the timeline stretched beyond what we’d originally planned.
My client was incredibly patient and understanding throughout the whole process – and I’m genuinely grateful for that. It’s a reminder that great client relationships aren’t just about delivering on time. They’re about trust, communication, and extending grace when things don’t go to plan.
It’s also a reminder to celebrate the wins. Every milestone matters, even the small ones – especially the small ones.
The results: F → A, with a ~90% carbon reduction
Let’s talk numbers, because this is the proof that sustainable web design isn’t just a feel-good exercise.
- Carbon rating: F → A (across all three carbon calculators)
- Carbon emissions: reduced by approximately 90%
- Mobile loading speed: improved by around 46%
- Accessibility: integrated from the ground up
- Client experience: a backend that's intuitive and easy to manage
This site is currently in its final stages before launch, so I’ll be sharing a full case study (with the client’s name and live link) once it’s out in the world. Watch this space.
But here’s what I want you to take away: this website is spacious. It’s high-end. It has hover animations, a visual process timeline, and filtered archives. It is not boring, it is not basic, and it does not look like a website that’s been put on a diet.
It just doesn’t waste energy doing things it doesn’t need to do.
What this means for your website
If you’ve made it this far, you might be looking at your own website and wondering what its carbon footprint looks like. Good news – you can find out in about 30 seconds. Head to websitecarbon.com, pop in your URL, and see what comes back.
And if the result makes you wince a little? That’s okay. That’s where the conversation starts.
Whether it’s a full custom rebuild, a performance sprint, or just a chat about what’s possible, I’d love to help you create a website that’s beautiful, functional, accessible, and genuinely better for the planet.