Designed for the planet: Seven steps to create our low resource website

Like most things, hosting a website takes energy and, therefore, carbon emissions. And like everything we do, we want to reduce that energy and that carbon as much as possible. So, we consciously designed our website to be as low resource and low energy as we could. 

Our starting point was to create a set of guiding principles that we could always refer back to when making any decision:

• Design for purpose
• Design to last
• Minimise the unnecessary
• Elevate through creativity
• Collaboration and openness
• Authenticity

We created these guiding principles to mimic our "Beautiful Engineering" design approach – sustainable, crafted, simple, tailored, considered, elegant, detailed, invisible – as well as our values in running our business.

Throughout the design and creation of our new website, we actively made decisions to make our new website as low resource as (pragmatically) possible. We focused on outcomes, rather than gimmicks or functions that give the impression they are sustainable or reduce energy, without actually delivering results. 

Collaborating with our web developers, Ten4, we made the following low resource design decisions:

Limited video, and no autoplay video

Many modern websites use a lot of video on their homepages and elsewhere. Avoiding auto-play on videos has been commonplace for a while (it’s less intrusive, loads pages faster, and is more sympathetic to poor or patchy internet connections as well as using less energy), but we went a step further to limit videos in all but a very few instances.

No feeds

Other websites pull in ‘live’ content from social media sites. This gives an up-to-date picture of an organisation’s social media activity and latest news, but takes a lot of resources. So we’ve not included this on our website, relying on our Journal articles to tell people our news instead. You can also find links to our social media channels in our website footer.

No lazy loading

Many modern websites have feeds that automatically expand and grow as you scroll down a page. This means a user is constantly being shown more content, much of which they might not want or need. We made the decision to use manual “Load more” buttons to limit the amount of content a user is shown and give them choice over whether they want to see, and load, more.

Limited fonts and styles

Loading a page takes energy. More fonts and more styles means a bigger page file. A bigger page means a longer, more energy-intensive load time. So we’ve taken the decision to use one font throughout and limit ourselves to just three font styles.

Low animation

Animation is very costly, both in terms of the resources it uses and the effort it takes to produce. If you’ve ever felt your phone get hot when visiting an animation-heavy, ‘bells-and-whistles’ website, you’ll have felt first-hand the effect of a resource-heavy website on your phone’s processors and battery life. Making our new website low-animation was a conscious choice for us.  

Image optimisation

Our developers advised us to only include images that add value to the end user. The more images a page has to load, the longer it will take and the more energy it will use. We certainly have plenty of images on our website – banner images of our buildings, headshots of our people, photos of our offices – but these images are transformed to only be as big as they’ll actually be displayed on-screen and we haven’t used (or uploaded to the server) any unnecessary imagery.

Transparency

On every page of our website, you will see a Website Carbon widget. This external calculator estimates the carbon emitted each time the page is visited. We chose to display this information, both to make it easily available and to encourage all visitors to our website to remember that every website requires energy (and carbon) to be hosted and viewed.

Our new homepage is estimated to produce just 0.14g of C0₂ each time it is visited. This is 87% less than the global average webpage and a reduction of 92% compared with our old website’s homepage (1.73g of CO₂ per visit).

Another comparison between our old website and new one, estimates that our new Architectural Lighting Design service page emits just 0.08g of CO₂ per visit (and is rated A+ by the Website Carbon calculator), compared with our old Architectural Lighting Design service page emitting 0.53g CO₂ per visit (and having a rating of D).

Our new website is also hosted on AWS, whose scale, efficiencies, energy policies and ambitious targets ensure the hosting element of our website is as energy- and water-efficient as possible.

The outcome is that based on 100,000 people visiting our new website and viewing the following four page types:

1. homepage (https://www.maxfordham.com/)
2. a service page (e.g. https://www.maxfordham.com/services/architectural-lighting-design)
3. our project listing page (https://www.maxfordham.com/projects)
4. a specific project (e.g. https://www.maxfordham.com/projects/the-entopia-building)

compared against our old website, it will result in a reduction of 158kg of CO₂, which (based on Carbon Trust conversion factors) is equivalent to:

• eight return train journeys London to Edinburgh, or
• a one-way flight London to Edinburgh, or
• OR the carbon sequestered by 16 trees growing for a whole year.

In creating our new low-resource website, we hope we have proved that with careful consideration and a focus on outcomes, high-quality design and sustainability can go hand-in-hand.