Start Your Journey In Creating Sustainable Web Designs

Claire Thornewill at UXDX Community: Ireland & UK. Video: https://youtu.be/_lMX1S9wZFc

Readable transcript: edited from the recording's captions for readability (fillers and false starts removed, punctuation and section headings added). Wording is the speaker's own. Timestamps are positions in the video. Names marked [?] could not be verified against the audio.

The water bottles and the tote bags

[00:00:00] Recently I got appointed a new role at work, which was to order the drinks for the Munich office. And so I looked at the previous list of all the drinks that we had previously ordered, and to my surprise there were water bottles on there, still water bottles, fizzy water bottles. We're in Munich, it has some of the best water in the world that comes straight out of the tap, and additionally we also have filters at the tap that also provide you filtered slightly fizzy and still water, and cold. And so I was really confused by this, and so I asked around why this was the case, and different reasons: Corona, not many people in the office at the moment, the water's sitting in the pipes, it might not be safe. But why do we have filters?

[00:00:50] And eventually I stumbled across one of my colleagues who had said, it doesn't need to be a plastic, and they're recyclable bottles anyway. And this brings the obvious conversation around, should it be a plastic bottle versus a glass bottle? And I have been brought up to think, and I'm sure as many of you have as well, that a glass bottle is actually better for the environment. However, if you actually look at the entire life cycle of a plastic bottle, and I'm talking about a good PET plastic bottle that's recyclable, versus a water bottle that's made of glass, the glass one is worse for the environment, because it's 10 times heavier and so it emits about double as much carbon emissions in its transporting phase. So at the end of the day it's not actually better for the environment.

[00:01:48] Which brings me to the tote bag. Now the tote bag is another one of these situations that I was brought up to believe, that having a tote bag is better for the environment. Yet I have 32 tote bags. And that's the point I'm trying to make, that I'm using my tote bags as if I'm using them as plastic bags. Back in the day everybody had a cupboard full of plastic bags, now I have a cupboard full of tote bags. And yet I read the other day that I need to use one single tote bag 327 times before it offsets its carbon emissions, because a tote bag actually is also again worse for the environment if you have the collection that I have, for example, because of the cost of the material, the weight of the material, the dyeing of the material.

[00:02:41] And so there are so many hidden costs around that that people don't talk about. They just talk about the raw material. And so at the end of the day it's more important to practice sustainable habits than to favor one material over the other. As you see, the tote bag isn't actually better for the environment if I have 32 of them. The glass bottle isn't better for the environment if it's 10 times heavier and costs a lot of carbon emissions for the transport.

The internet's carbon footprint

[00:03:11] Hi, I'm Claire, I'm a web performance consultant, and today I want to talk to you about one of these huge carbon emission costs to the planet that I think a lot of people haven't really thought about, and until recently I hadn't either. I'm someone who is quite passionate about being sustainable, reducing my waste to the planet. I make my own shampoo and conditioner bars. But this one was a real big shocker for me, and that is the internet.

[00:03:40] Now I'm thinking probably many of you have thought the same as me in the past: digital is green, right? You read your news on your app and it's better for the environment because you're not printing it on a newspaper which is physical paper, less trees are being cut down, and it's just there, it's free, right? Wrong. The issue with the internet and everything digital is that it might not be using resources like paper, but it is using one huge resource, and that is electricity. And unfortunately the internet is almost entirely run on electricity, and 80% of that is actually produced by fossil fuels. And that to me is quite shocking.

[00:04:32] And I fairly recently learned this all myself, which is why I want to share this with you today, because I am passionate about the environment and yet I produce a lot of carbon emissions myself just by being on the internet. The internet itself produces about 1.6 billion tons of greenhouse gas emissions annually. So if you consider there are about four billion internet users, so you and myself alike, that basically comes to about 415 kilograms of carbon emissions every single year. Now if you consider a standard tree can absorb about 21 kilograms of carbon emissions, we're looking at, for each of us, we should be planting 20 trees a year to offset our carbon emissions of using the internet.

[00:05:28] These 1.6 billion carbon emission tons basically amount to 3.7% of global greenhouse emissions, which in 2025 is actually projected to double. And I'm sure it's doubled last year, considering how many of us have spent a lot more time on Netflix. And the shocking thing that I learned as well is that when you take the internet itself but then you add all the carbon emissions that are produced through manufacturing our devices, and include that together, it's actually the third most polluting country in the world, after the US and China.

[00:06:11] Just to break it down a little bit for you: emails alone have huge amounts of carbon emissions. A basic business user has about 136 kilograms of carbon emissions every year just from using email. Which means, at the end of the day, if we all just send one fewer thank you email a day — and I'm fairly sure that many people in Britain send many thank you notes a day — we would actually be saving 16,433 tons, which amounts to 3,334 diesel cars, taking them off the road. Now I know this is a lot of numbers and I know it can sound confusing, but what I want to do here is just reiterate how bad the internet can be for the environment.

The issue is behavior

[00:07:04] The issue is behavior. Same as for glass bottles and plastic bottles, or tote bags. It's really about your behavior. So at the end of the day an email is actually one sixtieth of the footprint of a letter. So it feels like we're actually being better for the environment, because we're not actually going to send a physical piece of paper, wrap it up in an envelope and put a stamp on it and send it off. But the issue is that we also use it about 60 times more, the emails.

[00:07:39] And this is the problem. When was the last time you went to the post and sent a letter that had two words in it, thank you? When did you take a physical letter to the post office, put a stamp on it, and all it said was thank you? I don't think I've ever done that in my life. And this is just again an example of how your behavior makes a difference, and when you're actually taking a low carbon technology such as email and then you're actually resulting in higher carbon, because we just use it 10 times more, or in this case 60 times more. And it's a very similar example to my tote bag. I have 32 tote bags, but one would actually be sufficient, and one would be good for the environment. So again, it's not what you are consuming, it's really about how you consume it.

Sustainable web design, and where to start

[00:08:32] And that's why I want to talk to you about sustainable web design, and that it's an approach to designing web services that prioritize the health of our planet. I think up until now, user experience design has been a huge topic, and it still is and it still should be, but I want to also talk to you about how we can be mindful, because at the end of the day sustainable also means good UX, and it also means that it's performant. So I also want to give advice to the teams and the different individuals working in teams, and what we can all do to be better and more sustainable in the way that we design, in the way that we build, and in the way that we are producing different types of services and products.

[00:09:21] So the big question is, where do I even start? The biggest step that you can do is always figure out what the status quo is. So measure. And there are some really cool tools out there where you can either measure the carbon emission of your website, or you can also measure how fast your website is. Because this is my job, I am a web performance consultant, I look at websites to try and make them faster, but at the end of the day when you're making a website faster you're also doing good for the environment.

[00:09:52] And I took the liberty of measuring amazon.com on one of these websites. It's quite a cool website, it kind of shows you in a fun way what it actually means, and it looks into how many carbon emissions it's actually producing. This is Amazon, it doesn't do particularly well. You kind of hoped that it would, considering all the other carbon emissions that they produce. But at the end of the day this is a really good place where you can take a look at your own website, and you might be in a good place and you might not be. But once you figure out where you are in the status quo of your website, you know, okay, action needs to be taken.

Define a purpose and a budget

[00:10:36] So what I want to say is that the whole team should get together after you've measured, after you've looked at your website and said, okay, maybe we're not in the right place, and really sit down with your team and define a purpose. And I really mean a specific purpose. I think there's a lot of talk at the moment about purpose-driven design and all these things, and I think that's super important. It's really, really important to figure out what matters for you and what matters for your users, and get rid of the clutter.

[00:11:13] Which brings me to less is more. Because the faster your users can fulfill their goal, the less clutter there is, the less cognitive load there is, the less energy will be spent. And I don't mean human energy, I actually mean also electricity in that sense as well. So you're saving your users energy and you're saving the energy from the planet.

[00:11:35] And then define a budget. Now this is something that I really like. It's called a performance budget, and what it means is — this is an example of it, you can go on this website and do it yourself, it's quite fun as well — what it means is you can put in a target of how much you want your web page to weigh in kilobytes, and then you can figure out where to offset. So many people like to use JavaScript because we all like animations and it makes things cool and fun, but they're also bad for your web performance. So what you can say is, okay, I want to bring up the JavaScript, but that means that you have to then reduce, for example, the images or your web fonts or your CSS. So this is where you sit together as a team, designers, I would hope marketers as well, and developers, and you decide how heavy your page should be.

For designers: JEDI, assets, fonts and dark mode

[00:12:40] Which brings me to designers. So one of the things that I genuinely, anyway, believe we should all be designing for are the JEDI practices: justice, equity, diversity and inclusion. And what this actually means is just shifting our perspective to design for the least privileged users. So we actually built a tool at Netcentric called ProgUX, progressive UX, and what it does is you can actually simulate people's network usage, whether they have a good connection, whether they don't want to have their tracking on, and all these different things where we can then turn off all these settings, which means that we are designing for the least privileged users. And if you're designing for these, then everyone has the possibility to have the best user experience possible.

[00:13:32] And very often that could mean you have to reduce your assets, or just use them way more efficiently. And that comes also back to the whole purpose discussion of, do you really need to be cluttering your website or your apps or your web apps with assets? Do you really need to have pictures here? Do you really need to have a video here? What are you really, really achieving with this video?

[00:14:00] And that brings me to custom fonts. Now I know custom fonts is sometimes not something you can discuss, because that is part of your brand, but again I think it's something that designers and brand designers should even consider, particularly if your product is solely online. Do you really need to be designing a whole brand new font? Because at the end of the day this also takes way longer to load, if you have these fancy fonts that you have to load at the beginning. Instead just try using system fonts that are already on devices. I mean, at the end of the day I'm also using Arial here. It's not my favorite font, because I have a design background, but I gave in.

[00:14:43] Which brings me to dark mode. You may have noticed that my presentation is also fairly dark and also doesn't have many pictures, and that's intentional, because I can't be preaching to you guys to be more sustainable about your design if I'm not doing it myself. And dark mode is one of those that may not have a huge impact, but at the end of the day your screen is made up of lots of little lights, and lots of little lights need energy. So the darker those lights are, the less energy they use.

For content and marketers

[00:15:14] Which brings me to content and marketers. Again, it all very much hangs together, which is why I believe it's something that you have to sit down and agree on as a team. But I think reducing heavy content is also super important. So really being mindful about what content you're putting out there. Do you need to have an image here? Because I know there's sometimes a discussion between designers and marketers about what needs to be where and why, and I think if you both start asking why, and does it really have a purpose here, and is this really achieving what we wanted to say, or can we just remove it, I think it's a conversation to be had.

[00:15:53] One of the things I think is also important is give it an expiry date. Because there is so much data on the internet, and about 90% of this data isn't actually even being processed or used, because people are just dumping stuff and leaving it there. But for it to be left there, it also needs to sit somewhere, and it needs to sit in data centers, so it's still using energy. And so if you have an item that has a time limit on it, take it off the internet when you're done. Put an expiry date and then take it off.

[00:16:32] And then finally, for content and marketers, make it actionable. I know this seems like a very typical UX thing to say, but honestly the faster your user can decide on what path to take, the better. So the more actionable you make all your content, the faster your user will go through the path you've defined for them, which means the less time they will be spending on it, which also means less energy spent on it from their perspective, as well as of course the electricity.

For developers: tech stack, JavaScript and green hosting

[00:17:08] And for developers: update your tech stack as often as you can, and constantly, because technology is evolving constantly, it's getting more advanced, it's getting more efficient. So if you're stuck with a whole bunch of legacy code and legacy tech stack, then you're slowing down, because everything else is getting faster around you but you're not able to catch up. But being slow also means that you're using electricity, which also means carbon emissions.

[00:17:41] Which takes me to reducing JavaScript. A colleague of mine went to a conference fairly recently and found out there are about 80 petabytes of legacy JavaScript that are being put out there monthly. That's a huge amount of carbon emissions of something that doesn't even need to be there. So really just try and reduce the legacy JavaScript that you have, but also try and reduce the JavaScript that you're using in order to create and code different items and animations and such.

[00:18:16] And then finally, switch to a greener host. The internet is here to stay, or you hope so. And again, it's not really what you're using, it's really about how you're using it. And like I mentioned earlier, 80% of the energy that is produced for the internet is by fossil fuels. So if we all make the effort to switch to greener hosts who use green energy for their data centers and their cooling systems for their data centers, that's at least one huge step in the right direction.

Summary: it's how you consume it

[00:18:57] Now here's my summary of the impact all these different things can make. One of the huge ones is just reducing your media files, and that applies to designers, that applies to content managers and marketers. And then reducing the legacy JavaScript. That's a huge win, if you can remove all your legacy JavaScript, that's great. Optimizing your hosting, updating your stack regularly and removing all content online comes next in terms of impact, and then optimizing your assets and fonts, as well as the JEDI principles, the justice, equity, diversity and inclusion. And then finally dark mode. Not a huge difference, it's not everyone's jam to have dark presentations or dark mode, anything that you have, service or whatever, but at the end of the day it still makes a little bit of a difference.

[00:19:47] Which brings me again to, it's not what you're consuming, it really isn't. Like I said, the internet is here to stay, so let's just use it wisely. So it's about how you're consuming it. It's about me and my tote bags, and reducing my tote bags, and maybe not throwing them away but maybe turning them into a picnic blanket. It's really about your user behavior. And what I really want to achieve today with you, and I hope maybe I have, is just to make you think about how you could live more consciously and mindfully in everything that you do, at home, at work, on the internet. I mean, alone, just skipping your Google search and going directly to the website that you want to makes a huge, huge difference.

[00:20:35] So I really hope that this has at least sparked your interest in sustainability for the internet and sustainable web design. And if you're really interested in discussing this topic further, I'd really love to have that conversation with you, so please add me on LinkedIn. And I hope you enjoyed this presentation. Thank you.