Online spaces and the tools we all use to access them — including mobile phones, digital devices, networks and televisions — account for more than 4 percent of global emissions. By some predictions, the electricity used by information and communications technology could exceed 20 percent of all global energy in less than 15 years. While we won’t be able to shake our reliance on technology, there are some low-hanging fruit: for example, heavily-trafficked platforms like the New York Times aren’t even using “green hosting.”

The Website Carbon Calculator, an application used to quantify the carbon footprint a web page may have

Right now, we’re seeing even greater energy consumption from the internet during this crisis. At the time of writing, major internet players have scaled back streaming video quality and download speeds due to the ongoing COVID-19 pandemic. 

As the internet’s energy consumption continues to grow, we have an opportunity to make small changes that can lead to big improvements. Steps like simplifying your code and designing pages that load quickly reduce energy consumption. But how can you do this without compromising on your organization’s website needs? 

What designers can do

From a design standpoint, the most important thing is to meet the users where they are and make information as clear and straightforward as possible. When building a digital experience that may attract loads of traffic in the future, it’s important to use design thinking to help create solutions that provide necessary information, delight the audience, and don’t bog users down with content they don’t need.

Plus, lightweight experiences can actually be more effective. The average amount of time a user takes to decide whether or not they want to interact or pay attention to something is two seconds (anything over this is where bounce-rates start to escalate). If the first couple of seconds on a webpage are spent waiting for a clunky animation or video to load, chances are, you’re going to lose that visitor all together. 

It’s also worth noting that organizations’ target demographic is very rarely the person with a high-speed connection sitting at a desktop computer. They’re people in varying environments, different living situations  — they’re diverse. So when we’re creating a more uniform experience, we’re not leaving anyone out or reducing them to “edge case”. By making these online experiences more accessible, they become available on devices and connections both weak and strong, creating a lighter and more environmentally-friendly experience. 

That being said, responsible environmentally conscious design doesn’t have to be boring! While features like embedded video can make a homepage feel flashy, something like a lightweight typographic animation can also bring your brand to life. 
It’s the job of the designer to think about the best possible solution that will be the most accessible across audiences, and it’s important to consider all users who may use the site or product. 

At Blue State, we’ve been having conversations around how we can incorporate these methods into our own processes. As we navigate future projects, we’re committed to prioritizing sustainability and are looking forward to diving deeper into best practices for carbon-reduction through design.

What developers can do

From a technological standpoint, lightweight websites also help us maintain code simplicity, reduce load times, and foster accessibility. Our own Tech team wrestled with these issues when redesigning our own site. To minimize the amount of extra code used in developing the site, we avoided major Javascript frameworks and custom-wrote all of our Javascript, allowing high functionality with low page weight. 

Now, more than ever, we all have to take actionable and intentional steps to minimize our carbon footprint and do what we can to create a greener, more sustainable Earth.

The team also focused on writing semantic, accessible HTML which has the advantage of being lightweight. The methods our team used to decrease load time also help reduce energy consumed in rendering a page.  This includes methods like loading assets progressively, employing content delivery networks and caching content that doesn’t often change, “minifying” code, and both optimizing images and choosing the best image format for the context.  All of these combined techniques ensured that the pages of our site would load quickly and easily on all devices over connections both weak and strong. 

The decisions we made while designing and building the new Blue State site allowed us to create a website that tells the story of who we are in a compelling way, while minimizing the amount of bandwidth and computing power the site needs to run. If we can continue incorporating these best practices in our own work as well as the work of our clients, we have the opportunity to drive real change. 

We hope to see an eventual shift throughout the industry to focus on sustainability more holistically when it comes to creating things online. Now, more than ever, we all have to take actionable and intentional steps to minimize our carbon footprint and do what we can to create a greener, more sustainable Earth.

Want to learn more about how we’re making our website design sustainable, or have your own experiences you want to share? Get in touch with us.

Get in touch with us

Is your program pivoting? We’re working with leading brands and nonprofits on how to respond to this pandemic — sign up for a consultation with our experts.