Serving Green

Last Fall, a consortium of three firms launched a new website called Serving.Green that hopes to demonstrate, in accessible and user-friendly terms, the importance of green data centers to our global and connected economies and the role that websites and applications play in warming our climate. Our goals were as follows:

• To educate the public about the need for hosting websites and applications efficiently with renewable energy
• To provide a user-friendly, memorable, and straightforward way for visitors to understand the issues around a sustainable web
• To offer a small and useful set of resources that can be easily and readily updated
• To create a beautiful and engaging web experience on a modest page size budget

This presentation will discuss the overall strategy of the website and the technical approach we used to make a lean, immersive and more sustainable website.

Transcript

Hi everybody. As Jen said, my name is Andrew Boardman. It’s really an honor to be here and have an opportunity to speak with everybody today. I’ll tell you a little bit about a project that we’ve been developing over the past few months. As you can see, the project is called Serving.Green. It’s both an educational tool and a web-based model for designing and developing rich websites. Our hope is that today will tie in nicely to some of the other conversations that we’re going to have today about sustainable design practices and the need to rethink our carbon lives in the digital space.

The website we’ll discuss, Serving.Green, represents our attempt at jumpstarting multiple conversations about serving a green digital product. This talk is brokek ndown into two parts. First, provide an overview of the project and discuss why we need to take a very different approach to building the web. Then my colleague Dan Lamb, who is sitting next to me, will discuss some of the technologies and approaches used in building and serving this website.

First, to give you a little bit of background about us. As Jen mentioned, I run a company called Manoverboard. I should mention that our primary goal is to help conscious companies advance their mission, deliver new ideas, and connect meaningfully with their audiences. We’re also a certified B Corporation. As many of you might know, it’s a new type of company that uses business to help solve some of the world’s most challenging social and environmental issues. Part of our work as a B Corp and a business focused on sustainability is to advocate for forward-looking design and technology practices. Which brings us to the topic today. I want to encourage everyone to look into B Corps or become affiliated with B Corps if you can. It’s a great movement. These are just a few of clients with whom we work. You can see many of them are in the impact investment space, which I think is really changing the way we think about environment and sustainability.

OK. Greening the web. When I broach the subject to most people, it sounds very strange. After all, isn’t the web already green? We’re not cutting down trees to print brochures, or using messy ink and magazines to communicate our ideas. How much energy could the web actually use? That’s what people say. The reality is that the web is in no way green. The vast majority—about 3/4, the last time I looked—of the internet continues to be powered by fossil fuels. As the internet grows, we’re using more and more non-renewable energy to power it. Every time we click a link, upload a file, or watch a video online, we make use of these huge data centers that are mostly powered by dirty energy. According to one source, the internet will soon amount to 1 billion tons of carbon dioxide annually, or approximately 10% of global electricity usage. All of that data coming up and down the pipes could both be massively reduced and powered by renewable energy if we desire. As builders of the web, we have a choice. We can either build green sites and applications or we can choose to ignore it.

There are many challenges around greening the web, but really two key ones. First, we need to start building more efficient websites, applications, and tools that use less energy. It’s clear that websites have gotten much larger, and unnecessarily so. The average webpage—including video, images, code, and copy—amounts to nearly 2.5 megabytes in size. That’s about 20 times the size of a page in 2003, when pages were built to be light and quick because bandwidth was also tight. If you think of your website as a bicycle, you might not need the super tricked out lowrider you see on the right. you probably just need something awesome that’s on two wheels, which you see on the left.

The second main challenge is that we need to host those same websites, applications, and tools with renewable energy, or the very nearest equivalent. Many larger data centers are becoming more conscious of their energy consumption, and they’re working on becoming more energy-efficient. Some are even adapting renewable energy, like apple and Google, as you probably know. However, the rate of growth of the web is outpacing data provider’s efficiencies and their green energy commitments. On the left, you can find a refinery that is belching out tremendous amounts of carbon dioxide and other greenhouse gases. On the right is a geothermal plant in Iceland. The stuff coming out of the stacks on the right is just steam. That’s plain H2O. That’s the way we need to go.

But here’s the good news. Greening the internet is without our reach. Everyone concerned with the fate of the planet can help. In September 2016, we launched a webpage project called Serving.Green. It helps explain the numerous challenges of overbuilt websites and fossil-fueled data centers, and to provide some more concrete solutions to a general audience. The site was the result of a series of weekly conversations with Tim Frick of Mightybytes, who will be speaking later today, and John Haugen of Third Partners, which is a sustainability consultancy in New York. Together, we collaborated to create this site called Serving.Green. The concept of serving not only refers to data, serving data, but also to serving visitors and users of our digital products. I see this website as an ongoing educational tool to help us start and continue a conversation about our digital economy and how it can also become part of a green economy.

We had four goals. First, to educate the public about the need for hosting websites and applications efficiently with renewable energy. Second, to provide a user-friendly, memorable, and straightforward way for visitors to understand the issues around the sustainable web. Third, to offer a small and useful set of resources that can be easily and readily updated. Fourth, to provide a model for creating a beautiful and engaging web experience on a modest page size budget. We’re going to touch on each of these. I’m going to talk about the first three and Dan will talk about the fourth, which is the most important, I think.

The first goal, in terms of educating the public. This is key to the success of all sustainability initiatives, especially in an era of what we have of alternative facts and the devaluing of expertise in basic science. To date, the only large organization that has been successful in talking about greening the internet is Greenpeace. All the other organizations that I love and support—and I won’t name them here—are having a tough time connecting the dots between how our digital footprint impacts our carbon footprint.

The second goal, which is creating a user-friendly and memorable platform for site visitors, goes hand-in-hand with education. Putting out a white paper or a plain vanilla website with a bunch of facts in Times New Roman will no longer work in today’s world of video-enhanced reporting and short attention spans. As designers, we need to quickly empower ourselves to tell interesting, accessible stories about our most pressing challenges, in a way that will resonate with and connect with viewers. I really believe this is urgent. Fighting facts with facts is very important, but if we can do it using design and the tools of good UX—which is why we’re all here today—we have a much more powerful vehicle for communicating with the public. As you can see from these screenshots, the Serving.Green website is meant to showcase key statistics and tweetable factoids that the average person who builds the web or uses the web—meaning most everybody here—would find surprising and hopefully will spur them to take some action.

This brings us to the third screenshot, which essentially the goal is to create a useful set of resources that the site visitors can find. How to green their website and how they can approach a digital project with sustainability in mind. We provide five key recommendations for folks on the site, including finding a green host, which is the single most important thing you can do to create a green digital product. The other recommendations are to access and refine your site’s assets, and to talk with your designer, developer, and host about serving things green. Having that conversation is very important.

But here’s the challenge we face, and where I’d love to hear from the community. The stakes of climate change are so high and we need to support a green economy at all costs. We’re definitely thinking about next steps for the site and where it goes in terms of education and advocacy. I’d love to hear your suggestions on how Serving.Green can make a difference.

As I mentioned, the fourth goal for Serving.Green is to create a model for creating lightweight but richly designed sites. I’m going to turn it over to my colleague, Dan, to discuss some of the approaches and technologies he used to build the site and optimize its performance.

Dan Lamb here. I’m the lead developer here at Manoverboard, and I was tasked with trying to make a pretty nice website using a lot of the modern things that people are expecting nowadays, such as high-resolution images, pretty good resolution video, and animation and other effects. As Andrew already mentioned, the average page size of a webpage nowadays is in the ballpark of 2.4 megabytes. Our goal was to definitely come under that, as much as we could, without sacrificing the experience. My talk is going to be focused on making websites more green simply by trying to reduce your file size as much as you can. By reducing your file size as much as you can, you’ll reduce the amount of energy that’s going to need to be consumed to display it. I’m going to be going through seven things that any web designer can do to try to keep their file size down.

Let’s jump into the first one. Images. Images are a big one. In the early days of websites, where everything was just plain text, it was done because we had to. There was no bandwidth. But as soon as we had enough bandwidth to start pumping images through it, that’s what we started doing. As bandwidth gets bigger and bigger and bigger, we start pumping more and more high-resolution images through the pipes. The first way to deal with images and reduce your file size is to limit the number of images that you use. Really strongly consider every asset that you’re putting into your project. This sheet, to the best of my knowledge, is all of the images that are used on our page.

Next up is the idea of resolution. Oftentimes, if the image you’re using isn’t super highly detailed, you can reduce the JPG quality quite a lot without actually sacrificing the experience. On that note, especially if you’re tinting the layer back with a dark overlay or some sort of color, the darker or more opaque that overlay is, the less resolution you probably need. Sorry, I think I was talking about JPG quality on the last slide. But JPG quality, again, is a big thing. Depending on how big an image is going to be displayed, or how much you’re going to obscure it in other ways, you should really try to bring those quality sliders down as much as you can before you start to feel bad about yourself putting it on your project.

Another big way to deal with images is to detect the size necessary based on the browser window or the device that’s accessing your website. Just send them an image that’s appropriate for that device. For instance, nowadays, 4K televisions are all the rage. Some people are actually viewing websites on them. But there’s no reason to serve a 4K resolution image to somebody’s iPhone. Retina displays are not that good yet.

Moving on from images, the next one is videos. Videos on webpages are a little more recent than images, of course. But you see them everywhere nowadays. In order to reduce the file size of your videos, you pretty much have all of the same things as images, plus time. On our page, we used this awesome video of steam billowing out of a geothermal energy plant in Iceland. You’ll see the video quite a lot through the project. Based on the level of detail that’s in this video, similar to images, we decided that for our needs, using 720p resolution was enough, even when viewed on a full HD 24″ monitor. We said that was good enough, so that’s what we went with.

The new thing with video that you don’t have to worry about with images is time. The stock that we’re using when we originally purchased it was… it escapes me, it was between either 30 seconds or 60 seconds. But as you can imagine, if the camera in the shot is not moving, and it’s not, why not just set up a seamless loop for the video? So I was able to set up a pretty darn good loop that you don’t notice looping, using only four seconds. That was a pretty drastic reduction in file size without losing any of the effect.

One of the more interesting ones we discovered while working on this project was the positive impact we could make by using HTML5’s video tag. Originally, we were trying to host our video on YouTube so we could offload the serving of that asset to a fairly green source. But once we actually got it in place and had the embed running, we found that it was costing us over a megabyte in scripts required just to play the video. By skipping that and just using the video tag, we were able to save quite a bit. The scripts were actually significantly longer than the video itself was. Not acceptable to us.

Next, the idea of reusing. As you saw in an earlier slide, we have just the four beautiful images and one video. But we actually reused the video on and off throughout the length of the project. We do that by filtering the video with CSS or other techniques. The first version you see if a full-color version of the video. That’s how we saved out the file and uploaded it to our servers. Next, we use CSS3 to grayscale the video in some cases. Lastly, we put a semi-transparent overlay on top of the video to make it look like we also had a green version. We only had the one asset, but because of the ways that we filtered it, we were able to reuse it and make it feel like something new as you scroll through the page.

The next topic is fonts. We bfonts are so common nowadays. I would say you’re probably hard pressed to find a site where someone isn’t using at least one web font somewhere. But, like anything else, if you use too much of them, you’re going to be costing yourself more bandwidth required. For this project, we decided to use one font family in these four weights. It still shows up as an intermediate load time in Google web fonts interface. But the point here is not always to produce a microscopically tiny website. The goal, in every case, you’re just trying to make it as small as you can given the needs and constraints of your project.

The next topic is text masking. On this website, we’re trying to do something pretty fancy, where we use text as a cookie cutter and allow other assets, such as the images or the videos, to show through the text. We started off by going down a fairly deep rabbit hole full of some advanced techniques using SVG and canvas. In the end, they were either too complicated or there was too much going on the scripts to get them to work. We decided to go super low tech and use a really, really big image with PNG transparency. As you probably know, using the fancy PNGs that offer you antialiased transparency, there’s usually a pretty big file size cost. In our case, since the giant images that we’re using are a single color with transparency, the file size is still quite small. We found it was very acceptable. We’re using huge images with text cut out, with considerations made for the different aspect ratios of devices that would be viewing it, then stacking it on top of other assets.

Next, this is a really, really big one. No matter how small you get your file size down on your websites, it’s not going to matter if the people you’re hosting it with are burning fossil fuels anyways. This particular website is powered by possibly that very same geothermal power station that we feature so much through our website. We’re hosting the site in Iceland. The host that we’re using, and also, if I’m not mistaken, all, or the majority of the country of Iceland, is powered by geothermal and hydroelectric power. Really taking the time to investigate the host that you’re using and seeing what powers them is a really, really awesome way to reduce the environmental impact of your websites and applications.

The last one is a little bonus: the idea of using hosted libraries. These are just a couple of examples of folks who are taking script libraries that a lot of us designers are using over and over and over again. By allowing a hosted library to host some of your resources, the benefit there is that anyone who has already used the same hosted library to download a particular script, such as Angular or jQuery, they’ll be able to skip downloading it again and use the version that’s sitting in their browser cache.

That pretty much wraps up my talk for what we did with Serving.Green. If you haven’t yet heard of it or had a chance to look at it, this is actually the URL. We’re running on the new-ish .green top-level domain. If you type in Serving.Green into your web browser, it will take you right there.

Thanks everybody for listening. If you want a little bit more information, Dan’s written a blog post at our website, manoverboard.com. Please feel free to reach out to us at any time. Here’s our contact info. It’s been a pleasure. Thanks.

Links

Serving.Green
Serving Green: The Mechanics of Creating a Sustainable Website

Biography

Andrew Boardman is the founder of Manoverboard, a purpose-driven design studio that provides digital platforms, communications strategies, and visual identities to socially responsible businesses, educational institutions, and large nonprofit organizations. Manoverboard is a Certified B Corp based in Winnipeg, Canada and is the first B Corp in the province. Clients have included Generation Investment Management, Global Alliance for Children, SJF Ventures, Renewal Funds, Acumen Fund, Encourage Capital, EQ3, Council of Canadians with Disabilities, Maestral International, and the International Institute for Sustainable Development.