Sustainable Web Design

Sustainable Web Design: How to design sustainable websites

What exactly does "sustainable web design" mean? How do you know how ecological your site is? How can you make your website more sustainable and what are the benefits for your customers? I have compiled the answers to these questions and some important tools for you in this article.

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 CO₂. With 10,000 visitors per month, this comes to 211 kg CO₂ per year - for a single site! 

Have you ever thought about how many resources are needed for your website? More than you think, guaranteed! Every request that your website sends is received, processed, returned and, if necessary, saved at any point. That adds up to a lot.

Our websites must become greener

1. WordPress Hosting and Sustainable Web Design

In the meantime, many WordPress hosting providers are joining in and relying on renewable energies. Because one thing is clear: WordPress hosting consumes energy and causes significant CO₂ emissions. At Raidboxes , sustainability and climate protection are not just empty phrases, but an integral part of the corporate culture.

Green WordPress 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 WordPress hosting.

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 WordPress hosting provider. You can see a comparison here

The Green Web Foundation
Raidboxes relies on sustainable, certified green electricity from hydropower.

2. design and sustainable web design

The right design can prevent unnecessary energy consumption, for example if your website does not load unnecessary and unwanted content in the first place. How can you reconcile design and sustainability and 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 have already told you about the benefits of a well-planned usability. A well-functioning user experience helps you and your customers to make your website more sustainable. You minimise unwanted detours by your users. Ideally, only those pages are loaded that the user actually wants to visit. If you reduce unwanted clicks, you send fewer data requests and therefore use less energy.

Page count

Here, too, you can work on your sustainability while planning the website. As a general rule, the fewer pages that need to be loaded, the fewer data requests are sent. Apart from making your site easier to navigate, it also makes sense from an ecological point of view to combine 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 and sustainable web design

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 - better for the climate

It is therefore all the more important that you optimise your website and your shop well. This is your personal contribution to climate protection. You can find out 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 concise and easy to understand, and the tips for improving page speed 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 lack the individually tailored details that I know from 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.

Webpagetest is an excellent tool, especially for developers, because it goes into great detail. You can test from different presets here. From "Simple Testing" to "Advanced Settings", which allow you to exclude various components of your website, or to be more precise, to add them via code snippet, and at the same time deliver a Google Lighthouse Report, 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 somewhat 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 others, 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 changing themes is out of the question, you can improve your WordPress performance with the help of these 10 tweaks.

How to convince others to join in

 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.

When choosing a WordPress hosting provider that uses sustainable, certified green electricity, this badge may be included:

WebsiteCarbon, for example, also offers a badge that you can integrate on your pages to show that your content is sustainable and ecological.

Consent*
This field is for validation and should not be changed.

Conclusion on Sustainable Web Design

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 environmental protection. Offering and purchasing eco-friendly products (to which we might otherwise have less access) are also, of course, among the positive effects of the digital industry - to name but a few.

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 their implementation 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 postsweb design and development? Then follow us on Twitter, Facebook or via our newsletter.

Did you like the article?

Your rating helps us improve our future content.

Post a comment

Your email address will not be published.