On Tom Greenwood’s Sustainable Web Design

On the Postlight design team, we have both a Slack channel and virtual social club called the Design Media Club, which has been a great avenue for discussing topics in the field. We’ve talked about everything from how to best collaborate with different types of PMs to “design thinking” and its roots in whiteness — topics spurred by various articles, podcasts, and books. We read one book in particular this year that was really fascinating to me: Sustainable Web Design, by Tom Greenwood.

Before the topic was introduced to me, I had never considered what designing for digital meant for the environment. All the data is floating through the air, right? How could it have harsh impacts on Mama Earth? Well, I was in for a surprise (or partly so). If you’re new to the topic, like me, I recommend reading Greenwood’s book. But, to help get you started, here are five passages that grabbed my interest and provoked me to dig in a little deeper.

1. The Sustainable Web Manifesto

As I’ve learned more about each principle, I’ve come to realize that some are much easier to follow than others. The easiest to start with are “efficiency,” “resiliency,” and “openness.” These three, once you understand the design and development practices to see them out, make for good, quality digital products that should easily align with your existing product goals. Efficient sites lead to better UX for all and create better accessibility in locations with less electricity or internet bandwidth. Allowing users to control their data and creating open source projects builds trust with users and the larger tech community, which is good for your product’s reach and company culture. Creating a resilient site should align with how you define your MVP. Can all users, regardless of location, context, and environment, perform the tasks that are needed from your site?

Honesty

“Honesty” requires product owners or decision makers to hold more intentional conversations around sustainability goals for digital products. For example, don’t say you built a “green” website when you’re using a server that is damaging the environment because of its physical location, the materials were mined to create the hardware, and water is needed to keep it from overheating. If you went so far as to find a solar-powered hosting provider, honesty also means educating users on what the hosting provider is and how the site performance might be impacted due to weather. This can be pretty difficult to achieve in an agency setting. It requires getting your client to see the value in honest messaging and to invest from the beginning in the design and development process. In my opinion, having some form of honest messaging on all sites would bring us closer to remembering the part that nature plays in the grand scheme of technology and raise awareness to the physical cost of digital design.

Clean and regenerative

“Clean and regenerative” go beyond the design of your site, as these get to the root of our energy sources. A clean site would consider the energy grid — not just the business’s energy supplier but also the electricity source of the tools and libraries the business uses to build the product. You may opt for renewable energy sources for your office building, but that will be just one small piece of the puzzle. Regenerative takes it to a new level. Is the site giving back to the world in both an environmental and social way? Many people in design will make the argument that they are solving “real user problems,” but when you zoom out, what is the actual impact?

2. Designing for minimalism and efficiency

After reading this chapter, my colleague and I put together a workshop to challenge whether we could design with efficiency top of mind by redesigning past client projects, specifically visual design. A lot of the recommended design decisions that would reduce the size of the sites (and ultimately improve the site efficiency) could be a hard sell to our clients — things like reducing imagery and video and using system fonts (or at least no subscription-based fonts). One of our design directors mentioned that he found the exercise enlightening, because often when it comes to visual design, we go back and forth on minute details and debate over graphic decisions that can even be subjective. Making visual design decisions rooted in sustainability gives us another tool in our tool belt. We can argue for the best design choices with concrete reasoning that will ultimately lead to a better-performing site for our client.

This passage also helped me realize how I can think of digital sustainability in the same way as physical sustainability. I already make decisions in my daily life to live more environmentally friendly and reduce the amount of waste I create. Now that I know how, it shouldn’t be as hard to do that in my work, too.

3. Reducing data travel and requests

For those who don’t know, CDNs (content delivery networks) are a distributed group of servers that websites utilize to reduce the distance data travels between the server and its end users. This was a new concept to me when reading this book, and I assumed that this was a rare practice because it was being recommended and pushed pretty heavily in the book. But when the Design Media Club held a convo with some of our more senior engineers to learn more about the engineering side of building energy-efficient sites, I learned it’s actually a very common and necessary practice. One engineer even explained that without them, platforms like Netflix wouldn’t even be possible because of the file sizes and data requests required for streaming services.

It seems to me that the most efficient and impactful way to reduce the amount of energy your site uses at the largest scale would be to go to the source (the server, tools, and CDNs that you use to run your site), as opposed to focusing on smaller tasks like reducing image sizes or minimizing font files for the same reason that people say that banning plastic straws was/is pointless. But there also seems to be an opinion that we can’t really control those sources (and in an agency that is probably true). My guess, based on some of these engineering conversations as well as this passage, is that most people just aren’t even asking the question. With cloud hosting servers like AWS becoming the norm in development, we may be ignoring the green options out there in the name of “best practices” or convenience. Recently, the Postlight team working with Probable Futures switched the AWS region from US-East-1 to US-West-2, which, although still in the Amazon ecosystem, is powered mostly by renewable energy and purchases credits to offset any nonrenewables, unlike US-East-1 which is mostly powered by coal. If the team hadn’t asked the question, it wouldn’t have happened.

4. Use less client-side JavaScript

If “to design” as a verb is “to decide upon the look and function of,” then this book holds true in being named Sustainable Web Design yet it focuses 50% on the development practices. In a way, the function of the code itself must be planned and designed to be most efficient. Yes, there are multiple ways to develop the site for the same visual and functional outcome from a user perspective, but that doesn’t mean it will be the most sustainable. The same restraint, intentionality, and minimalism that we use in the visual design and UX can be used in the implementation. 

The question of front-end frameworks came up in recent work at Postlight as well. Our MTA Away mini site has no client-side JavaScript framework and uses very little JavaScript overall in the browser. This reduces the amount of data being sent over the network and the processing required in each user’s browser, thereby reducing electricity usage. It’s also worth noting that the carbon footprint of client-side JavaScript is impacted by the energy source powering the server that delivers the JavaScript as well as the energy source powering the user’s browser where the JavaScript is executed (again, remember the holistic energy grid of your site). The principal engineer on MTA Away had to work within the constraints of the client’s tech stack, but was determined to deliver static HTML to users in the spirit of simplicity. Funnily enough, his intention wasn’t even to be more “sustainable,” but it achieved the same goal. The more I’ve talked to engineers, the more I realize that efficiency is already built into their work. But designers can start to be a part of those conversations in a way that is more holistic and impactful to the site’s overall efficiency.

5. Benchmark, test, and collaborate with engineers 

If there is one thing I learned (or was reminded of) from Greenwood’s book, it’s that a designer is nothing without an engineer. Many more questions than answers came out of this reading, and one of the questions had to do with trade-offs: How do you know if one design or development decision is more efficient than another? Greenwood explains some ways to measure your site, but what I immediately pictured was me sitting next to an engineer (or being on a Google Meet call, and yes, I prefer it to Zoom) and testing things out together: I would prescribe a couple design options that I’d thought through ahead of time, and the engineer would quickly prototype it to see the output and weigh the options. 

Just the other day, I used the Website Carbon Calculator to measure a site, which, based on everything I knew about the design and general tech stack, should have been pretty efficient. But sure enough, I learned that it was “61% dirtier” than the other websites measured to date. My next step was to sit down with an engineer to figure out the cause of it, implement solutions, continue to check the carbon number, and see how it increased or decreased. Without that kind of close collaboration and quick turnaround, I can’t realistically see the average product team taking the time to verify that their implementation is “efficient enough,” and then sustainability quickly becomes deprioritized.

Moving forward, I’m hoping to continue conversations on how we can apply some of these practices and learnings to our day-to-day at Postlight, starting with: How do the sites we build measure up? And how can one project team learn from another? Hopefully, I’ll be able to report back on this soon. But in the meantime, check out the book, and if you have any questions, thoughts, or alternative opinions, feel free to email me!

Grace Sunnell (she/her) is a Lead Product Designer at Postlight. Looking to bring your digital product to life? Get in touch.

Work for Postlight! Love making exceptional digital products? We’re hiring engineers, PMs, designers, and strategists. Let’s grow together. See openings.