Sonja Hoffmann avatar

Share on social media

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 website is? How can you make your website more sustainable and what are the benefits for your customers? I have summarised the answers to these questions and some important tools in this article.

Facts about the power-hungry Internet

What our digital consumption costs in energy

According to Websitecarbon, the internet consumes 416.2 terawatt hours (TWh) per year. That is about as much as Germany consumes alone. If the internet were a country, it would already be the sixth largest consumer of electricity in the world.

But how can that actually be? Didn’t we go digital specifically to protect our environment? The reality here is somewhat different: Unfortunately, digital doesn’t automatically mean “green”. From server farms to data centres to the actual end device – everything consumes energy in order to function.

According to estimates, an average website produces 1.76 grams of CO₂. With 10,000 visitors per month, that’s 211 kg of CO₂ per year – for a single page!

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

Our websites need to become greener

1. WordPress Hosting and Sustainable Web Design

Many WordPress hosting providers are now joining in and focussing on renewable energies. Because one thing is clear: WordPress hosting consumes energy and causes considerable CO₂ emissions. At Raidboxes, sustainability and climate protection are not just empty phrases, but an integral part of our corporate culture.

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, it is advisable to change your WordPress hosting provider. You can see a comparison here.

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 combine design and sustainability and conserve resources?

Mobile First

With Mobile First, you optimise your content for use on smartphones right from the start. Optimised pages do not have to load oversized media on mobile devices. They are programmed in such a way that desktop styles do not have to be overwritten, but are designed directly for the smallest device.

User Experience

I have already told you about the benefits of well-planned usability. A well-functioning user experience helps you and your customers to make your website more sustainable. You minimise unwanted detours for your users. Ideally, only the pages that the user actually wants to visit are loaded. If you reduce unwanted clicks, you send fewer data requests and therefore use less energy.

Planning WordPress projects: From requirements to implementation

We spoke with Ben Hutchison-Bird from NINE Brackets about key strategies for translating client needs into successful WordPress and WooCommerce projects.

Page count

Here, too, you can work on your sustainability when 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 ecological sense to summarise the content and reduce the number of pages.

We should use media such as images, any animations and videos more consciously and purposefully. Do all the images, videos, icons and animations you have planned for your site really add value? Or can you do without some of them?

3. development and sustainable web design

Pagespeed

Pagespeed has long been a part of the little 1×1 of web design. Why is it also good for environmental protection to pay attention to good performance? A page that loads faster is the result of less data that needs to be loaded!

There can be various reasons why your pagespeed is slow. Many tools provide you with solutions for better performance in addition to the analysis.

For this article, I put my own website through its paces. As you will see from my self-test, an analysis can even turn out completely the opposite – depending on which application is used for testing. You should therefore consider what goals you are pursuing with the tests.

google lighthouse
The popular PageSpeed Insights tool provides me with this result.
gllighthouse
Google Lighthouse also tests my site for accessibility, among other things.

Here is a comparison of the Chrome Developer Tool Google Lighthouse and Google PageSpeed Insights. Both tools are useful reference points for on-page optimisation.

ecograder
Ecograder provides good approaches to on-page optimisation.

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

The Carbon Calculator website also mainly tests for sustainability. I find the visual presentation of the results positive. The comparisons with less abstract units of measurement make it easier to realise the extent of one’s work.

Although I find the Website Carbon service generally informative, I miss the customised details that I know from the Google tools and Ecograder. I also find the comparison with other tested websites inadequate as a measure for professional projects and arguments.

webpagetest
The popular Webpagetest tool goes into great depth.

Webpagetest is an excellent tool for developers in particular, as it goes into great detail. You can test from various presets here. From “Simple Testing” to “Advanced Settings”, which allow you to exclude various components of your website, or more precisely to add them via a code snippet, and at the same time deliver a Google Lighthouse report, through to comparative testing of two websites, “everything” is possible here. The results are also broken down technically down to the smallest detail. This website is therefore used for advanced testing, while Google and co. carry out their analyses in a more general way.

Images and other media

I have already mentioned rethinking the content on offer. Now it’s time to optimise the integration of the images.

Tinypng works wonderfully for compressing images – and usually without any recognisable loss of quality. You can achieve the same result with Photoshop and the “Export for web” setting. If you have already integrated your images into a CMS, such as WordPress, you can subsequently optimise the resolution with a plugin such as Smush.

If you have a lot of images or icons, you can use CSS sprites. They work in a similar way to sprites in computer game development. Here, images are integrated once using a sprite sheet. CSS is then used to determine the coordinates under which each image is located. You can find out more about this topic here.

Sprite sheets are several images/icons that are combined in a single file. Designers often group their images thematically. The sheets are divided and integrated accordingly using the corresponding x and y coordinates. In this way, a single document is loaded that displays various visual components.

Lazy Load is another variant for optimising the loading of images. Here, images are loaded when the visitor needs them. There are now countless (free and paid) plugins for WordPress.

WordPress

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

Sustainable WordPress: Be a part of it

Raidboxes has been committed to sustainable WordPress from the very beginning. See, among other things, our tips on WordPress & sustainability and on green online shops. Do you want to take more responsibility yourself? Then read our article on green hosting for WordPress.

What contribution can we make to sustainable, efficient web design? What are the most important levers in everyday design to save resources? A few plugins and a lightweight theme are the top tips here.

The average WordPress website is around 600 KB. By choosing the right theme and following the approach explained above, you can save 50 per cent or more. You can find a small selection of tested themes here.

If your website is already up and running and changing a theme is out of the question for the time being, you can improve your WordPress performance with the help of these 10 levers.

How to convince others to join in

The following keywords should actually be enough to convince your customers of sustainable web design:

  • Improved usability and user experience,
  • clear and easy-to-understand designs,
  • better SEO rankings,
  • shorter loading time and
  • Mobile-optimised pages.

If you still need more arguments, various foundations also offer so-called badges that you can integrate on your customers’ pages.

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

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

Conclusion on Sustainable Web Design

During my research on this topic, I stumbled across countless statistics. According to these statistics, sending an email has the same impact on our environment as using a plastic bag. Books are often more environmentally friendly than e-books. Buying music albums is better for our resources than streaming them. The list is endless. Above all, these statistics shake up our previous general understanding that digital also means “green”.

Apart from the fact that we as web designers and developers naturally play a major role in how the web develops in the future, we can also start with ourselves and use the Internet a little more consciously.

Find out which of your apps are green and which urgently need to be cleaned: With the ClickClean tool from Greenpeace, you can get an interesting overview of your (favourite) apps and find out how ecologically valuable they are.

Contributions that create more awareness for a greener future:

  • Jack Lenox has built a WordPress theme that weighs just 7 KB.
  • Brad Frost encourages us on his blog DeathToBullshit with a humorous twist to do without it.
  • Heydon Pickering gives coding tips on how to make your site leaner.

We should also not forget the positive effects that the internet has on our environment. For example, the use of video conferencing saves us travelling. Over the last few months in particular, everyone should have realised how we can use the internet to avoid using transport and thus reduce CO2 emissions.

We also have office space that can be downsized thanks to working from home. The internet also 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 about sustainability and environmental protection. Offering and purchasing eco-friendly products (to which we might otherwise have less access) are of course also among the positive effects of the digital industry – to name just a few.

If you would like 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.

Sonja Hoffmann avatar

Leave a Reply

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