I started my career in product design, when "product" meant a real thing that you could hold in your hand. When I moved into digital design 15 years ago, I was excited to design digital products that added value to people's lives without any environmental impact. They didn't waste energy, didn't have any wasteful packaging and didn't end up as waste in landfill sites at the end of their lives.
Therefore, I was surprised to later learn that digital products can be wasteful. In this article, I explore how applying a zero waste mindset to digital design and development can help you create an internet that's better for people and the planet.
Waste isn't normal
I think it's fair to say that even if we don't like it, most of us accept waste as a normal part of everyday life. However, waste is anything but normal. In nature no resource is wasted and everything has value. The type of waste that we now think of as being so normal is a relatively new concept.
By the 1980s, waste piling up in landfill sites was already a global problem. Daniel Knapp decided that something must be done. He came up with the concept of Total Recycling, in which nothing should ever go to a landfill or incineration. He coined the term Zero Waste as the goal and co-founded a salvaging operation called Urban Ore. It was a real world experiment to demonstrate how all types of waste could be diverted from landfills and reused in the community.
While Knapp's initiative had some success, the global waste problem kept growing and in the mid-2000s a growing number of individuals began to take things into their own hands, trying to live zero waste lifestyles. This concept was popularized by bloggers such as Bea Johnson and Lauren Singer who shared their experiences trying to live without waste and inspired others to follow their lead.
How does this apply to web design?
Several years ago, I embarked on some research to understand whether or not web products have an environmental impact. I was shocked by what I found. When taken as a whole, the internet produces more carbon emissions each year than the global aviation industry, thanks to the huge amount of electricity required to power data centers, telco networks, and billions of end user devices. Not to mention the fact that all of that equipment needs to be manufactured and maintained. The internet is not virtual at all, it is very much physical.
Our team then developed a carbon calculator for websites to help raise awareness of this issue. We tested millions of web pages and identified a pattern as it gained popularity. The most energy efficient websites were the ones that looked like they were from the 1990s while many new websites were highly polluting.
It turns out that despite their basic functionality and appearances, early websites were super efficient, with tiny file sizes and requiring hardly any computing power. As computers got more powerful and internet speeds increased, websites became increasingly bloated, eroding the benefits of advances in computer hardware. As a result, the modern web is no faster than it was 10 years ago, and is far more polluting.
In an article for National Geographic about people living zero waste lifestyles, journalist Stephen Leahy wrote that contrary to his prior assumption, "These are not wannabe hippies, but people embracing a modern minimalist lifestyle. They say it saves them money and time and enriches their lives."
What if we applied a zero waste mindset to digital design? Could it help us create a modern, minimalist web that saves people time, money, and enriches people's lives? I think it could.
1. Pictures are more than a thousand words
A picture tells a thousand words, but the truth is that a picture uses a lot more data than 1000 words of text, and in turn it uses a lot more energy to store, transmit, and render.
Research by NielsenNorman Group found that website visitors completely ignore images that are not relevant to the content, making generic stock photos on websites a literal waste of space and of data. It's better to use images mindfully and only include them in designs that truly add value.
Even if you are going to include photos in your designs, how you use them can often be wasteful. For example, there is roughly a square law when it comes to image dimensions and file size. If you double the width and height, you almost quadruple the file size. And that's assuming you've written the code to load the correct size of image rather than loading large image files and displaying them to appear small.
You can also find waste within the images, in the form of detail that doesn't need to be there. Removing detail by blurring out parts of an image, using photography with shallow depth of field, photographing objects on plain backgrounds, or using monochrome images are just a few ways to reduce image file sizes. If the detail isn't needed, then it's waste.
Even if you design images efficiently, there's still potential waste in the image files themselves. Using indexed color in your image editing application can strip out unnecessary data from image files with no visual loss of quality.
2. Choose your file format wisely
You can also use more efficient file formats. For example, WebP image files are typically 30% smaller than JPEG and AVIF image files are roughly half the size of JPEGs.
Vector graphics such as SVG can also be much more efficient alternatives to photography on websites. You can optimize your SVG files by stripping out unnecessary layers in the design files and simplifying vector paths. The size of an SVG file can be reduced as much as 97% simply by spending a few minutes cleaning up the design file.
3. Stop autoplaying video
Autoplay videos consume far more data and energy than other content types. New York Times journalist Brian Chen wrote an article about the scourge of autoplay videos on the web, stating that they "demand your attention while burning through your data plan and sucking up your batteries." They waste a user's data plan (and therefore their money), they waste energy, and they slow down web pages. Use video sparingly, and put a play button on it to allow users to opt in.
4. Zero waste fonts
System fonts might not be popular with designers, but they already exist on every user's device so they don't need to be loaded, making them truly zero waste. For example, a travel website might use a system font to deliver an efficient user experience for its users, many of whom may be abroad and using slow, expensive roaming data.
The font-family CSS property provides some generic family names you can use to designate fonts that are already installed on the host system:
serifsans-serifcursivesystem-ui
If you do use web fonts, the easiest place to look for waste is to identify characters in the font file that your website doesn't use. For example, some fonts supply thousands of characters, yet the English language only needs about one hundred. There are a number of font subsetting tools available online that can take any font file and strip out characters not used in your target languages.
When selecting the font to use, a browser doesn't stop at the first font in your CSS list. Font selection is actually done for each character on the webpage under the assumption that when one font lacks a specific glyph, another font in your list might provide it. If you know you need a font for a set of special characters, add that font only after you've set the main font choice to a system font.
Just like images, you can save more data by using efficient file formats. WOFF2 font files can be about 30% smaller than WOFF files, and as much as 75% smaller than TTF files.
5. Find the waste in your code
The tool CSSstats.com allows you to visualize what is actually in your CSS files and see how often you duplicate the same styles. Seeing this waste can help you clean it up, and implementing a modular design language with repeatable styles can help you maintain clean, efficient CSS over the long term.
When choosing libraries, frameworks or tracking scripts, you should ask yourself whether they're really necessary, and whether smaller alternatives are available. For example, jQuery might only be 30kb, but it's possible to build an entire web page in less than 30kb. If you can avoid adding it, you should. Likewise, the basic Google Analytics tracking script is 17kb but an alternative like the open source Plausible analytics is less than 1kb and is designed to respect people's privacy.
Some programming languages are also more wasteful than others in terms of the energy efficiency with which they can perform tasks. JavaScript is seven times more energy efficient than PHP. You should keep this in mind when deciding what new languages to learn and what technologies to specify for future projects.
Reducing waste on the web is good for everyone
It's true that eliminating waste in our web projects requires a bit of extra attention to detail, but when you do so you can create web experiences that are not only better for the environment, but deliver faster, more accessible user experiences too. Who doesn't want that?
So perhaps you should ask yourself this question from Urban Ore: "If you're not for zero waste, how much waste are you for?"
1 Comment