Sector(s)

Team Members

paul.moloney

Project Team

Paul Peet, Project Manager

Paul Moloney, Drupal Developer

Andrew Dickens, Front End Developer

James Clegg, Lead Designer

Neil Clark, Environmental Lead

Visit the site

Visit the site

Organizations Involved

Community contributions

We did not make any community contributions for this project - we were lucky that most of our key functionality was already covered by contributed modules and a handful of community patches. But we did do some custom work for project-specific requirements:

  • Using multisite to create a related site, RE100, which reuses most of the features of the main site and a sub-theme that inherits from the main site theme.

  • Patches for the .htaccess file to add redirects for specific domain redirects.

  • Created a custom module to calculate the time it would take to read an article based on the total word count of particular paragraph types.

  • Each initiative run by the Climate Group has its own branding, and its brand colour is used to update page elements such as links and background images as you move to those parts of the site.

  • Custom sub-menus on initiative pages like AP100 or Climate Week NYC that persist as you explore those areas.

This was a particularly special project for Manifesto. It marks the creative agency’s first end-to-end sustainable Drupal 9 website build.

The Climate Group is an international non-profit organisation. Its mission is to accelerate climate action, to achieve their goal of a world of net zero carbon emissions by 2050, with greater prosperity for all.

Leading by example

Approaching this build wasn’t easy. There’s very little in the form of data-led evidence to follow, which meant our team had to map out every best practice - and then question each one of them. Letting insight and research take the lead.

We tightened up unnecessarily long visitor journeys. We introduced limits, file-type requirements (such as SVG) and optimisation rules around images and icons, which are huge contributors to a site’s heaviness. We also got rid of auto-playing videos, replacing them with static images, and prevented YouTube scripts from auto-loading. This meant energy was only used if a visitor clicked on a video. And on an aesthetics front, we dimmed down the website’s overall colour scheme. 

This isn’t everything, but it gives you a good idea of how granular we went to reduce emissions. Throughout the project, our entire team worked simultaneously. We  caught up on weekly stand-ups, ensuring proposed solutions were achievable. This maintained that line of communication we knew would be so important to making this project a success.

Cutting page weights in half

Overall we cut down page weights by 50% which, in turn, halved the average page load time, increasing the website’s overall SEO and security rankings. The project also saw bounce rates decrease, just as support has increased – two of the charity’s non-environmental priorities.

Since go-live, visitors have spent 40% more time on the website during each session, instead of generating lots of shorter visits. Visitors are also returning more frequently – up from 16% to 22% – which suggests site navigation is clearer and more practical than previously.

About the project

Previously, the Climate Group had been operating three separate websites, all producing their own emissions. But with the digital industry responsible for at least 1.4% of global emissions, the Climate Group decided it was time to change its own digital footprint, by reducing their digital emissions.

Our mission is to drive climate action, fast. So it was really important for us that sustainability was at the heart of our recent website overhaul project.

“We were delighted with how Manifesto guided us through the process to create a stand out site presence, that not only showcases our global brand, but does it in a way that is good for the planet.” Nazneen Nawaz, Head of Media and Corporate Communications at the Climate Group 

This is likely a result of Manifesto’s mantra throughout the build - that ‘every byte counts’. By actioning every incremental gain possible, and approaching the project as a positive challenge to reduce emissions as opposed to one with negative constraints, we could achieve such transformational improvements.

Why Drupal was chosen

Drupal 9 won out as the best-suited CMS. With Version 9 having recently landed, Drupal was also one of the most up-to-date CMS choices on the list. We then established a strict pattern library approach. This allowed us to prevent a future bloated code base, whilst also keeping backend and frontend developers separate and focused on what they’re good at.

Technical Specifications

Drupal version:

Why these modules/theme/distribution were chosen

Manifesto sought out the most stripped back theme, which was ‘stable9’. This theme contains minimal markup. As well as very few Cascading Style Sheet (CSS) classes, which means the website won’t house any code which doesn’t directly aid it’s core functionality. 

We also created a custom theme which could override certain stable9 functionality where necessary. Some of these overrides were general. For example, stable9’s template ‘page.html.twig’ is called on every public page, but our self-built theme adds a custom header and footer to it.

Having our own theme gave us more control over the final version of the code base. Less inherited code from a pre-built theme meant our frontend developer could have complete ownership of the frontend code. 

We also removed any dummy and unused code. We even got rid of an updated admin skin. Whilst we didn’t think this skin made material difference for the Climate Group’s editors, it did add unnecessary weight to the website.

Paragraphs were used for modular page creation. We defined several page section types (text, quote, lists, accordions, call-to-actions, etc) which editors can use to easily build up pages with the content they want. This modular approach is also incorporated into the site design, where we used a Pattern Library to define the look and feel of all page elements. We used the Components module to manage this once the Pattern Lab code was pulled into our custom Drupal theme.

We used the Facets module to extend our search functionality, allowing users to filter results by page type or taxonomy. The Dropdown Language module helped us to create a usable language switcher to support our multilingual option on article pages.

Images on our site can reappear across the site. For example, an image added to an article will appear on the article page itself, but also in search results, paragraphs, etc. The image can be cropped at different ratios, so we used the Focal Point module to ensure the key part of the image is maintained throughout and not cropped out of the picture.

There was some old article content on the previous Climate Group and RE100 websites that we wanted to pull across to the new sites. We extended what was provided by Drupal core with the Migrate Plus and Migrate Source HTML modules.