Sustainable website that is accessible to all
The last couple of years the world has really shifted and so too have things at DRUM. As a digital agency, we’ve been investigating how to put people and the planet first, and are on a mission to make sustainable digital products accessible to all.
Our journey to build sustainable technology that is accessible to all.
Change begins at home, so leading by example we have just launched our own website wearedrum.com. We are very proud to say it scores 100% for accessibility (Google Lighthouse), is emitting only 0.21g CO2e per page view on average (ecograder score), with a quick speed of 0.8s on desktop.
So how did we achieve this?
We started by auditing our previous site (RIP 💀) to find out what the problems were. Tools such as Google Lighthouse, Ecograder and Website Carbon helped us to identify issues that were affecting site performance, accessibility and carbon emissions.
On the accessibility side our old site didn’t fare too badly with a score of 87% but the single page application, horizontal scrolling and animations were making it difficult for people to navigate, utilise screen readers and the continuous progressive algorithm didn’t accommodate users with cognition impairments.
We began our design sprint with one clear focus: to simplify. We pared back imagery and animation, and allowed key messages and copy to take centre stage. This actually allowed us to express our brand tone of voice more, communicating to people without too many distractions.
We favoured simple graphics that could be exported at @x1 and compressed to give a low kb.
A fresh start
Understanding how a website can have a direct impact on the environment was key to how we approached our new development. The larger a page is, the longer it takes to load in a user’s browser and this has a direct impact on the amount of work both the user’s device and the servers are doing.
Similarly, by making things easier for a user to find on your site, the less time they will spend before reaching their goal.
To put it simply, make everything quicker and there’s a lot less resources used. Better for the user and for the planet 🌍
We began rebuilding from the ground up. We stripped everything back and have developed our site to have as small a footprint as possible. We added simple standard features such as lazy-loading assets where possible, minimising css and js resources, reduced the amount of calls to third parties, dramatically reduced the amount of pages and graphical elements are now dynamically served as compressed thumbnails, which when all added together improved the speed of the site dramatically and therefore drove down its footprint.
There’s still plenty more to do but we’ve got improvements lined up to reduce our impact as much as we can.
Our next job is to move it over to a green hosting provider. Data centres (and therefore web hosting) account for 2% of the world’s carbon emissions, which is as much as the airline industry (https://www.greengeeks.com/going-green).
Kaye, our MD, says:
“ When we decided to relaunch our site, we wanted the site to be eco and accessible. This formed the basis of the look and feel, supporting visuals, copy, navigation etc.
We worked tirelessly to iterate before launch and although we launched with a great carbon reduction and 100% accessibility scores from Lighthouse, we want to go further so expect the site to evolve and change over time. Our next sprint is to move to fully green hosting.
I can't wait to see how the website goes, everyone at DRUM has done a fantastic job to get us this far and with so much passion in our team to make a sustainable online presence that everyone can enjoy, I know we are going to achieve great things.”
We hope we’ve inspired you with our journey to build better sustainable technology that is accessible to all. We do offer charity and sustainability discounts to those trying to make a difference so don’t hesitate to get in touch. We would love to help you out with your next project or site audit.