20 milligrams of CO2 are generated every second someone uses a simple website (source). Scale that up to the world of internet users, often loading highly complex, multi-modal sites, and it quickly becomes clear why this is a problem for the planet. The internet and the gadgets associated with it contribute similar quantities of greenhouse gases to the entire aviation industry, and this is only set to grow as internet use becomes more widespread. Clearly, the way we design our websites needs to change.
Squarebird are a team of digital natives based in Bristol. We create high performing websites for clients in a range of sectors, and support their marketing with stunning graphic design, comprehensive SEO support, and much, much more. And we’re responsible too – dedicated to reducing out impact on the planet in every way we can, and supporting our local community.
In this article, we explore what it means to design a website sustainably, and how to get started.
What is a sustainable website?
It might come as a shock, but the internet is actually a significant contributor to global greenhouse gas emissions. The reason for this is that all websites are hosted on servers stored in physical locations called data centres. These servers consume vast amounts of energy every time they process data. As they work, they get extremely hot, meaning comprehensive cooling systems must be in place – something that requires even more power.
A sustainable website is a website that reduces its contribution to this problem through various design and build strategies intended to make it smaller, simpler, and more energy efficient. It does this by reducing the file size of each web page, because a smaller file size equals less energy needed to load it. Sustainable design brings together concerns for the planet with high performance and usability. It involves rethinking our attitudes to the web and considering the impact of every decision we make.
For example: that font may look great, but is there a lower impact option that might have a similar effect? Does the site really need all of those pages, or could it be simplified and condensed? How long do users have to spend clicking around the site to find what they need, and could their journey be streamlined?
These are just some of the questions sustainable designers should be thinking about when creating an environmentally friendly website. It’s about reassessing our attitude to the web and remembering that our digital world comes at a cost.
It might seem like nothing, but the smallest decisions when designing a website can have a vast planetary impact when considered on a global scale. So, let’s explore some of the top things to think about when designing with the planet in mind.
Designing sustainable websites – things to consider.
There’s no single way to go about creating a green website; often, a variety of factors need to be addressed in order to drive tangible improvements. From powering your site via renewable or offset energy sources, to designing with efficiency in mind, true digital sustainability requires a holistic approach. Here are some of our top tips for creating a low impact website.
Your hosting
Green web hosting is vital if you want to create a sustainable website. A green hosting service refers to when a company produces or pays for renewable energy to power their servers, or offsets their carbon consumption through planting trees and other initiatives. Some hosting providers will also go further and consider the energy efficiency of their hardware, the impact of their electronic waste, and other aspects of their business. For businesses looking to mitigate their impact on the environment, green hosting is a great first step to take.
The Ultimate Guide to Green Hosting >
Your images & video
Take some time to think through your visual content and make sure every image, video, and animation is adding value to your website. As with many of these considerations, it’s about finding the right balance between creating highly engaging, visual websites, and driving sustainability.
For images you feel are necessary to your design, you could try to reduce the size of the image as much as you can without compromising on quality. Another strategy could be implementing lazy loading to reduce the amount of content requested at any given moment.
In terms of videos and animation, be strategic. Of course, we all know high quality videography can be vital for generating engagement online, but videos can also contribute to your business’ digital carbon emissions.
Your navigation
Another great step is to improve your website’s navigation, ensuring your users have a clear, logical journey to follow. This will make it easier for them to find the information they need and make conversions more likely. But how does this boost sustainability, you ask? An efficient user journey means less time spent clicking and loading pages which by extension means less energy and resources are required. Essentially, a logical site structure will benefit all aspects of your website’s performance – including its energy efficiency.
Your content
With every single page on your website generating its own carbon emissions, rationalising your content can provide considerable reductions.
Firstly, try and decrease the size of your website by consolidating many small pages into a fewer number of large pages. Not only will this boost your sustainability, but it will also help your website’s SEO performance. This is because long form content increases dwell time and improves user experience – a key ranking factor. That’s why the first page of the search results tend to be dominated by larger pages.
As with images and videos, it’s also important to make sure every piece of content on your website is serving a purpose. Is your content meeting your audience’s needs and driving conversions? If the answer is no, the energy required to run them is a real waste. And improving your content strategy won’t just help the environment, it is also likely to result in a better SEO ranking.
Related: What Are Pillar Pages?
Your code
It’s time to think about the building blocks of your website – the code. Refine and remove any unnecessary code lines which may have been created during the build. Even if these code lines are not used, they will still run and use up resources every time the page loads.
Need help? Our team of expert developers are here for you – just get in touch!
Your colour choice
Who would have thought colours could be energy efficient? Dark mode is becoming increasingly popular in sustainable web design because black uses the lowest amount of energy. As a general rule, the brighter the colour, the more energy required. So, when designing your website, keeping in mind which colours are lower impact can be a great strategy.
For example, blue pixels tend to use more energy than red and green. That combination might not be your cup of tea, but we’re sure our designers can work their magic! Of course, your brand may already have its colour palette, and that’s okay – it’s about making sustainable choices where possible.
Your fonts
It’s easy to get excited when envisioning your dream website, but lots of custom elements can all add up to a sizable amount of carbon being emitted. Take fonts. A custom font refers to any font not automatically installed on devices as standard. That means any time a user tries to load a web page with lots of custom fonts, they will have to download them – something that requires a lot more energy. On the other hand, using system fonts that are pre-installed in user devices means your site will require less energy to work.
As with all of these considerations, there will be occasions where you just can’t do without your special, custom font. A custom look and feel can do wonders when it comes to creating a unique brand identity. Just try to reuse fonts where possible and consider system font options first rather than automatically going the custom route.
Your mobile tailoring
Plenty of sustainable web designers are shouting about the benefits of mobile-first design. It’s exactly as it sounds; a mobile-first design will prioritise the mobile browser over a desktop browser. This is because mobile designs tend to be simpler and more efficient. More than that, it will guarantee mobile users have a great user experience on your website, boosting your SEO ranking. And, finally, mobile first design future proofs your website and ensures it remains sustainable. Why? Because mobile traffic accounts for over 55% of total global web traffic, and this figure is only set to grow.
See more: Mobile-First Design – How to Do It and Why
Your agency
Working with a digital agency who understand your environmental concerns and who can tailor their designs to suit is invaluable. More than that, finding a local business who can provide super-fast green hosting on top of their design service means you’ve got a one stop shop for all your website needs. When it comes to choosing a digital agency to work with on your design, look for a business who takes their responsibility and environmental impact seriously. A business like Squarebird, for instance!
Read more: How to Brief Your Web Agency
Benefits of sustainable web design.
Beyond the reductions to your website’s energy consumption and carbon footprint, sustainable web design offers a range of additional benefits. Here are some of the most valuable.
- A more usable, intuitive site due to better design clarity.
- You are more likely to achieve a high SEO ranking.
- Mobile-first design will ensure your site works across all devices.
- Reduced file size of web pages will boost loading speeds.
- Better all round user experience.
High performing, sustainable websites Bristol.
If you’re a conscious business looking to grow an online presence without compromising on your environmental commitments, we’re here to help. Our team of designers, developers, and SEO specialists have all the tools and talent necessary to craft your planet friendly website. We even provide super-fast green hosting.