Art direction for a low carbon website

23rd April 2024

In 2020 a report revealed that the internet and the systems and infrastructure supporting it accounted for around 3.7% of global carbon emissions, almost as much as the entire aviation industry. Careful art direction can go a long way to minimising your website’s carbon footprint. So what can you do at the design stage to create a website that’s more environmentally friendly?

The ubiquitous hero section

The hero sections you see at the top of some websites typically use large decorative images and sometimes even video. These resources can take a long time to download from your web server and can significantly increase the size of your web pages. Instead of a traditional hero image, consider other ways of getting your message across. You could use illustrations which can be delivered using smaller SVG image files or you could style your hero section using background gradients, bold colours and typography.

The website I built for Eagle Glass has a simple hero section which communicates what the company does without using huge images. It uses a custom font displayed against a nicely styled gradient background.

Fonts galore

Web fonts can really improve the look of your website but they also increase the size of your pages. Be careful how many different fonts and font weights you plan to use as each one will require your website to download a file and some can weigh in at as much as 500k. You could consider using web safe fonts like Arial, Verdana or Palatino on your website. Web safe fonts are generally available across all computer systems and devices and don’t require your website to download additional files.

Being careful with images

Over the years web pages have become larger and images play a major part in that. It’s worth thinking about whether all the images in your design are absolutely necessary and if you can limit how many you use.

Sometimes using just one high quality image per page is a great solution. Consider an About Us page where you want to show all the members of your team. A group image of everyone would be far more efficient than using separate photos of each person.

If you want to display icons or illustrations on your website it’s a good idea to use the SVG format. SVGs are scalable vector graphics that are often smaller in size than PNG or JPG files. They can be embedded directly into the code of a web page so your web server doesn’t have to download an extra image file and you can also use CSS and Javascript to interact with them.

Page layouts

Think carefully about how you design your web page layouts. Using a grid system with appropriately sized columns and rows could stop you needing to use large images that fill the full width of a container. This approach will have the added benefit of breaking up your content into smaller, easier-to-read sections.

In layout A you’d need an image that fills the full width of the container. In layout B your image would sit happily in a column next to your introduction and be considerably smaller.

Using a dark colour scheme

Dark colours are known to use less energy and studies have also shown that using darker colours also makes your website easier to read. For these reasons more and more websites are now using a dark theme. When you’re designing a dark theme it’s good to use a contrast checking tool to make sure your content has a decent contrast ratio and is easy on the eye.

Custom themes

If you’re having your website built in WordPress then consider commissioning a custom theme that contains just the features and functionality you need.

Off-the-shelf WordPress themes often contain lots of extra features that you might never use. All that extra code will slow your website down and unused components like image sliders could still be serving multiple stylesheets and script files.

Websites that use a custom theme are usually always faster and leaner which is good news for the longevity of your website and your SEO.

Summary

I hope that’s given you some food for thought. The design stage of a website build is really important and the choices you make here can go a long way to reducing your website’s carbon emissions. With a bit of creativity you can create a low carbon website that’s fast and search engine friendly.