EIT Climate-KIC
Greening Europe’s leading climate initiative’s legacy websites
Project overview
EIT Climate-KIC is a Knowledge and Innovation Community (KIC), working to accelerate the transition to a zero-carbon, climate-resilient society. Supported by the European Institute of Innovation and Technology, EIT Climate-KIC brings together partners from business, academia, and the public and non-profit sectors, to work together to create innovative solutions to effectively tackle climate change.
In 2020, EIT Climate-KIC partnered with several other organisations, including ClimateAction.Tech, to create Branch magazine, an online magazine focussed on web sustainability. The design and development of Branch focussed on pursuing best practice in web sustainability and led to the creation of GOLD principles. These are:
- Green – highly efficient, using renewable energy and designed in the context of the environment in which it operates
- Open – open-source, transparent and proactive in sharing knowledge
- Lean – responsive to factors such as location and demand
- Distributed – provides a good experience for visitors in any location, no matter their income
The principles align closely with the Sustainable Web Manifesto, which we co-authored and which is at the heart of all the work we do, so we were excited to be asked to help the EIT Climate-KIC team bring two of their legacy websites – the Social Activation and Experimentation Team webpage and the ‘Moments Matter’ page – in line with these principles.
Following our improvements, which lowered the carbon footprint of both websites to 0.37g for Moments Matter, and 0.20g for the Social Activation site, both sites saw significant improvements in performance. These websites now serve as best practice examples, to be rolled out to all of the EIT Climate-KIC websites.
Features
- In depth analysis of existing websites
- Design review
- Code review
- Migration to green hosting
0.37g
CO2 per page view (Moments Matter)
81%
Performance (Moments Matter)
0.9s
Page load time (Moments Matter)
0.20g
CO2 per page view (Social Activation)
99%
Performance (Social Activation)
0.6s
Page load time (Social Activation)
In depth analysis of existing websites
In order to ‘green’ a website, there is extensive analysis and development work required. To ensure that we did not reduce functionality or negatively affect the user experience while we were making changes, we took a staged approach to greening the sites, increasing levels of complexity with a gradual approach.
Greening of the Social Activation and Experimentation Team webpage
As this page already had a simple WordPress CMS, this made it the ideal place to start our analysis and development work. This work was completed in 2020, going live in 2021, so that we could monitor the effectiveness of the green optimisations, before transferring any learnings to the Moments Matter website.
Greening of the Moments Matter website
The analysis and development required for the Moments Matter website was much more intensive. This is because the site has a more complex operating system, due to its requirement to act as an aggregator site with potential for matchmaking. So, although the work conducted for this website completed in 2020, we waited for the results of the Social Activation and Experimentation team webpage, before going live on the Moments Matter website, to ensure that any learnings could be incorporated into this work.
The results of our initial analysis of both sites, showed that there were several design tweaks we could make that would improve the user experience, sustainability and accessibility. Changes we made included:
- Redesigning the header areas and main banner sections to more clearly highlight the messaging, and improve accessibility of navigation
- Introducing image optimisation to minimise the size of images across the website
- Streamlining the use of custom fonts
- Updating button styles to make them more accessible
- Updating the design of the CTA boxes on the Moments Matter homepage to make it clear they are clickable
- Updating the website footer design to communicate EIT Climate-KIC’s green credentials.
Code review
We undertook a code review of both sites, to see where we could improve design and add or remove features to improve functionality and performance. As the Social Activation site is a subsite of a much larger network of sites, it would not have been possible to optimise the site in its original form. Instead, we elected to rebuild the subsite using our own optimised Granola starter theme, which we have a great experience with creating low carbon footprint websites. We were also able then, to make the site easier for the EIT Climate-KIC to manage internally, by using a more intuitive drag and drop editor.
Across both sites, we implemented native browser lazy loading, optimised existing scripts, and removed scripts that were not in use, such as the live chat code and some of the analytics tracking scripts.
These, alongside the design changes we made and moving the site to a host that uses renewable energy, helped us to reduce the size of the Social Activation homepage from 3.1MB to 602KB, which improved its performance by 80%.
All of these changes also meant that the website went from being dirtier than 80% of pages tested on websitecarbon, to being 81% cleaner!
I am absolutely thrilled – thank you again everyone for your work!
