Skip to main content

It requires a cross-functional team to design, develop, implement, and continuously improve an ecommerce website. 

Skills ranging from product strategy, UX and UI design, and content production through to front- and back-end development, development operations (DevOps), search engine optimization, and quality assurance are all vital. 

Some people might bring one or more of those capabilities to the team, and some might be covered by agencies or multiple freelancers. To be effective, a team needs a shared sense of direction, a vision, and a joint understanding of who their stakeholders are, what they need, and why they have those needs. 

Making the planet part of that vision and treating it as another stakeholder has to be a fundamental part of every business decision if we’re serious about making a significant difference. 

Raise awareness to establish sustainability best practices

There’s still a lack of awareness of the digital industry’s environmental impact. This is reflected by the lack of research in this area but, at its most conservative, the digital industry has an environmental footprint on par with the aviation industry

Internet Traffic Increase Infographic

COVID-19 lockdowns have seen internet traffic increase by 15-20% and the availability of airline seats reduce by 66%, so the digital industry will undoubtedly have overtaken the airline industry as a result of the pandemic.

Many unknowns remain about when the world will reopen its borders and whether remote work is here to stay, which makes it impossible to predict if this will change again. 

Recent documentaries and research collaborations have slowly raised awareness, but sustainable web design and development are still very far away from being an accepted way of working in the same way that accessibility is. 

Therefore, the team responsible for your ecommerce website needs leadership. They need to know why this is important. They need to understand how other people have approached this. They need to audit where they are now and they need time to build this into their tools and processes and to come up with ideas specific to your site. 

Related Read: The Sustainable Ecommerce Handbook

Embrace constraints to innovate

Your team can’t just work on this part-time, as a side project during lunch or after hours. It has to be factored into estimates, daily tasks, and longer-term planning.

In my experience, challenging people to reduce data transfers and using that as a constraint (constraints can be positive!) in the design, development, and implementation of features tends to be really well received. 

A lot of websites are very similar at their core, and so it’s inevitable that teams become a little aloof to yet another cycle of feature development. Giving them something different to consider, which challenges so much of the status quo that has built up around the industry, might just reignite flames that have started to die down. 

Open the conversation up to the wider team and ensure that everyone works together on this issue because there’s never one answer. Additionally, a designer understanding why a developer struggles to build in a carbon-efficient way will be really beneficial for the long term. 

To get them started, it helps to know what to say to different team members, and the most obvious areas are:

  1. Content
  2. Design
  3. Tech

Let’s look at them in detail.

Content

Some of the following information isn’t brand new, but it’s important to refocus on the fundamentals when trying to solve complex issues.

Challenge your content team to:

Make sure people find your site quickly

Understand what people are looking for, what search terms they’re using, and optimize your content accordingly. 

Stay in the loop! Discover what’s new in the world of ecommerce.

Stay in the loop! Discover what’s new in the world of ecommerce.

  • Hidden
  • Hidden
  • No spam, just quality content. Your inbox is safe with us. For more details, review our Privacy Policy. We're protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
  • This field is for validation purposes and should be left unchanged.

Facilitate quick content consumption

Forget about content stickiness. Give people what they came for and let them leave. It’s vital to understand what needs/problems/tasks they’re arriving at and design the content around them.

Identify and remove ROTN content

This acronym stands for Redundant, Out of date, Trivial or No longer being used. It ensures your site visitors won’t get distracted, minimizes their cognitive load, and reduces your hosting costs as well as data storage and transfer, which in turn is good for the environment. 

This needs to become part of the team’s ways of working. Doing it regularly is manageable; doing it once a year will soon make it a painful task the team dreads. Tools such as Sitebulb, SiteImprove, Monsido and Silktide can help here. 

Identify And Remove ROTN Content Infographic

Regularly check the page weight 

There is nothing more frustrating than implementing a lot of great techniques to reduce the emissions of a site and then watching someone load the site with stock imagery.

Make regular checks part of the editorial workflow. This will encourage editors to be creative. Can they optimise an image before it goes into the CMS? Can they blur the edges? Or can they commission an illustration instead? 

Be transparent and produce content about your efforts

This is vital. Being transparent and regularly publishing short posts about the changes you’re making shows that you’re not claiming to be perfect and to have all the answers. You’re inspiring people and allowing others to stand on your shoulders. Treat these as blog posts written by the people who are making the changes, rather than branded, corporate statements. 

When Allbirds announced their collaboration with Adidas, co-founder Tim Brown said, “When it comes to sustainability, we don’t see ourselves competing with one another, but competing for the future. If we don’t bring about change quickly, there won’t be a future to speak of.”

To back up that statement, Allbirds have recently open-sourced the calculator they use for their products

Regularly Check The Page Weight Screenshot
Allbirds are sharing their carbon footprint tools with the rest of the fashion industry, so other companies can calculate their emissions too.

Design

Again, this isn’t groundbreaking stuff, so just treat the following tips as conversation starters. 

Challenge your design team to:

Reduce the amount of images 

Question whether they’re really necessary (especially if there are a lot of images on a product listing page) and instead consider using animations, icons, and illustrations that are both functional and beautiful.

Reduce the amount of video and avoid autoplay 

The dev team at Manifesto built a ‘fake’ video player (see below), which doesn’t load the YouTube embed until the user has explicitly indicated they want to watch it. This stops a surprising amount of calls and data transfer, which also means YouTube can’t track your customers around the internet. 

The Climate Groups Video Player Screenshot
The Climate Group’s video player: A static image that only turns into a YouTube embed when the user clicks or taps it.

Use system fonts and as fewer fonts/variations as possible 

Font files often contain a huge amount of styles, weights, and characters you’ll never use (but those can be stripped out by the dev team). The most sustainable fonts? Arial, Courier New, Georgia, Verdana, Helvetica, and Times New Roman.

Collaborate with the content team

Ensure people can complete the tasks they came to do as quickly as possible before leaving. Delve into your analytics and find the people that look lost and are bouncing around. What can be done to help them? 

Work hand-in-hand with the dev team

Understand how the design might be implemented and what tweaks could be made to allow it to be created as efficiently as possible. 

Place a carbon footprint badge on your pages

A badge that automatically calculates and displays the carbon emissions of each page, added to the footer of your website, will show site visitors that you’re being transparent, which builds trust. It’ll also start a nice bit of healthy competition between you and your competitors!  

Wholegrain Digital Screenshot
Wholegrain Digital designed a lightweight open-source badge that further increases awareness of web carbon emissions.

Tweak the brand identity if at all possible 

Can you push the brand so the site has a dark background? Or use less energy-intensive colors? These are marginal gains but they all add up. 

When I talk to designers about this subject for the first time, I always make sure I say this isn’t about spoiling anyone’s design fun. Mainly it’s about challenging the status quo of how sites are designed (promotional block with an image – title – subtitle anyone?). 

I haven’t met a designer yet who hasn’t found something inspirational from the following resources:

Tech 

This conversation might be tricky because the tech team might have already started to implement some of the answers to the below questions.

They’re best practices for site speed and DevOps but might have been turned down because the budget was prioritized for more customer-facing development. Equally, you may well outsource your support and maintenance, so it might not be obvious who to speak to straight away. 

Whatever your situation, a few conversations starters might be:

  • Is the data centre we use powered by renewable energy? There is a whole load of nuance to the point of how data centres are powered and utilized but this is a good start!
  • Can we reduce the data we transfer by using approaches like Jamstack?
  • Can we save space (and money) at the data centre by using event-driven architecture?
  • How far can we go with image and video optimization? Consider alternative file formats such as SVG, AVIF, and WebM.
  • If we’re serving customers all over the world, can we use CDNs to deliver data to them from closer to their device?
  • How can we use design systems and pattern libraries to quality control designs and deployments?

Also, how can we more aggressively block bots to reduce server usage? Surprising fact: human activity on the internet accounts for only 48% of traffic on the internet

Bot Infographic

Half of the bot traffic is bad: scraping content, crashing websites, trying to find security loopholes, bulk buying products on ecommerce sites, simulating advert clicks, the list goes on…

On average, any site can expect a quarter of its traffic to be from bad bots, and due to the latest levels of sophistication, they behave in an almost indistinguishable way from humans, which means they are consuming HTML, CSS, JavaScript, jQuery images, or videos in the exact same way as a human, creating the same level of emissions.

As data centres charge by storage and bandwidth, the bots are simply increasing costs for no benefit to the organization!

Finally, challenge your engineers to be more like Danny van Kooten, a plugin developer, who recently rewrote a piece of code to connect two very well-used pieces of software. Danny shaved off a tiny amount of weight from his code but, because of how much it’s used by other websites, he has cut enough emissions per month to stop more than the equivalent of 23 flights from London to Sydney! 

Explore where we can optimize code to make significant changes. Google Analytics alternatives are always a good place to start, as are any third-party plugins, CSS files, font files, and CMS themes.

Plausible Screenshot
Plausible is a lightweight, privacy-friendly, and open-source website analytics tool.

Given the dev team knows the intricacies of the site best, the most fruitful conversation starter will be “how do you think we should do this?” They will be full of ideas. 

Leading by example

After bringing the team together, listen to them, and do it properly. Don’t pay lip service to the idea. Make some difficult decisions. Don’t ask the team to come up with loads of great ways to reduce site emissions and then whack them at the bottom of the backlog because you want to release a new promotional block. 

Using planet-based KPIs is a great way to show the team and other stakeholders that you're serious. It helps embed the planet in your decision-making. For example, if you have a carbon budget to sit alongside your financial budget, it’ll ensure you can prioritize a suggestion from a developer who wants to refactor a five-year-old piece of code or help the designer who wants to get rid of an image carousel. 

It might also help you break the dependence we all have on decreased bounce rates, higher page views, and increased time on site. Increased bounce rates might mean your UX and content on a particular page is actually perfect, while increased page views might mean someone is lost and confused. And increased time on site might mean someone has been distracted from what they came to do.

Looking at your site through a new, planet-shaped lens will also open up opportunities to address other site issues, like accessibility and data hoarding. 

Given the mind-blowing amount of data that an internet user generates every day, it’s vital to think about data minimization. Before you harvest as much data as possible, first define why you want to know something and how that information will help the people using your site. Then define the bare minimum data you need.

Don’t treat digital differently

People should be able to expect companies to look after the planet and work on their behalf. 

Don’t wait for wider public condemnation of the digital industry’s environmental impact. Don’t simply suggest decarbonising the electricity grid and wait for data centres to use renewable energy. Act now and start reducing the emissions from your sites. 

Show people why this is important and lead the way for wider education and change. Stripe Climate is a great example of this. 

A lot of the tips suggested in this article require a back to basics approach; question why you’re doing what you’re doing. That’s exactly what the planet needs. When questioning how you as an individual can have an impact on the climate and ecological emergencies, the first answer isn’t what tech you can invest in or what petition you can sign. 

We have to educate ourselves to first understand the problem and the root causes, then question the fundamentals of how we live; challenging the status quo of throw-away consumption, animal exploitation, agriculture, travel, and land management. Then we have to discuss the issues with other people and collaboratively design impactful, contextual solutions, instead of blaming each other for not doing enough. 

This is not a tick box exercise that can be written as a user story. It’s a mindset shift that becomes part of the success of every user story. 

Get your marketing material in line with everything you do with the help of these tools: 10 Best Ecommerce Marketing Tools To Add To Your Marketing Strategy

By Neil Clark

Neil Clark is the service design lead at Manifesto and environment strategist at The Panoply He is unashamedly passionate about helping to save the planet and everything that calls it home. In his professional life, Neil works to enable people to do stuff easily, which covers service design, design thinking, business analysis, product ownership, and agile methodologies. He’s also chair of the digital carbon footprint steering committee at the Sustainable Digital Infrastructure Alliance, a member of the BIMA Sustainability Council, and has organized London