In Part One of my series on digital sustainability, I wrote about my journey to realising the big role digital plays in the emerging climate crisis, and why it’s important to view our digital environmental footprint in the same way we do our physical footprint. But a mindshift change is only the beginning. As digital designers and product owners, we possess the tools and the playground to build a much greener and inclusive digital world. In Part One, I touched upon using imagery scarcely and with purpose. In Part Two, I will write about the importance of conscious interactivity, tidy code, and device longevity.
How Interactivity & Motion Impact the Environment
One way to understand how digital interaction impacts the environment is to consider how much content users consume online. In his book “Sustainable Web Design”, Tom Greenwood states “With the average web page weighing in at nearly 2 MB, every page load consumes a lot of data, and with it, a significant amount of electricity.” So, the more web pages someone visits, the higher the environmental impact.
The good news is that a significant focus of our roles as product creators is to get our users where they need to be quickly and efficiently through a solid information structure and a clear UI. In addition to thinking about the most simple path for users – which should require fewer web pages – we should also think about maintenance. If we get into the habit of “spring cleaning” our websites and removing outdated content, it would not only decrease the load on data centres and reduce the use of electricity for our users, but it would also create a leaner user experience and better brand perception. And if we do it right, it would result in low bounce rates, happy users, and a positive impact on the environment. So, it’s a win-win!
Now, let’s drill down into the page level. All interactive elements on a page contribute to page load, such as carousels, share buttons, embedded maps, video, and all of the engaging interactive techniques modern websites use (for example, in this Gift Giving Campaign by Gucci). As with imagery, these should be used sparingly and for the purpose of enhancing the user experience and driving a business outcome.
One of the most mind-blowing statistics in McGovern’s book is this: “The music video for ‘Despacito’ set an Internet record in April 2018 when it became the first video to hit five billion views on YouTube. Scientist Rabih Bashroush calculated that ‘Despacito’ consumed as much electricity as Chad, Guinea-Bissau, Somalia, Sierra Leone and the Central African Republic would use in a year.”
Crazy, right? Cisco’s estimates that by the end of 2021, total internet video traffic will reach 80% of all internet traffic with 56.3% of that in high definition (HD). Of course, we can’t just stop consuming video, using it in our products, or producing it. Video is an important part of many people’s lives; for example, life in the pandemic feels a lot less claustrophobic thanks to the vicarious adventures available on Netflix. However, as always, it’s about making conscious choices, having awareness of the physical costs of video, and thinking about whether it’s the best solution to a business or user problem.
Greenwood shares a great case study to demonstrate the impact of making conscious decisions as a digital creator. His agency was working on a project for a renewable heating supplier who wanted an animated explainer video on heat pumps. Instead of going straight for the good old MP4, Greenwood and his team decided to create an interactive web animation. Not only did they save 94% in file size and improve accessibility, users were also able to take the driver seat and explore the experience at their own pace. However, if video is the best choice for your project, it’s important to optimise, optimise, and optimise some more to reduce the file size and also avoid autoplay, which is bad for accessibility and drains more data.
Another sneaky culprit for high data usage is ad-driven websites, which include many third-party scripts to show ads and track its users’ browsing behaviors. This article from The New York Times argues that more than half of data used by mobile news websites comes from ads and content filtered by ad blockers. My quest to find statistics on how many ads are viewed daily led me to another article from The New York Times from 2007, which estimated that city dwellers are exposed to a daily average of 5,000 ad messages across digital and physical mediums. I can’t even begin to imagine how many more ads we see today, in the midst of a pandemic and a boom in digital usage. I also wonder what that does to our attention spans, wallets, and the environment. We all know that ads are here to stay, and sometimes are key means to keep a business afloat. However, as with everything, they should be used with measure. A healthier alternative to so many ads is a subscription-based model, which a lot of businesses are embracing.
The Importance of Tidy Code
Before the developers reading this article add me to their bad list, I have a confession to make. While I do have some basic coding skills, I’m not a developer. Luckily, at Whitespectre, I’m surrounded by talented developers who offered their expertise on how to achieve tidy code. Here’s what they shared:
“In my article 12 Core Principles for Premium Quality UX Design, there are three principles that relate to digital sustainability that can be applied not just to UX but to code as well: Consistency, Reusability and Performance. These principles are essential to keep your code clean and tidy. If you want to dig deeper into Performance specifically, I suggest you to read the Front-End Performance Checklist 2021 by Smashing Magazine to learn all the nuts and bolts.”
Ivan Pla (Whitespectre UX Designer)
“DRY – Don’t Repeat Yourself. Reuse existing code for the same functionality across a system. It helps save time for developers because we don’t need to reinvent the wheel. It also helps testers because they already confirmed that the original “wheel” works. And maybe most importantly, it helps the end user, because they need to download the “wheel” only once, and when they encounter it they are already familiar with it!”
Rafal Baron (Whitespectre Ruby on Rails Developer)
“Although code sometimes needs to be verbose to make it easy to understand for developers, we use several tools to reduce the served code to lessen bandwidth and improve performance. Minification is a must for JS, CSS and HTML; and when using libraries, tree shaking helps us add only what we use to the build, instead of the whole library.”
Daniel Albornoz (Whitespectre Frontend Developer)
For more information on green web development, energy efficient languages, optimising font files and JAMstack, and much more, I highly recommend “Sustainable Web Design” by Tom Greenwood.