Sustainable Web Design: How to Design Sustainable Websites

Sonja Hoffmann Last updated 21.12.2020
7 Min.
Sustainable Web Design
Last updated 21.12.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 Websitecarbon, the Internet consumes 416.2 terawatt hours (TWh) per year. That's about as much as Germany alone consumes. If the Internet were a country, it would already have the sixth largest electricity consumption in the world today.

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 is estimated to produce 1.76 grams of CO2. With 10,000 visitors per month, this comes to 211 kg of CO2 per year - for a single site ! 

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 counteracts this - with climate-positive hosting for WordPress and WooCommerce.

You can easily determine whether your website is "green" with the help of this tool from The Green Web Foundation. If the result is negative, you should change your hosting provider. You can see a comparison 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

I've told you about the benefits of a well-planned usability before. A well-functioning user experience helps you and your customers to make your website more sustainable. You minimize unwanted detours of your users. Because ideally, only the sites that the user actually wants to visit will 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 is therefore all the more important that you optimise your website and your shop well. This is your personal contribution to climate protection. Learn more about this 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 gives me the popular tool PageSpeed Insights.
gllighthouse
Google Lighthouse also tests my site for accessibility, among other things.

Here as a comparison the Chrome Developer Tool Google Lighthouse and Google PageSpeed Insights. Both tools are useful landmarks for onpage optimization.

ecograder
Ecograder provides good approaches to onpage optimization.

Ecograder was created specifically to test the sustainability of websites. I personally find Ecograder the most user-friendly. The information is presented concisely and understandably, the tips for improving the pagespeed are helpful.

The website Carbon Calculator also mainly tests for sustainability. I find the pictorial representation of the result positive. The comparisons to less abstract units of measurement make it easier to become somewhat more aware of the extent of one's work.

I find the service of Website Carbon generally informative, but I miss the individually tailored details as I know them from the Google tools as well as Ecograder. In addition, I find the comparison with other tested websites as a measure for professional projects and argumentation inadequate.

webpagetest
The popular tool Webpagetest goes into great depth.

Especially for developers, Webpagetest is an excellent tool because it goes into great detail. You can test here from different presets. From "Simple Testing" to "Advanced Settings", which give you the option to exclude various components of your website, or add them via code snippet, and at the same time deliver a Google Lighthouse Report, up to the comparison testing of two websites, "everything" is possible here. The results are also technically broken down to the smallest detail. This website is therefore used for advanced testing, while Google and Co. make their analysis a bit more general.

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 works wonderfully for compressing images - and usually without any noticeable loss of quality. You can achieve the same result with Photoshop and the setting "Export for Web". If you have already integrated your images into a CMS, such as WordPress , you can still optimize the resolution afterwards with a Plugin, such as Smush.

If you have a lot of images or icons, you can look into CSS sprites. They work similar to sprites in computer game development. Here, images are integrated once per sprite sheet. Afterwards CSS determines under which coordinates which image is located. More about this topic can be found 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

Of course, we too ask ourselves when ecological approaches by companies are authentic: Does a sustainable internet even exist? How "green" can WordPress really be? In the article WordPress and sustainability you will find a current state of the discussion in the German-speaking WP community.

Sustainable WordPress: Be part of it

RAIDBOXES has been committed to a sustainable WordPress from the very beginning. See, among other things, our tips on WordPress & sustainability and on green online shops. You want to take more responsibility 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 websites come to about 600 KB. By choosing the right Themes and taking into account the previously explained approach, you can save 50 percent or more. A small selection of tested Themes can be found here.

If your website is already up and running and switching to Themes is out of the question for now, you can improve your WordPress performance with the help of these 10 tweaks.

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:

For example, WebsiteCarbon also offers a badge that you can integrate on your sites to show that your content is built sustainably and ecologically.

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 your apps are green and which are in urgent need of cleaning: With the ClickClean tool from Greenpeace, you can get an interesting overview of your (favorite) apps and find out how ecologically valuable they are.

Impulses for a greener future:  

  • So Jack Lenox has built a WordPress -Theme which is only 7 KB light. 
  • Brad Frost, on his blog DeathToBullshit, encourages us to do without just that with a humorous twist. 
  • Heydon Pickering gives coding tips on how to slim down 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. 

In addition, we have office space that can be downsized thanks to home offices. In addition, the network offers us the opportunity to join forces with others: For example, we can use car-sharing platforms and book "homestays" such as 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 recommend the website sustainablewebdesign.org as a starting point. The most important points are explained here in clear paragraphs and possible technical solutions for implementing them are offered.

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

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

After studying Game Design and Creative Writing in the green Auckland region, Sonja Hoffmann 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.

Comments on this article

Post a comment

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