11 Things Designers Do for a Greener Web

Mai anh Nguyen, Former Product Designer

Article Categories: #Design & Content, #User Experience

Posted on March 29, 2021

One of the main things that I always think about is how to be greener in my life, but it didn't extend into my digital life until recently. There is a lot of controversy with greening our digital life in which we blame large corporations for having a far larger influence, which is true, but I also think that thinking of the environment is of general importance for any designer.

So for example, in water conservation, there's something known as point-source pollution. This is where a large amount of pollution comes from one main source. Let's say that there's a big factory and they're dumping illegal waste such as oil into a river. The public sees the oil, animals die from that oil, and that oil then ruins the tourism of that river. etc. That is known as a straight forward point-source pollution.

There's also something called non-point source pollution, and that comes from MANY sources. For example, some non-point source water pollution is excess fertilizer coming from farms or residential areas, or when the rain comes and there's runoff of oil and grease from the streets into water and all this pollution from all these different areas will then seep into our water table and cause pollution, even in drinking water. This non-point source pollution is a leading cause of water quality problems.

What we should think about is how we, as designers, can reduce this non-point source pollution within the digital space.

So, while there are a lot of things happening on the digitally that cause a lot of energy drain (for instance cryptocurrency or machine learning), today, we're going to be focusing on our carbon footprints that we design for the web.

Digital Carbon Footprint

The way we measure the impact we have on the internet is through measuring data usage by measuring kilowatt-hours per gigabyte of data transferred. Essentially, the more data that is transferred, the more energy it takes to transfer that data to your devices.With websites, the way we measure this is by measuring the page weight of a website.

Now imagine that the internet is a country. The internet would be the 6th largest polluter on this planet right next to Germany. That's a lot of pollution. And what's also interesting is there's no data that indicates that our data usage is going down. In fact, It's actually going up. Our data usage has increased about 35.7% on desktop, since 2016, which means we're not trying to become efficient in our usage. Not only that, but we're expecting about 2/3rds of the human population to be on the internet in the near future. That's more than 5 billion people which means that we're only going to be adding more digital demand.

That’s a lot for us to think about, but GOOD NEWS! There are things that we’re already doing that help the environment out. I’m all about easy things to do, and I think that small steps help bring awareness and advocacy. So I’m going to list out some easy small green things and I recommend for you to research more deeply with people more experienced on how to limit our digital footprint.

Ways you're greening the web

1. You're a minimalist

We may be a bit tired of that Blue Bottle coffee, Apple product aesthetic (or are we?) but what's great is that minimalism on the web actually helps provide a lot of positives:

intentional focus for the user
clear user experience
a nice aesthetic
a more performant product or website that transfers less data

You’re asking the right questions such as, “Do we really need to add this? What are the goals for this product/page? What could we take away? Can a person still finish their task without this?”

Small reductions can really affect the environment based on scale.

A great example is when Danny van Kooten, a programmer, shaved off a single kilobyte in a file that was being loaded on 2 million websites which reduced CO2 emissions by 2950 kg per month. Source: Co2 emissions on the web

2. You’re an advocate of white space

With white space, you can really then focus on imagery and concise wording which allows for a faster page load for both desktop and mobile users. The intentional space is not just aesthetically pleasing, but it can help reduce the size of an image which in turn would decrease the overall file size. White space reduces file size, allows users space to focus on the imagery or wording, reduces visual clutter, and allows people to process both the text and an image individually.

3. You focus on creating simple user journeys

Focusing on creating simple user journeys means that we’re minimizing the amount of pages a user has to visit during a session. This in turn minimizes the amount of data being transferred on the web. Longer user journeys can typically mean a higher bounce rate, and without intentional structure, the user can also get lost within the site leaving them unfulfilled. These longer journeys can also typically lead to higher data transfer and energy usage. Dependent on the use case, try to always keep it simple.

4. You love mobile dark mode

Dark mode is definitely a trend right now. It has that hacker aesthetic, it’s synthwave, it’s 80’s nightrun. It could even help with short term reading.

It also reduces screen power draw for newer mobile devices that use OLED screens. For instance, running Google Maps on a Pixel with a AMOLED screen in night mode reduces screen power by 63%. This is due to the fact that OLED screens can actually turn off each pixel while LCD screens contain a constant backlight. If more devices use OLED screens, there could be a larger draw to building designs with more dark modes to help elongate mobile battery life.

5. You use vector illustrations

Illustration is another trendy thing that's happening right now. The medium number of images per page uses around 26 images with a total transfer size of around one megabyte. That’s about 150,000 words of lorem ipsum within an HTML file. That means an image is worth about 5,000 words! That may be 4,000 words too many. Using vector illustrations will reduce data transfer by just being smaller file sizes compared to imagery. Source: Http Archive

6. You use images with a shallow depth of field

As a photographer, a shallow depth of field, is something that a lot of people want in their images. You see the blurriness of your background in portrait mode in your smartphone or in our zoom backgrounds and what's nice about a shallow depth of field is that frames the subject.

Another thing that's great about photographs with a shallow depth of field is not only is it beautiful, but it actually produces less detail within the photograph, and in that case it actually produces less data. The more you know!

7. You compress your images

Images take up the largest number of requests on a page which means that they are a great source of page weight which means that they can be a great source of savings. There are many image compression tools that help compress an image without visible degradation on the image quality.

2020 also marks the year that Safari is supporting the WebP format which means that all browsers support this format. Using WebP can save your page weight by 30%. Source: httparchive

8. You rarely use GIFs

GIFs have been very popular over the years but they are not the most performant. This is due to the fact that they save every frame as a separate GIF image that they merge together into a larger file. GIFs were not designed for animation and lead to heavy page weights and slow page loads. If you do want short animations you can convert your GIF to WebP format or even to a Mp4 video format or use lossy optimization. Short videos are actually more efficient than GIFs and have accessibility features such as audio description tracks, and captioning.

9. You don't use a lot of web animations.

When animations can be done right, but also when it's done in an inefficient manner, it can really cause a person's computer to sound like a rocket ship and it can make mobile really hard to use. Even something such as a carousel to an image gallery, instead of displaying static images can create an increased peak CPU usage by 7%.

You know, even thinking about a simple fade effect also affects that page load by 22%. So really be intentional with web animations and cut animations that are unnecessary.

10. You're using a system font or a variable font.

This is something that I know a lot of people argue over. We've already seen John Mayer talking about how free fonts are easy to spot. This really depends on what you are doing, what you are marketing, and designing for.

BUT if you're creating something a little bit more utilitarian. Don't overlook system fonts.

Not only are they free, but they also require zero server requests and zero data transfer to use.

Subscription font services such as Adobe fonts add more weight to your website and make additional server requests that can increase your energy consumption and slow your site down. They also limit modifications, which is unfortunate because with a lot of new fonts, there is a lot of variability that we may or may not use most of the time.

If a font file has a lot of variations that you don't end up using, you could reduce that file size by removing all the unnecessary variations that you're not using. If you do have a need for fonts with different variations, consider using variable fonts.

Now another thing that you can do is you can convert the file from a TTL format to WOFF2 to file format, and that just makes the file smaller to use.

A closing thought

This should help peak your interest, but I do recommend doing deeper research. I’d like to think that this is a good short list to help remind me to even think about my online footprint.

If you want to check the online carbon footprint for your website, checkout the website carbon calculator which will assess a website's environmental impact and will also give you a great follow up on how you can lessen that environmental impact.