Smells Like Green Spirit #2 - Web Design
Last week on our Smells Like Green Spirit #1 – Web Hosting, we explored in details solutions to make your website less harmful for the environment. Indeed, by outsourcing to hosting to a company running their hardware on electricity coming from renewable sources, you can negate the carbon output that would normally be emitted. But what if I told you, you could go beyond that. The very design of your website can have repercussions, not on the CO2 emissions but directly on the amount of electricity needed every time someone opens your website.
We already explained the concept of data centres sending the data of your website to transmission networks which will then send the data to your phone or computer. Electricity is being used at every step of the process, and obviously, it then produces carbon emissions. The internet uses roughly 416.2 terawatt-hours per year of electricity. If you remember last week, this is more than the whole of the UK! In terms of carbon footprint, the internet is responsible for 830M tons per year of carbon emission. If you read our climeworks article, the OECD recommends a €30 tax per tonne of carbon produced; the internet would thus pay around 24 900 000 000 if we applied this recommendation.
What is Sustainable Web Designing?
The concept of sustainable web design is to make the pages more accessible and less resource consuming to load. Necessarily by correctly designing your website, it would be more performant and more comfortable to navigate for your users. Indeed, sustainable web designing has a tremendous positive impact on the environment. Still, it is all about to make beautiful and user-friendly websites.
Indeed if you think about it, the easier a specific content is findable, the fewer pages people will load, and thus, the fewer requests are sent to servers and electricity used in the process. As it turns out, the sustainable design offers a way better user experience. But as one image is worth a thousand words, let’s explore some websites together!
Let’s explore the good students first! https://dotyork.com/
This page is an example of what excellent sustainable web designing should be. First thing first, the background uses colours rather than photos. This means that the file will be way easier to load at every step of the way. Secondly, the interface is reduced, you have an “events” and an “update” button, with an option to subscribe to a newsletter and some updates example. No long menu is guiding you through endless pages with categories and subcategories, which drastically reduces the number of pages to load. It emits 0.11g of CO2 per load which is amongst the very best score achievable.
Now if you still want your website to feature some photos and be very lively, look at https://www.riverford.co.uk/
Now, this website is the total opposite of the previous one in terms of design. The menu has many categories, the background is a photo, there are many pieces of information and there seems to be an astronomical amount of individual pages. Then why is it useful? Well, firstly, we need to look at the background and the picture that is used. Using a photo is not necessarily an unsustainable practice as long as one makes an effort to compress said image! If you look at the two following pictures, one is compressed, and the other one is not. By zooming and looking very closely, you can see a slight difference in the colours used. Also, the compressed one is 75% smaller to load.
Although the image is not the only difference, what about the menu? Well, it Is easy, compared to the previous site, this one has much content to showcase. By adding a long but self-explanatory menu, this avoids unnecessary intermediary page loading. This is the same concept that we are using on our blog. If you look at our menu, under “article”, you will see the options to reach our subcategories, which in turns avoid our readers first to load the articles page and then load the policy analysis page for instance.
The last point on why this website is excellent; you can find everything you need on the home page. Do you want to sign in, register, order a zero packaging organic veg box, find the recipe of slow-cooked courgette pasta? It is all on the home page. Talk about intelligent design avoiding unnecessary page loading! Overall this website emits 0.5g of CO2 per page view.
Now let’s look at some bad students! Please keep in mind that this is not a blame and shame exercise, sustainable web designing is still very niche, and most websites have not transitioned yet although it is an excellent way to see what is wrong and what to avoid! If you visit the French train company’s website, the first thing you will notice is that the webpage takes a long time to load, which is never a great sign. When exploring the front page, you can see a lot of different articles, each with photos each taking a long time to lead. Finally, if you peak at the menu, you will see ten categories and 61 subcategories (I did not feel like counting the sub-subcategories, I think you get the point). But why is it bad here when it was right before? Well, each category has an independent menu page to load the subcategories, which means that before accessing a piece of information you have at the very least one unnecessary page load. Further, while you have so many categories on the website, the home page is empty, and most information will require independent loading page. Altogether, even though the design is not the best, it is far from being the worst, each page load will emit roughly 1.43g of CO2.
What are the key points?
As we have seen through our example, the critical points are usability and reachability. To design a sustainable website, one must make sure the information is easy to access. Decreasing the number of page loads will emit less CO2 but also will be less frustrating for your users. Indeed if you go on a website and you find all the information you need in under 10 seconds you are more likely to come back than if you nervously look for 30 mins. Once again, environmental sustainability brings an undeniable competitive edge to your website.
Secondly, the design is essential by adding several non-compressed photos; the page will use more energy to load and ultimately, it will take longer to load. Again by designing a simple website and only using compressed photos, the loading time will be way faster, and your users will only have an enriched experience. There is nothing more frustrating when you are ordering something online, and the website takes ages to respond. You will likely get what you came for and leave. On the contrary, if it is fast to load and the information is easily accessible, you might have some spare time to look at another product.
The best example I can give you is that writing this article I cannot stop thinking about ordering a zero packaging organic veg box and slow-cooked courgette pasta, even though I was not looking for it in the first place.
Hopefully, you will start thinking about making great sustainable websites to encourage your viewers to come more regularly. Please keep in mind that we are currently not experts in sustainable web designing as you can see from our website. It is currently emitting 2.10g of CO2 per page load, which is not great.
Although, at Next Wave Network, we do not want to preach for solutions that we do not apply ourselves. And this is why we decided to make an effort and make our website as sustainable as possible. We will keep track of every modification we will bring in that spirit, record it and show you our way through getting a sustainable website. If you have any question about our current progress, do not hesitate to contact us. Our goal is to reach less than 1g quickly and ultimately reach less than 0.5g of CO2. Stay tuned to see our evolution!