Webinar
Home
Resources
How To Make Your Website More Sustainable

How To Make Your Website More Sustainable

Ryan Forrester
Ryan Forrester
Design Lead
time taken to read icon
5 minutes
 read
calendar date icon
July 19, 2024
Ryan, Lead Designer at Thought Quarter, talking with colleagues.
 INSIGHTS BY
Samuele Armondi
Managing Director
Ryan Forrester
Design Lead
time taken to read icon
5 minutes
 watch
calendar date icon
July 19, 2024
Samuele Armondi
Managing Director
Ryan Forrester
Design Lead
time taken to read icon
5 minutes
 listen
calendar date icon
July 19, 2024
Ryan, Lead Designer at Thought Quarter, talking with colleagues.
Podcast Description:

In today’s digital landscape, sustainability is more important than ever. The challenge lies in achieving sustainability without compromising user experience (UX).

At Thought Quarter, we consider ourselves the tech partner of Changemakers, whether that's individuals trying to make a difference or organisations using technology to build a better world. Our expertise lies in three areas: strategy, design, and software development. The principles of sustainability, accessibility, and usability are fundamental to each of these areas.

In this blog you can expect to find three things:

Firstly, clarity on what website sustainability actually means. There's a lot of noise out there. We're going to share our view on it and how we use it to help our clients differentiate themselves in the marketplace.

Secondly, the actual principles of how you do it. An understanding of sustainable web design principles.

And number 3, the actual nuts and bolts of it, practical tips and advice to support your website sustainability efforts. We're also going to touch on how we tie those things into your wider organisational sustainability goals and strategy.

What is Website Sustainability and Why Should We Care?

Website sustainability is about designing, developing, and maintaining software solutions in ways that minimise environmental impact. This is far less straightforward than it may seem. The implications are extensive, encompassing how users interact with your products, access them, and the carbon footprint of your hosting services.

Commercially, the drive for website sustainability is attractive. A 2024 PwC survey highlighted that 80% of consumers are willing to pay a premium for sustainable goods, with an average willingness to pay between 9-12% extra for products and services with a credible sustainability story. This presents a significant market opportunity for businesses to attract consumers who value sustainability.

In the B2B sector, buyers are almost three times more likely to make long-term commitments to sustainable suppliers. These could be suppliers aiding in their sustainability efforts or those with a clearly defined sustainability strategy.

Now the big one for both B2B and B2C. A staggering 75% of people will form an opinion about your credibility based on your website, and this judgment occurs almost instantaneously—within 50 milliseconds. Your website must effectively convey your sustainability credentials from the first glance in order to attract and retain customers willing to pay a premium or commit long-term.

As you can see, not only do these changes support a better world, they also support a better business.  It’s time to embrace change, or quite frankly, you’ll get left behind.

The Key Principles of Web Design

Before diving into sustainability, it’s essential to establish a solid foundation of web design principles. These principles form the basis upon which sustainability efforts are built, preventing us from getting lost in buzzwords and noise. At Thought Quarter, we define our design principles as "Purposeful and responsive product design that delivers against a set of objectives and user expectations."

We approach design from a product perspective, which shifts the mindset from traditional website models to a focus on functionality. This approach ensures that designs are goal-oriented and flexible, catering to various client needs such as revenue generation, lead capture, or email collection.

From a UX standpoint, it’s crucial to align design with the user's functional goals and ensure a consistent look and feel across all touchpoints. This not only enhances usability but also supports the overarching sustainability objectives by creating efficient, user-friendly digital products

The Key Principles of Sustainable Web Design

Once grounded in core design principles, we can overlay those relating to sustainability:

"Purposeful, efficient, and resource-conscious product design that meets objectives, user expectations, and sustainability commitments."

Let’s break that down. Efficiency involves reducing clicks for users—moving from A to B in fewer steps, whilst resource consciousness relates to using assets wisely. For example, opting for static images over videos on your website to enhance performance and reduce costs. Sustainability commitment is just an overarching statement that pins everything together, tells the story and ensures everything aligns with eco-friendly practices.

Our Five Step Sustainability Framework

The truth is good design is inherently sustainable. The key takeaway is that sustainability should be embedded in your creative process and storytelling, not an afterthought. This shift in focus is crucial as sustainability becomes the norm, not the optional.

To address this, we've developed a five-step sustainability framework which balances commercial interests with environmental responsibility. Whilst sustainability is hugely important, we have to continue to deliver on business objectives; this is essential for stakeholder buy-in.

Our framework aligns with familiar commercial planning and business growth strategies, making it accessible and practical. Treating sustainability like any other business challenge—creating a vision and following a plan—ensures success.

Embracing sustainability is exciting, reflecting the world's shift towards eco-consciousness. Don’t be fooled into thinking it’s a daunting task. It’s an opportunity for innovation and positive change.

Below is a glimpse inside our framework which we hope will get your creative juices flowing. They should be used to guide your approach to sustainable web design, highlighting the opportunities and strategies to effectively integrate sustainability into your website and digital products.

Step One: Audit and Forecast

Establish a clear starting point by defining what success looks like. It sounds simple, but in our discovery sessions this often causes some variant across the group. Make it clear from the offset. Begin with an auditing framework to gain a baseline understanding of your current state. Identify quick win opportunities that offer significant impact and ROI in a short period before moving on to the long-term. This will inform decision-making and allow you to set realistic, achievable goals; don’t forget to make them SMART.

Step Two: Stakeholder Buy-In

A vital step in the process that’s often overlooked. Your website is arguably one of the most important touchpoints; it should sit snuggly inside company-wide objectives. Creating a shared vision and mission within your business will undoubtedly increase success. It will grant you support from stakeholders and unlock resource to optimise your site, such as agencies or consultants. It doesn’t stop there though. Whilst this blog is about your website and digital products, if you can leverage your business leaders to use their social media platforms, voice at networking events etc. to shout about your shared vision, everything will come together.

Step Three: Action Quick Wins

Back to the website. Once you have the green light, it’s time to start actioning some of those first steps from the audit and create immediate impact. You might want to start at image optimisation, checking the sizes support a speedy site.

We often find a ton of redundant or outdated code sitting in the background on websites. Just because you can't see them on the front end doesn't mean that it's not weighing your system down. Quick wins, such as hosting migration, implementing a CDN, or updating settings, can build momentum and demonstrate progress to stakeholders. They’re cost-effective, often make a significant impact and showcase improvements within the first week or two. This then secures support for more strategic changes.

Step Four: Design

Sustainable design systems are key here. Prioritise reusable components to minimise redundant code and design elements. If a module on another page is working well and could serve a similar function, use it. Despite popular belief, not every web page needs to be unique. It's surprising how varied our web pages appear at launch, yet changes are often resisted despite data showing what works best. Reusing components is key!

Design is more than an embellishment; it’s about finding the most efficient and visually pleasing way of communicating your proposition to your desired audience. A well-defined design library makes integrating sustainability much easier.

UX is fundamental to everything we do. Efficient user interaction equals reduced number of server requests, essentially code, and then less server load time. If a task can be done with one click instead of two, it should be. Websites don’t need to be 50 pages long; concise design is more effective.

Step Five: Monitor and Iteration

Sustainability isn’t something you can simply tick off. Ensure that your sustainability efforts continually evolve and improve over time. Rinse and repeat if you like. Just remain ambitious! For example if your website efficiency got from an E to a C, can you now bring it up to a B or an A?

It’s great to think about UX, design, NTP, but whatever you do from a vision point of view will only ever be as good as the technology it sits on. Please don’t neglect it. Monitor its performance regularly and ensure it’s working efficiently.

Finally, we can’t say this enough: embrace change! If you’re passionate about sustainability and what you're doing, then it should be front and centre of everything that you do. It’s not just about your website, it’s across your PR, across your media, in your networking. Be excited about it because, spoiler alert, it’s not going away anytime soon!

Key Takeaways

We know we’ve given you a lot to think about there. So we’ll leave you with these key takeaways.

1. Create a shared sustainability vision, you’ll struggle to get going without it. Having that shared vision, shared mission, shared passion and the storytelling that goes alongside the actual application is crucial.

2. Keep your core website objectives front and centre. Understand that, in its simplest form, a user will land on your website to achieve something. It's our job within design to allow them to do that regardless of the brief or the message we're trying to overlay on top of that.

3. Embrace the change. It’s time to be brave. Whilst there are quick wins, it’s up to you to keep the momentum going to ensure those long-term changes happen. Don’t be tempted to backtrack, just be confident and be brave. It’ll pay off.

Listen on Spotify

In today’s digital landscape, sustainability is more important than ever. The challenge lies in achieving sustainability without compromising user experience (UX).

At Thought Quarter, we consider ourselves the tech partner of Changemakers, whether that's individuals trying to make a difference or organisations using technology to build a better world. Our expertise lies in three areas: strategy, design, and software development. The principles of sustainability, accessibility, and usability are fundamental to each of these areas.

In this blog you can expect to find three things:

Firstly, clarity on what website sustainability actually means. There's a lot of noise out there. We're going to share our view on it and how we use it to help our clients differentiate themselves in the marketplace.

Secondly, the actual principles of how you do it. An understanding of sustainable web design principles.

And number 3, the actual nuts and bolts of it, practical tips and advice to support your website sustainability efforts. We're also going to touch on how we tie those things into your wider organisational sustainability goals and strategy.

What is Website Sustainability and Why Should We Care?

Website sustainability is about designing, developing, and maintaining software solutions in ways that minimise environmental impact. This is far less straightforward than it may seem. The implications are extensive, encompassing how users interact with your products, access them, and the carbon footprint of your hosting services.

Commercially, the drive for website sustainability is attractive. A 2024 PwC survey highlighted that 80% of consumers are willing to pay a premium for sustainable goods, with an average willingness to pay between 9-12% extra for products and services with a credible sustainability story. This presents a significant market opportunity for businesses to attract consumers who value sustainability.

In the B2B sector, buyers are almost three times more likely to make long-term commitments to sustainable suppliers. These could be suppliers aiding in their sustainability efforts or those with a clearly defined sustainability strategy.

Now the big one for both B2B and B2C. A staggering 75% of people will form an opinion about your credibility based on your website, and this judgment occurs almost instantaneously—within 50 milliseconds. Your website must effectively convey your sustainability credentials from the first glance in order to attract and retain customers willing to pay a premium or commit long-term.

As you can see, not only do these changes support a better world, they also support a better business.  It’s time to embrace change, or quite frankly, you’ll get left behind.

The Key Principles of Web Design

Before diving into sustainability, it’s essential to establish a solid foundation of web design principles. These principles form the basis upon which sustainability efforts are built, preventing us from getting lost in buzzwords and noise. At Thought Quarter, we define our design principles as "Purposeful and responsive product design that delivers against a set of objectives and user expectations."

We approach design from a product perspective, which shifts the mindset from traditional website models to a focus on functionality. This approach ensures that designs are goal-oriented and flexible, catering to various client needs such as revenue generation, lead capture, or email collection.

From a UX standpoint, it’s crucial to align design with the user's functional goals and ensure a consistent look and feel across all touchpoints. This not only enhances usability but also supports the overarching sustainability objectives by creating efficient, user-friendly digital products

The Key Principles of Sustainable Web Design

Once grounded in core design principles, we can overlay those relating to sustainability:

"Purposeful, efficient, and resource-conscious product design that meets objectives, user expectations, and sustainability commitments."

Let’s break that down. Efficiency involves reducing clicks for users—moving from A to B in fewer steps, whilst resource consciousness relates to using assets wisely. For example, opting for static images over videos on your website to enhance performance and reduce costs. Sustainability commitment is just an overarching statement that pins everything together, tells the story and ensures everything aligns with eco-friendly practices.

Our Five Step Sustainability Framework

The truth is good design is inherently sustainable. The key takeaway is that sustainability should be embedded in your creative process and storytelling, not an afterthought. This shift in focus is crucial as sustainability becomes the norm, not the optional.

To address this, we've developed a five-step sustainability framework which balances commercial interests with environmental responsibility. Whilst sustainability is hugely important, we have to continue to deliver on business objectives; this is essential for stakeholder buy-in.

Our framework aligns with familiar commercial planning and business growth strategies, making it accessible and practical. Treating sustainability like any other business challenge—creating a vision and following a plan—ensures success.

Embracing sustainability is exciting, reflecting the world's shift towards eco-consciousness. Don’t be fooled into thinking it’s a daunting task. It’s an opportunity for innovation and positive change.

Below is a glimpse inside our framework which we hope will get your creative juices flowing. They should be used to guide your approach to sustainable web design, highlighting the opportunities and strategies to effectively integrate sustainability into your website and digital products.

Step One: Audit and Forecast

Establish a clear starting point by defining what success looks like. It sounds simple, but in our discovery sessions this often causes some variant across the group. Make it clear from the offset. Begin with an auditing framework to gain a baseline understanding of your current state. Identify quick win opportunities that offer significant impact and ROI in a short period before moving on to the long-term. This will inform decision-making and allow you to set realistic, achievable goals; don’t forget to make them SMART.

Step Two: Stakeholder Buy-In

A vital step in the process that’s often overlooked. Your website is arguably one of the most important touchpoints; it should sit snuggly inside company-wide objectives. Creating a shared vision and mission within your business will undoubtedly increase success. It will grant you support from stakeholders and unlock resource to optimise your site, such as agencies or consultants. It doesn’t stop there though. Whilst this blog is about your website and digital products, if you can leverage your business leaders to use their social media platforms, voice at networking events etc. to shout about your shared vision, everything will come together.

Step Three: Action Quick Wins

Back to the website. Once you have the green light, it’s time to start actioning some of those first steps from the audit and create immediate impact. You might want to start at image optimisation, checking the sizes support a speedy site.

We often find a ton of redundant or outdated code sitting in the background on websites. Just because you can't see them on the front end doesn't mean that it's not weighing your system down. Quick wins, such as hosting migration, implementing a CDN, or updating settings, can build momentum and demonstrate progress to stakeholders. They’re cost-effective, often make a significant impact and showcase improvements within the first week or two. This then secures support for more strategic changes.

Step Four: Design

Sustainable design systems are key here. Prioritise reusable components to minimise redundant code and design elements. If a module on another page is working well and could serve a similar function, use it. Despite popular belief, not every web page needs to be unique. It's surprising how varied our web pages appear at launch, yet changes are often resisted despite data showing what works best. Reusing components is key!

Design is more than an embellishment; it’s about finding the most efficient and visually pleasing way of communicating your proposition to your desired audience. A well-defined design library makes integrating sustainability much easier.

UX is fundamental to everything we do. Efficient user interaction equals reduced number of server requests, essentially code, and then less server load time. If a task can be done with one click instead of two, it should be. Websites don’t need to be 50 pages long; concise design is more effective.

Step Five: Monitor and Iteration

Sustainability isn’t something you can simply tick off. Ensure that your sustainability efforts continually evolve and improve over time. Rinse and repeat if you like. Just remain ambitious! For example if your website efficiency got from an E to a C, can you now bring it up to a B or an A?

It’s great to think about UX, design, NTP, but whatever you do from a vision point of view will only ever be as good as the technology it sits on. Please don’t neglect it. Monitor its performance regularly and ensure it’s working efficiently.

Finally, we can’t say this enough: embrace change! If you’re passionate about sustainability and what you're doing, then it should be front and centre of everything that you do. It’s not just about your website, it’s across your PR, across your media, in your networking. Be excited about it because, spoiler alert, it’s not going away anytime soon!

Key Takeaways

We know we’ve given you a lot to think about there. So we’ll leave you with these key takeaways.

1. Create a shared sustainability vision, you’ll struggle to get going without it. Having that shared vision, shared mission, shared passion and the storytelling that goes alongside the actual application is crucial.

2. Keep your core website objectives front and centre. Understand that, in its simplest form, a user will land on your website to achieve something. It's our job within design to allow them to do that regardless of the brief or the message we're trying to overlay on top of that.

3. Embrace the change. It’s time to be brave. Whilst there are quick wins, it’s up to you to keep the momentum going to ensure those long-term changes happen. Don’t be tempted to backtrack, just be confident and be brave. It’ll pay off.

Related Posts

Resources

A poster featuring portrait photos of Sam and Florence from Thought Quarter
Samuele Armondi
Samuele Armondi
Managing Director

3 Ways To Improve Your Profitability With AI

30 minutes
A poster featuring two males, George and Ash, promoting their webinar.
Samuele Armondi
Samuele Armondi
Managing Director

Reducing Risk In Innovation: A Proven Process

30 Minutes
Samuele Armondi
Samuele Armondi
Managing Director

Innovating for Growth: Insights from a CFO

30 minutes