Sustainable Web Design: How to Design Sustainable Websites

Sonja Hoffmann Last updated on 21.10.2020
7 Min.
Sustainable Web Design
Last updated on 21.10.2020

What exactly is sustainable web design? How can you find out what the environmental impact of your site is? What can you do to make your site more sustainable and how will any improvements benefit your customers? Find answers to all these questions in this article and discover some useful tools for sustainable web design.

Some facts about the energy-guzzling internet

The energy costs of our digital world

According to Website Carbon Calculator the internet consumes 416.2 terawatt-hours (TWh) every year. That is about the same amount of energy consumed in Germany, Europe's most populous country. In fact, if the internet were a country, it would have sixth largest electricity consumption in the world.

But how is such high energy consumption even possible? Wasn't the point of going digital to protect the environment? The reality is that digital doesn't always mean green. Everything needs energy to function, from server farms to data centers to user devices.

An average website produces an estimated 1.76 grams of CO2. With 10,000 visitors a month, this amounts to 211 kg CO2 per year - for one single website! 

Have you ever considered how much energy is needed for your website? It's certainly a lot more than you'd expect! Every request your website sends is received, processed, returned and, potentially, saved somewhere. That's a lot of processes that all require energy.

Our websites need to be greener - but how?

1. Hosting

Many hosting providers have understood the internet's environmental impact and now rely on renewable energies. One thing is undeniable, web hosting devours energy and causes considerable CO2 emissions. Sustainability and climate protection aren't empty buzzwords at RAIDBOXES, they form an important part of our corporate culture.

Green Hosting for WordPress at RAIDBOXES

If you run a website or an online shop, you consume a lot of resources. RAIDBOXES is taking countermeasures with climate positive hosting for WordPress and WooCommerce.

You can easily find out how "green" your website is using this tool from The Green Web Foundation. If your site doesn't fare well in the test, it might be time to consider moving to a different website hosting provider. You can compare different offerings here

The Green Web Foundation
RAIDBOXES uses only sustainable, certified green electricity from hydropower.

2. Design

The right design can prevent unnecessary energy consumption. For example, if your website doesn't load extraneous content in the first place. So how can you combine design and sustainability to save resources?

Mobile First

With a "mobile-first" approach you optimize your content for smartphones right from the start. Optimized sites, for example, don't load oversized media on mobile devices. They're programmed in such a way that desktop versions don't need to be overwritten and are instead directly optimized for smaller user devices.

user experience

We looked at the benefits of well-planned usability in a previous article. A good user experience helps you and your customers make your website more sustainable. By minimizing unwanted user detours, for example. Ideally, only the pages the user wants to visit should be loaded. If you reduce unwanted clicks, you send fewer data requests and therefore use less energy.

Page count

For increased sustainability, this is another area you can work on while planning your website. In general, the fewer pages that need to be loaded, the fewer data requests are sent. This not only makes your site easier to navigate, it also makes sense from an ecological point of view to summarize the content and reduce the number of pages.

We can also be more conscious in our use of media such as pictures, animations, and videos and apply them in a more targeted way. Do all the pictures, videos, icons, and animations you've planned for your site really bring added value? Or could you do without some of them?

3. Development

Page speed

Page speed has long been a staple of web design. But what does a good page speed have to do with protecting the environment? A fast page is the result of not having to load too much data!

Faster websites are better for the environment

It's important to properly optimize your website or your online shop. This is your personal contribution to protecting the environment. Find out more about this area in our e-book Page Speed & Performance.

There are a variety of different factors that can affect page speed. Many tools will both analyze your page speed and also recommend solutions to increase performance.

For this article, I've put my own site through its paces. As you'll see from my tests, the tools may give you entirely opposite results. That's why you should think about what factors are important to you first and what you want to achieve with the tests.

Google Lighthouse
This result is provided by the popular tool PageSpeed Insights.
gllighthouse
Google Lighthouse includes accessibility in its tests

As a comparison, here are the results from the Chrome Developer Tool Google lighthouse and Google PageSpeed Insights. Both tools are useful reference points for on page optimization.

ecograder
Ecograder provides good approaches for on page optimization.

Ecograder was created specifically to test the sustainability of websites. For me, Ecograder is the most user-friendly tool available. The information the tool provides is concise and easy to understand and the tips for improving the page speed are helpful.

The Website Carbon Calculator also mainly tests for sustainability. The way the results are presented is visually appealing. The comparisons to less abstract units of measurement make it easier to understand the environmental impact of your site.

On the whole, I find the Website Carbon service informative but I miss the customized details I know from Google Tools and Ecograder. Moreover, I'm not satisfied with the comparison to other tested websites as a measure for professional projects and the arguments offered by Website Carbon.

webpage test
The popular tool WebPageTest offers an in-depth analysis

For developers in particular, Webpagetest.org is an excellent tool as it goes into great detail. You can use different presets to test from "Simple Testing" all the way up to "Advanced Settings". These allow you to simultaneously exclude different components of your websites, add them via code snippet, and deliver a Google Lighthouse Report. You can also compare two websites at the same time - the possibilities with this tool are nearly endless. The results are broken down technically into the smallest detail. This tool is thus used for advanced testing while Google and others are more general in their analysis.

Images and other media

I mentioned before about how you can reconsider the content you're offering. Now it's all about integrating the pictures in an optimal way. 

Tinypng is great for compressing images without any apparent loss of quality. You can achieve the same result with Photoshop and the "Export for web" setting. If you've already integrated your pictures into a CMS, e.g. WordPress, you can still optimize the resolution with a plugin like Smush.

You can use CSS sprites if you're working with a lot of images and icons. They work in a similar way to sprites in computer game development. Images are combined on a sprite sheet. CSS is then used to determine under which coordinates each image is located. Find out more about this topic here.

Sprite sheets are multiple images/icons that are merged into a single file. Designers often group their images by theme. Based on the corresponding x- and y-coordinates, the sheets are divided and integrated accordingly. In this way, one single document is loaded which displays different visual components.

Lazy loading is another way to optimally load images. With this function, images are only loaded when the user needs them. There are countless WordPress plugins available for lazy loading in both free and paid versions.

WordPress

It's natural to question whether any company's environmental approach is authentic: is a sustainable internet achievable? How "green" can WordPress actually be? The article WordPress and sustainability offers an up-to-date discussion of the issues within the WordPress community.

Sustainable WordPress: Be part of it

RAIDBOXES has been dedicated to a sustainable WordPress from the very beginng. Read our tips on WordPress & Sustainability , and the Green online shops. Do you want to take action yourself? Then read our article Green hosting for WordPress .

What contribution can we make to sustainable and efficient web design? What are the most important levers in everyday design to save resources? The best tips: Have as few plugins as possible and use a lightweight theme.

Average WordPress sites amount to about 600 KB. By choosing the right theme and adopting the approach explained above, you can reduce this by 50% or more. You will find a small selection of tested themes here.

If your website is already live and it's not possible to change your theme right now, you can still improve WordPress performance using these 10 levers.

Get your customer on board with sustainable web design

 The following advantages should be enough to convince your customers to accept sustainable web design: 

  • Improved usability and user experience
  • Clear and easy-to-understand designs 
  • Better SEO rankings 
  • Shorter loading times 
  • Mobile-optimized sites 

If you still need more arguments, various foundations also offer so-called badges which you can integrate into your customer's site.

The following badge can be incorporated when you choose a website host that relies on certified green electricity:

Even WebsiteCarbon offers a site badge to show your content is sustainable.

Conclusion and further sources

During my research for this topic, I stumbled across countless statistics. Sending an email, for example, has the same effect on our environment as using a plastic bag. Physical books are often more environmentally friendly than e-books. Buying music albums places less of a drain on our resources than streaming them. The list goes on and on. Above all, these statistics shake up our idea that digital somehow always equals "green".

As web designers and developers, we naturally play a major role in how the web will develop in the future. But we can also start with changing our own behavior right now and using the internet more consciously.

Find out which of apps you use are green and which need urgent attention: The tool ClickClean from Greenpeace gives you an interesting overview of your chosen applications and their ecological value.

Impulses for a greener future: 

  • Jack Lennox has built a WordPress theme that's only 7 kB 
  • In his blog DeathToBullshit Brad Frost sends out a rallying cry for us all to rid the world of bullshit. 
  • Heydon Pickering gives coding tips on how to reduce the size of your site

With all this talk of the negative environmental impact, we shouldn't lose sight of the positive effects the internet has. Video conferences, for example, mean we have to travel less. Especially over the last few months, everyone has seen how we can use transport less and thus reduce our carbon footprint. 

It's also been possible to reduce office spaces as more people have had to work from home. Furthermore, the internet allows us to join forces with others: we can use sharing platforms and book a homestay through portals like AirBnB, which are more environmentally friendly than hotels.

The internet also makes it much easier to disseminate information on sustainability and protecting the environment. We can find and purchase eco-friendly products to which we wouldn't otherwise have had access to. These are all beneficial effects of digitalization.

If you want to delve deeper into the topic, I suggest taking a look at the website sustainablewebdesign.org as a starting point. The most important points are explained in clear, well-structured paragraphs and technical solutions are recommended.

Sustainable Web Design: What questions do you have for Sonja?

Feel free to use the comment function. Do you want to be informed about new articles on web design and development? Then follow us on Twitteror Facebook , or subscribe to our newsletter.

After studying Game Design and Creative Writing in the green Auckland region, Sonja Hoffmann has specialized in web and app design and development. Her focus is on gamification and the exploration of user motivation and experience, coupled with a passion and curiosity for technological trends.

Related articles

Comments on this article

Write a comment

Your email address will not be published. Required fields are marked with * .