Writings

How is your website impacting the planet?

6 min read · May 25, 2023

Highlights

Highlights

The internet consumes a lot of electricity. 416.2TWh per year to be precise. To give you some perspective, that’s more than the entire United Kingdom.

It’s not easy to be sustainable.

You can get pretty good results with certain ready-made solutions. But my experience is, it never works out of the box.

You have to spend extra work in optimization. But working with different available solutions it is a good idea to start with a very lightweight theme without a heavy extra site-builder.

Topics

#designforhumans

#health

#mentalhealth

#product

#UX

#responsabledesign


Curios about your carbon footprint?

Curios about your carbon footprint?

Website Carbon Calculator v3 | How is your website impacting the planet?Skip to content Estimate your web page carbon footprint: The internet consumes a lot of electricity. 416.2TWh per year…

www.websitecarbon.com

1st chose a green hosting or in an area with low carbon energy, like France.
2nd prefer static pages than dynamic CMS.
3rd avoid no code solutions, none of them are actually optimized.

If struggling with mental health disorders, poorly designed products can worsen symptoms. Designers can help by improving a few pain points endemic to knowledge work. Many of these proposed UX solutions build on existing technology or expand the availability of underused features.


The human brain consumes a whopping 25% of the body’s oxygen despite making up only about 2% of its mass. By identifying things, labelling them, and ignoring them until they become relevant again, the brain is lazy as a survival mechanism. Pattern recognition and shortcuts mean less energy is wasted consciously processing the situation.


When designing a website or an app, designers can benefit from subconscious decision making by staying close to what people expect. The brain’s preference for patterns and lazy decision making might make survival easier, but it makes UX design more difficult.


The brain scans for information in an F-pattern (or E-pattern), looking at the top information, reading to the right, then scanning the page for relevant information or icons.


Create a calming and supportive atmosphere. Use calming colours, visuals, and sounds to create an welcoming atmosphere and use the state of urgency only when it is an absolute must. Be mindful of what the user needs to know and how to alert them appropriately. Do they really need to be interrupted for this?


Part of the styling is the colour theory, that together with weights, and contrast can be used to direct user attention.Using the dominant colour 60% of the time, secondary 30%, and accent 10% is consistent with the neuroscience behind what draws the eye. Since the accent colour is used the least, it is the most appealing.


I believe that if you make something that’s easy for your users to understand, they’ll get excited about it. Make sure you are guiding them on first use. Use animations, and images as much as possible — people won’t read if they don’t have to, instead, movement will catch their attention.


Add mini tutorials to help users with feature updates. Explainer videos and walkthroughs are hard to fit into a busy day, especially for veteran users. Instead, try adding mini tutorials that trigger when a user attempts an action related to the update. For example, when a user opens a project, highlight new tool locations.


All tutorials should be easily accessible in a help centre. It’s frustrating to dismiss a pop-up and realise that was the only way to learn about an update.


Use clear and positive language.

Avoid using negative or stigmatising language. Use positive and supportive language instead to help users feel more comfortable and confident using the platform.


It’s also important to remember that people want things now. You can’t just write a bunch of copy on a page and expect people to read it all at once; they need little bits at a time so they can digest it one step at a time.


According to a Nielsen Norman study of 45,237 page views, people read only about 20% of the text on a page. Worse, on sites with more content, people dedicated only about 4 extra seconds for each additional 100 words of text.


Provide helpful and personalised content. Provide users with relevant content that is tailored to their individual needs. Use data-driven insights to help users understand the product, track their progress, and identify the actions they would need to perform in order to achieve their goals.


That’s why I try to break up my content into chunks so people can learn what they need when they need it — and feel comfortable with enough time in between each chunk so they don’t get overwhelmed by too much info all at once.


You need to adapt to the user’s behaviour. Learn their preferences so you don’t have to change settings more than you need to. 
Adapt to the context. Make sure your product can be used by a variety of users who may behave differently in different environments. Enable your users to customise their experience and communications.

The measurable factors

The measurable factors

Be careful, Website Carbon Calculator and and Ecograder only analyzed the home page, not all the pages, fruggr is the only solution I red of that crawls the entire website but it is not free and dedicated to large organizations.

According to The Shift Project’s recent report, ICT is responsible for a concerning 4 per cent of global greenhouse gas emissions — twice as much as the aviation industry.


Even more worrying is that this contribution continues to increase exponentially. We must take urgent action to reduce our digital carbon footprint. Research is beginning to understand what exactly is using all this energy; streaming video for example has been identified as the biggest culprit and search queries contribute significantly too.


The Carbon Calculator takes into account four key pieces of data when working out the CO2 produced by a website.

The amount of data transferred over the wire.

Energy intensity of web data.

The source of energy used in the relevant data centre, international averages for carbon intensity of electricity and website traffic.


With all this information in hand, Wholegrain Digital can make an accurate estimation.


Though currently only for the homepage, plans are being made to extend this capability to include other internal pages.


There has been a rapid increase in the amount of electricity consumed by the internet as we consume more and more internet data in our daily lives.

This huge power consumption of the internet may be out of sight and out of mind, but it has a huge carbon footprint that we need to address.


Understanding your users is the first level but in todays’s world is is insufficient, we should design for sustainability of the humankind.


Sustainable UX refers to the practice of creating digital products and services that are environmentally and socially responsible, and that contribute to the overall sustainability of our planet. It involves designing user experiences that minimize the negative impact on the environment, while also promoting ethical and socially responsible behavior.

A designer’s responsibility

When we talk about the energy efficiency of websites, it’s easy to assume that it’s a purely technical topic. However, efficiency can be improved before we even build a website. Design and content have a big impact on energy efficiency and the following items are key areas to think about.

SEO. SEO might not appear to have anything to do with website efficiency but in practice the goals of SEO are inherently aligned with the goal of reducing energy consumption. When optimising a website for search engine rankings, we are helping people find the information they want quickly and easily. When SEO is successful, it results in people spending less time browsing the web looking for information, and visiting less pages that don’t meet their needs. This means that less energy is consumed and the energy that is consumed is used to deliver real value to the user.

Copy writing. Similar to search engine optimisation, copy writing has an impact on website efficiency because it affects the amount of time people spend browsing websites. Sometimes we want people to spend a lot of time on a website immersing themselves in our content. What we don’t want is for people to waste their time wading through content that offers little or no value to them. Therefore, clear and efficient copy writing can help reduce wasted time on the internet and in turn reduce wasted energy.

User Experience (UX). One of the core elements of good user experience is reducing friction in user journeys. We want people to be able to find the things they want and perform the actions that they need to take in the most streamlined manner possible. Good user experience makes using the web easier and more enjoyable for everyone, and once again reduces the amount of energy wasted navigating to pages that don’t serve the correct purpose and staring at web pages trying to decipher what they should do next.

Reduce images. On most websites, images are the single largest contributors to page weight. The more images you use and the larger those image files, the more data needs to be transferred and the more energy is used. Regardless of any technical optimisations, designers and content creators should think carefully about their use of images.

  • Does the image genuinely add value to the user?

  • Does it communicate useful information?

  • Could the same impact be achieved if the image was smaller?

  • Could we reduce images that are not visible to the user, such as in carousels?

  • Could we achieve the same effect with a vector graphic (or even CSS style) instead of a photo?

Asking these questions and keeping images as minimal as possible without compromising user experience will help keep energy consumption down.

Reduce video. Although less commonly used than images, video is increasingly popular as a content format on the web, and it is by far the most data intensive and processing intensive form of content. As with images, ask yourself if videos are really necessary. If they are, see if you can reduce the amount of video streamed by removing auto-play from videos and by keeping video content short. A website with video playing can be one or even two orders of magnitude heavier than a website without video in terms of page weight and creates much higher load on the users CPU, resulting in vastly greater energy consumption.

Choose fonts carefully. Web fonts can enhance the visual appeal of websites but can add significant file weight to the websites on which they are used. A single font file could be as much as 250kb, and that might only be for the standard weight. If you want bold, add another 250kb!

To help reduce the impact on custom web fonts, designers should consider the following options:

  • Use system fonts where possible. They are not always as pretty, but fonts such as Arial and Times New Roman can be used without loading any font files at all as they are already on the users device.

  • Use less font variations. You may feel the need to use custom web fonts, but try to be frugal in the number of typefaces you choose and in the number of different weights that you use for each typeface.

Optimise images. For instance, avoid resizing images with CSS; rather, load them at the correct scale. Use TinyPNG or ShortPixel to compress files without causing visible degradation in quality. Moreover, utilising formats such as WebP instead of JPEG will allow more efficient file sizes while preserving website visitor experience. Following these steps will lead to a significant drop in image file sizes, lessening energy consumption and loading times with no perceivable drawbacks.

Optimise fonts. There are technical strategies to minimise font sizes on websites. We have seen that even custom fonts can result in a 97% reduction in file size, allowing you to optimize fonts even more effectively. Using WOFF, WOFF2, and MOT file formats, you can reduce font file size by using higher compression methods compared to TTF, OFT, and SVG. Make sure that fonts only contain characters necessary for your website by subsetting them.

Let’s design with consideration for our environment, and for the well being of our planet.

Topics

#designforhumans

#health

#mentalhealth

#product

#UX

#responsabledesign


Did you know that a single website visit takes up an average of 1.67 grams of CO²?


Design for Energy Efficiency.

Use simple colour palette and avoiding excessive use of animations or other visual elements that require high levels of processing power.


This web page is cleaner than 79% of web pages tested.

Only 0.20g of CO2 is produced every time someone visits my web page.






 © 2023 by Alexandru Botezatu