The Sustainable Web Design Revolution

Sustainability is at the top of everyone’s agenda with the urgency to slow down global warming, a big part of which requires a big reduction in carbon emissions. The digital world is becoming increasingly aware of its impact and we are beginning to see a shift towards more sustainable web design.

We tend to view carbon emissions in terms of how we run our cars, or perhaps how we heat our homes, but the internet itself consumes 416.2TWh of electricity per year, which is more electricity than is used by the United Kingdom as a whole.

What’s more, based on 10,000 monthly page views, your website could be contributing up to 211kg of CO2 a year, according to Website Carbon (who also have a great tool to calculate your website’s carbon footprint).

It is clear, then, that we need to practice a more sustainable type of web design, which means ensuring you are thinking about the website as a whole as you’re going through the design process.

The benefits of this are not just environmental. A more efficient website means faster page loading times and a better user experience. Site speed is also one of Google’s ranking factors so will help your site to appear higher up in search results.

Consumers are also becoming more conscious about the products and services they’re using so having a sustainable website will provide the visitor with the assurance that they are looking for.

We take a look at some of the things web designers should be taking into account when designing a more efficient, sustainable website, focusing on two main areas:

1.     The hosting platform

2.     The content

The first consideration when building a website is your hosting platform. Choosing a hosting platform that uses renewable energy makes a huge difference to a site’s overall carbon footprint.

It is also good to consider the location of the hosting company’s data center. If your audience is located in Europe and the data center is in the US, the amount of energy used to transfer the content will be much higher. The distance can also delay page loading times, so a closer data center equals a better user experience.

Alternatively, if the audience is global you can use content delivery networks (CDN’s) to place the content of your pages in closer proximity to the end-user no matter where they are.

The Green Web Foundation has a comprehensive directory of green hosting companies worldwide.

Reducing the number of videos and photos on a site is a good place to start. If you are adding images take the time to properly size them. You can also use one of the free services readily available to optimize them before uploading. One of our favorites is TinyPNG.

Think about choosing clean, minimal images with plenty of negative space, or use vector graphics instead. They are much easier to compress than complex, detailed photographic images.

If you have to have video content on your site, try to avoid having it on auto-play and keep the video short. Auto-play hugely increases the load on the end user’s CPU and can increase the total weight of a page by 2 - 3 times.

Be mindful of the added weight of complex fonts and graphics. Pop-ups, image carousels, video backgrounds may make you feel as though you’re packing enticing content onto your site, but it all increases the size, and therefore the energy required to load it.

Optimizing your content is important for making your website more easily found in searches, but it also makes your website more efficient.

Having your content written in a clear, easily searchable way helps to reduce the number of clicks required to find information. Within the site itself, having a simple interface, easily navigable with a minimal number of pages makes for a much sleeker user experience.

This has the knock-on effect of people spending less time browsing and visiting pages which, in turn, reduces overall energy consumption.

Writing clean code and using less bulky JavaScript adds to the efficiency of a website. Optimizing the content as you’re building and writing static webpages that can vastly help. Also using accelerated mobile pages (AMPs) to strip down the existing version of a web page makes a big difference.

Each page should ideally be between 1 and 2MB in size maximum. Pingdom is one useful tool through which you can check the size and speed of a webpage.

Using out-of-the-box website builders such as Wix or Squarespace make it easy for anyone to create a basic site and the ease of using them often makes them the first choice, even for more experienced designers. They do come at a price though, and not just financially.

Because of the large number of built-in features that these types of sites offer, the end result tends to be slow. They don’t tend to compress images and even features that are not used still load in the background.

WordPress is also very feature heavy, with complex default themes. Opt for lightweight themes or use ultralightweight tools such as GeneratePress to ensure you’re starting with a minimally sized site.

When using website builders, be sure not to over-use plugins that add unnecessary weight to the front end, and follow the guidelines above regarding clean, minimal content to keep the footprint as low as possible.

Multiple factors can increase the efficiency of your web design practice. Carefully assessing the content and choosing minimalist designs go a long way to decreasing the size of your website. Selecting a green hosting option also ensures that your overall carbon footprint remains low.

Joining the sustainable web design revolution is good for the environment, it creates a better user experience and ensures you are maximizing the potential of your website.