Increase conversions and decrease emissions: Design

As of today, 4 billion people use the internet.

That’s a fair number of click, likes, and shares happening every day. But as we become more connected around the world, the sustainability of the planet pays a price.

Due to the proliferation of connected devices and global population growth, personal usage of the internet has doubled since 2010. And the resulting stats are staggering. Digital technology now accounts for 4% of the global carbon emissions – more than international air travel. The average search query emits 1.45g of carbon dioxide. And in 2018, Google alone used the equivalent of a quarter of New Zealand’s annual energy consumption – using 10 terawatt hours of electricity and emitting over 4 million tons of CO2.

As a digital agency, we’re no stranger to this discussion. And we believe in leading the way for digital transformation. Now, more than ever, this includes positive contributions to and measurable efforts in sustainable web development. Last month, we hosted our first webinar on the subject, exploring the hidden ways in which clients can both increase conversions and decrease emissions. And when it comes to sustainable web development, there are 2 key factors to consider: Technology, and Design.

How design affects sustainability

Video, colour, and text all add to your site’s carbon footprint. So, the simpler your web design, the better. Not only does it help reduce carbon emissions; it also improves the overall customer experience. It’s easy to assume that every user is on the latest mobile phone, in a relaxed state of mind, with perfect eyesight to boot. But when we design with assumption, a degree of privilege creeps in. Sustainable web design pushes us to make equitable experiences. When you simplify and standardise your design, inclusivity gets baked into the customer experience.

Reduce bloat, not your brand

You may be thinking, “Does this mean my site needs to be boring and grey?” To which we say, “absolutely not.” Change doesn’t have to be plain. When designing websites with sustainability in mind, it’s important to consider how to keep your design elements compact, concise, and clear. Reducing real estate and information processing will take you a long way. Let your brand shine with things like typography and illustration and consider losing heavy elements like videos and auto-play features.

Adopt a style guide

Design systems, though extensive, require a lot more from the internet than a style guide in PDF format. Style guides are particularly useful as they provide a highly consistent and reliable resource for front-end development, driving efficiency and protecting your accessibility and inclusivity standards. They also allow for faster prototyping and testing with real users, leading to user-centred outcomes, and reduce the use of ‘plaster’ solutions like pop-ups and other hacks that slow users down.

Colour me sustainable

Your brand palette may actually be using too much power. We know. It’s a hard pill to swallow, but equally important to recognise. The screen is one of the biggest drains on a device’s battery power. To help reduce energy consumption, consider black for your background. It uses the least amount of power on the colour spectrum – unlike white, which uses the most. The colours in between also have an effect: with blue using 25% more power than green or red. 

Weigh up those fonts

Custom fonts. We love ‘em. But – they ask a lot from your website. Every custom font means extra code. If you’re using anything other than system fonts – like Arial or Roboto, for example – your website will find itself under a bit of pressure. Commonly, one font file can weigh 200kb. But multiply 2/3 of your fonts by light, roman, bold, italics and so much more, and you have a recipe for increased energy usage. While branding is undoubtedly important, consider a system font for body text.

Curb your content

Reducing bloat on your website isn’t just about the veneer. Content also plays a big role. Regularly reviewing and removing out-dated visual and copy content keeps your website relevant to customers and optimises your site for search engines. And while images are the most popular resource type on the web – making up 50% of the average web page size – they require a lot of power and processing. Consider ways to keep your copy and visual content concise to reduce scrolling and still honour your brand.

Do the bare minimum

It’s better for the planet. Adopt “lazy loading” wherever you can. Think images, video, content, and code. When you reduce the weight of your website a few amazing things happen. Firstly, your pages load faster. Faster loading equals less energy used; less energy used equals increased sustainability! Secondly, you remove the unnecessary burden on your users by presenting them only with the things they need. And lastly, though no less important, you make it easier for your pages to cache in a CDN. It’s a win-win-win situation.

Watch the webinar

If you’re excited about sustainable web design and want in-depth insight from some of our in-house experts, follow along with our Delve series. Led by our Great State team members, we share the latest insights and guidance from the world of digital and tech to keep your customer experiences ahead of the curve. Ready to learn more about Sustainable Web Design? Watch the webinar here.