How to practice sustainable website design

If you’ve landed on this article, it probably means that you’re a web developer or agency looking to do their bit to help the environment. If you’re not actually sure what sustainable website design is, then our article on this is probably the place to start, as this guide is really all about how to put it all into practice.

Since sustainable web design is all about ensuring your website is lightweight and emits less energy, then if you already follow responsive web design techniques and optimise your website for performance, then you’re probably already on your way to good sustainable web design practices. This sustainable website design will help you improve what you’re doing.

Sustainable Web Manifesto

Many website developers and website agencies who are practicing sustainable website design have signed the Sustainable Web Manifesto written by Wholegrain Digital, which pledges to help make the internet:

Clean: ensuring websites will be powered by renewable energy
Efficient: products and services will use the least amount of energy possible
Open: products and services will be accessible and users can control their data
Honest: not mislead or exploit users in their design and content
Regenerative: will support an economy that helps to nourish the planet
Resilient: will function in times when users need them most.

Sustainable Website Design Practices

At a time when video is more powerful than ever and there are more and more “no code” website options becoming available, websites are getting heavier and heavier. Naturally, many people are going to pick whatever option they can that makes them have the most impressive looking website for within their budget, so this perhaps includes the use of pre-made templates and lots of video.

This is probably the worst combination imaginable. Pre-made templates are pre-filled with so much excess code, high-res stock images and a lot of plugins to create fancy functionality.

It’s a web developer’s duty, therefore, to improve on this where they can. The ideal solution is to build something from scratch, therefore only inputting exactly what is required. This does not mean that you cannot use a CMS. WordPress is our weapon of choice and we just ensure we build bespoke WordPress sites that are fast and designed to perform. If you’d like to know how to speed up your WordPress website, we have a guide for that too.

The following tips will see some overlap with the tips seen in our WordPress Optimisation Guide because that’s a major part of sustainable website design.

Use Green Hosting

No matter how large your website, you can already help by hosting your website with a hosting company who uses renewable energy. Our green website hosting company of choice is Krystal, who have also planted 1 million trees already and are the first company to have reached this mark in the Million Tree Pledge.

Optimise your images

This is one of tasks that actually has the most impact on your website’s performance, and it’s super easy to do, but many people don’t bother.

The use of images can really improve the aesthetics of your website, but high-res images are extremely large and can severely slow down a website. You should always size down the image to the size that’s required for your website and then compress them further. We do this by hitting “save for web” in Photoshop, but you can also run them through an online compression tool such as TinyPNG.

The file size is also extremely important; jpgs and pngs are the most common file types, but a modern format is webp, which has lossless image compression and reduce your file sizes by 1/3.

Use web safe fonts

 This one will crease most graphic designers up because typography is a huge part of beautiful website design. But from a performance perspective, custom self-hosted fonts slow down your website. The way to get the fastest speed is to pick one of the 18 web safe fonts available.

This won’t work for most people, as their brand guidelines will not allow it. So, if you do need to use custom fonts, then upload them in WOFF and WOFF2 formats.

Minify your code

Your website will be created using HTML, CSS and JS code that can all be minified. What this means is that sometimes parts of this code loads unnecessarily and so we can clean this up so that it reduces file size and improves the page speed.

There are plenty of tools out there that allow you to do this and you can then upload the minified code to your website.

Do not autoplay video

Video uses up a great deal of energy and is probably not as impactful as you think on your website. So, first up… think whether you actually need it on your website. Perhaps check your analytics and see how many views it’s getting and whether it provides actual value.

If you do feel that you need video on your website, then make sure that video does not autoplay. The best thing to do is to place an image screenshot of that video and then host that video offsite, such as on YouTube or Vimeo.

Use lazy loading

If you have ever been on a website and noticed that content only shows up as you scroll down the page, this will be lazy loading. This works because the website only shows the resources that are above the fold, and then loads the rest only if the user requires it.

Other Resources

Remember, these are just some of the sustainable website design tips you can do to get started, but there are so many more things you can learn.

We’d highly recommend purchasing Tom Greenwood’s book on Sustainable Web Design as a great guide to building sustainable websites.

BIMA has a fantastic Sustainability Council, which has been producing some impressive work and they put together this great set of resources to help you build green websites. Full disclosure… we built the website 🙂

If you want to test your website to see how much carbon it’s emitting, then check out the Website Carbon Calculator.