Web Sustainability grows up intro to the Web Sustainability Guidelines

just going to hit the record thank you let's rolling I will I will just jump into the to the intro if people come in a few minutes late they're not going to miss any of the content that they're here for so that's okay so welcome uh thanks for coming along to our session today about the web sustainability guidelines um why are we here what are we talking about uh how does Google Slides work these are all important questions um so now more than ever many many ux

designers are finding uh their way into uh the intersection of sustainability web and ux uh 10 years ago or so not so much we didn't see that many people talking about these topics uh but now these are just what I found in about five minutes the there an embarrassingly large number of places for a a newly um uh activated uh climate saving ux design to

start uh if you just take Google as your starting point there's a there's a plethora there's at least five books that I'm aware of uh one of which is by one of our panelists today so obviously that's the best book on the list here um but there's a million blog posts there's at least half a dozen manifestos foundations all kinds of things it's a confusing time uh to start getting into this field where are you meant to start um and while all these uh uh articles and books

share a lot of content there's a lot of overlap um they they've all come out at different times it's an evolving field there isn't a single source of Truth for people to go to um but that is starting to change and that's why we're here today so just a coup can't believe it's just been a couple of months a couple of months ago uh the um w3c sustainable Web Design Group hit publish on the first draft or the first formal version 1.0 of a web sustainab ility guidelines um this

is like the first really serious attempt to pull together all the disperate strands of thought going on in and around this topic into one one set of guidelines that can be updated that are that are controlled by the community in an open process um and that are ultimately hopefully going to be the source of truth that uh we can all refer to going forward um so to help us navigate this uh this new world of Standards based

sustainability uh I've invited along a few experts um so first of all hang on let me switch my screen there uh first but definitely not least we have Tim Frick uh Tim is a founder and president of Mighty Bites a digital agency and certified B Corp in Chicago he's a speaker Community organizer and author of four books including designing for sustainability from O'Reilly he's also spoken twice at sustainable ux conferences in 2016 and

2017 next Anne FB Anne is an independent uxui designer working on Digital Services with an emphasis on frugality ecodesign inclusion and accessibility an's portfolio includes work for NOS public services and small businesses she co-authored the intro guide to digital ecodesign as part of designer ethes an is also uh contributor to the French standard afnor and has served as the committee co-chair for the ux chapter of a w3c sustainable web design

guidelines and an's co-chair is here as well Thorston Jonas Thorston is a sustainable product ux and Innovation consultant keynote speaker and founder of the sux sustainable ux Network he guides teams and companies in crafting sustainable responsible and ethical products uh he's also well as I mentioned the co-chair of the ux chapter of web design guidelines and co-host of the sux podcast where he interviews

thought leaders from around the globe and shares insights and strategies for integrating sustainability into the product design process so I'm going to hand over straight to to The Experts here um we will be running a Q&A at the end of this session so do use the question button at the bottom of um Zoom here I'll be collecting those and hopefully we'll have a reasonable amount of time at the end to get into those questions take it away I need to stop sharing though don't I there we go okay yeah I'm I'm taking

over and let me see how quick I can bring my screen up so you should see my screen now can see it I see some nodding wonderful um yeah at first James thank you so much for for inviting us and for this to speak about this important topic and thank you all out there for joining this session here to hear about the web sustainability guidelines and about what it is and well why we need it and how you could use it in your and and design

and I want to start our little presentation here with uh three more pictures of the three of us and as you can see all of us we are really connected to Nature I would say we are we are we love being outside doing hiking um cycling mountaineering and it is beautiful doing these things but it's for all of us always also a reminder of well how drastic the situation is we are

in right so I do a lot of mountaineering and hiking in the mountains and whenever I go there and I see how fast the glaas are Vanishing year by year that's really alerting actually right and and it's much more drastic than we feel in our cities I would I would say so it's always a very good reminder um to go back to Nature to get reminded of why we need to do these things so still why do we need sustain understandability

guidelines for the web and second question what has your ex to do with it right and as I guess most of you are somehow related to ux and design um as I am for for a long time now you all might know these or similar um definitions of ux and I show this here because you know for me for a very long time I always thought we we are the good people right we do the good things we we fight for users we fight against the evil

marketing or the evil business people or whatever we we are the good people we do the good things but one question that we need to ask ourselves actually is well does what we create justify what we destroy and this this quote by Tony fry is it's a reminder for me I read it again and again because this is I think really important to ask ourself this question and what do I mean with that real quick and maybe most of you already

know these or similar numbers well the internet all the stuff that we build relates somehow on the internet and you might know this numbers right it's it uses a lot of energy and it by this emits a lot of uh Greenhouse emissions and well you could say 4% of the global Greenhouse emissions H whatever does this mean well if we break this down to one website and here is one example this is actually uh I have been at the Danish TX administr at the beginning of this

year and this is their website where people go and do their text stuff actually so they have roughly 2.5 million visits per month and this easily emits 20 tons of CO2 each month only on the client side actually not not on the service site and that's well 20 tons of CO2 per month for one website we all know how many websites with how many millions and millions and millions of users we have I think that shows the potential that we that we see there and another interesting thing and maybe many

of you have heard this before as well most of the emissions of a product and that's not only digital products that's all kind of products are set in the design phase and design phase means also the engineering so it's not it's not all our fault as as digital designers um still I think it's there lies a huge responsibility and also uh huge opportunities to to be to be of impact actually but when we talk about sustainability it's also important

not only to talk about carbon emissions because we have this effect which is called the carbon tunnel vision we talk so much about carbon emissions that we very often forget about all the other aspects we have there that are also about sustainability and one example is um freshwater usage of the data centers that host all the wonderful websites and digital applications that we that we run and here is a number I just read that um the other day so it says well by

2030 the data centers and the water that they use will Top roughly 1.7 billion liters which is 450 million gallons daily actually and well what could that mean another great number from these um from this article is that by 2030 each one of us might have a digital double ganger with our well where which means our internet consuming uses the same amount of water that we need for our

personal personal life right and this is wow this is huge right and the interesting thing is most most of these stuff relies from well from data that is not really useful that we do not really use that is just stored and that is usually just junk and um another example since well I guess many of you are from from uh from the US or from from Northern America um here's another interesting number I read

about um uh there's an example from a city called the Dallas which is in Oregon and I wanted to bring an example here from uh from the US so freshwater usage of data centers is not not a thing of uh some other countries somewhere else in the world it's a thing for us in our in our countries and so they there is data center um by by Google and they use well almost 25% of the town uh water supply is used by this data

center and this is a huge problem actually especially when you look in other regions also in the US where you have a problem with water scarcity right so that's that's the problem that we have here and there is one more aspect I want to real quick talk about we all might know things like we have Uber Eats we here in Europe we have some other services which do the similar thing I think you could say they are a good example for for good ux and for user

convenience right so it's super convenient for me to order something the apps are mostly pretty well built so it's super convenient to order something and then 15 minutes later someone shows up at my door and I just have to get up from my couch to the door and and pick up my pick up my stuff but what's the downside of this well these platforms are really good in undermining workers rights and right so here in Europe it's it's the same as it is in the US most of

the people are not even employed but they are so-called self-employed right and so they are not paid really well or um also the restaurants that that uh work together with them it's not so good for them as well because these platforms take a really high commission and if you talk to Resturant you will hear that it's really hard for them to operate profitable because of these high commissions and I show you this because I think this is a big problem that we have especially with ux because because

we focus so much on our user that we forget about all the other things that happen around our users because too often someone or something else pays the price for the good user experience that we build for our users and that we that we uh create with focusing on our users and here's a nice quote from a guy Kevin sleven which is also some kind of a mantra for me I heard him many many years ago at a wonderful conference in mare in Sweden and he said when designer center around the user where do the

needs and desires of the other actors in the system go the lens of the user obscures the view of the ecosystems it affects right and this this is the big big problem that we have we we focus so much on users and try to make things great for users and we fight for the users but everything that we build is part of a bigger system and we need to get from this super user focused approach to a much more systemic approach and we need to understand about

the impacts that the stuff that we build has on all these other things and so actually we need from what we call human- centered design to something that is rather humanity and also environmental centered design and by doing this and um coming to an end with this with this intro it's as I said important to design for all aspects of sustainability carbon impacts are super important and maybe super urgent to to work on this

but we must not forget about the other aspects and I guess most of you have heard about the sustainable development goals but they are very good basis and all of them relate more or less to our work as um as digital people as ux designers and uh yeah I can highly recommend to have a look into these as well and so that was a real quick intro and with this I will head over to Tim to talk a little bit about the guidelines itself and how they

how this whole project started and great thanks so thank you can you all can you all see that yes okay great so I'm just gonna um thanks for that great intro because that really does set a good context I know we're going to be spok speaking a little bit more about the details and the nuances but I want to give a general overview of the web sustainability guidelines we we put these together over the course of the past couple years specifically to address some of the things that our brought up in his introduction um so I'm

just going to talk a little bit about it and and about the you know kind of the premise of it and the background a little bit um the worldwide Web Consortium also known as the web uh w3c creates web standards they're best known for their work in web accessibility through the web accessibility initiative as well as the web content accessibility guidelines um we were definitely inspired by that work um that they have been around for 20 plus years now at this point um and so when we were working at web sustainability guidelines we were looking at what wkeg and and

saying hey that would be a really good model to follow as we were kind of you know thinking about what kind of sustainability guidelines should we create for the web uh as as as James brought up when in his intro of the fact that there's information all over the place but none of it has really been collected and put in one single set of of guidelines so our group is a community group it's not affiliated um uh as as members of the w3c but we are a community group there's hundreds of community groups within the w3c ecosystem we started it in 2013 as a

place to share resources and simulate discussion around the that what was then a very nent topic of digital sustainability um here I'll actually uh uh drop a a link in the chat quick like anybody can join um the the community group at that link and so we began the work on the web sustainability guidelines in Earnest um in 2021 um mainly because we saw a big shift once the pandemic hit we were seeing a lot more awareness of of

digital sustainability and and interest in in kind of understanding the the the impact of our our work on the internet so we released uh version one in September of this year uh as as James mentioned earlier um our group has currently 146 members and we're growing hopefully some of the people on this uh on this call if you're not a member please consider becoming one um there were 80 contributors to the to the guidelines uh from 14 different company or countries um and those included web

developers ux designers environmentalists sustainability experts academics business and Tech leaders Etc um we just re released draft three of the guidelines so we've had three drafts since September um and we're currently working on draft four as well as a working group uh Charter to become on the standards or recommendations track within the W3 ecosystem so that was a lot of backstory um I'll just quickly go through and and as as dson mentioned we do focus on environmental social and governance um so we really have a kind

of triple bottom line approach to what we're looking at we are looking at social issues alongside carbon uh as well as economic issues and so the guidelines really are meant to focus on a bunch of different players within this ecosystem um so they're not really specifically focused at ux designers or or or web developers or whatever they're really on the digital product ecosystem um but today's topic and and what we're going to cover is is digging deep into the um into the uh ux design guide lines so uh that there three main goals to

make it easier for to apply sustainability principles to the to digital products and services that you manage um and measurably improve the internet's environmental social and economic impact as well as align these efforts with existing uh ESG standards like uh gr we did align all of our work to the global reporting initiative which is an open standard it's in Readiness for coming EU legislation as well as legislation in the United States um and so we're we're kind of trying to include

that so that when organizations are doing their their environmental impact of reporting or their ESG reporting that they can start to include digital products and services part of that um so uh as at a glance there are 93 different guidelines it's actually much larger than the web content accessibility guidelines um of which uh there are 236 different success criteria underneath those 93 guidelines and it's a single document if you look at it as a single document it's about 300 Pages or so so

you might want to get a cup of coffee or two if you decide you want to actually sit through and read them all um there are also five categories and I'm going to quickly whiz through these I'll I'll I'll really only mention the fact that the ux design category and and doron are going to cover in detail but we have hosting business and product strategy ux design web development and metrics um as part of these five categories so PR business and product strategy is 28 guidelines aimed at or organizational and team leaders to help them make more

informed strategic and operational decisions um if you've worked in digital products and services you've seen you know that like one part of the ecosystem may be really focused on on you know one set of metrics whereas you know perhaps business and product leaders are for formed on another one web developers on another one and so the idea is here to to uh create 28 guidelines for Business Leaders and product team leaders so that they can you know actually make more informed decisions around sustainability the ux design uh guidelines there's 29

of them I'll let doron and and an cover that um there's 24 different web development guidelines they're meant to help programming teams improve performance and reduce data payloads as well as lower digital emissions and uh hosting in infrastructure we have 12 guidelines under that that's meant to help teams make more informed decisions about things like thirdparty technology suppliers green hosting uh you know practices on the back end Etc and then finally we had a metrics each each one of these these categories

had their uh uh co-chairs essentially and Torsten and Anne were for the ux design um and then we also had a metrics uh metrics committee that looked at all of them and said how do we create measurement metrics for these things and so gri was one of the efforts but really we we looked at all of these metrics to uh and and apply some some measurement uh kpis across all of them so that we can help organizations more easily incorporate digital sustainability initiatives into their you know existing

reporting standards as I mentioned in terms of what we need to reach our goals we did just release these in September um there's four main things on the education side we really need curriculum we need training we need certifications we need research done more research done on the tooling side we need software resources to advance digital sustainability my company created something called ecog grader there's also website carbon out there there's a buch a bunch of different you know Carbon emissions carbon emissions uh tools that are out there but we need

these principles baked into all the tools that digital products and service teams use um and so tooling is a really important part of what we're doing and we're working with the w3c uh in detail on that because they have a lot of experience in that area adoption we need Outreach we need community and awareness building we need feedback from the community on how to improve these guidelines Etc um um so there's a huge lift there um and then of course we need legislation we need meaningful reg regulations to support digital

sustainability on carbon carbon estimations alone there are huge data gaps in some of the models that are out there um and so any of the estimations that you use in a tool like ecog grader or website carbon aren't really giving you the full picture and so we need legislation to you know have carbon disclosures uh like like csrd in the um in the EU um and similar things so that we have access to information and data that we need um and finally on my last slide you can find all of this at

sustainable webd design.org um Alex Dawson my co-chair of the w3c community group actually uh um created a Json file that that aot anybody can use to incorporate the web sustainability guidelines into their own products and services we implemented them at sustainable webd design.org it's synced to the master uh um uh guidelines and so every time those change when we go from draft three to draft four it'll be relatively easy to update sustainable webd design.org the difference I think

with sustainable webd design.org is if you don't want to read a 300 page document it's tagged it's searchable uh there are categories you can kind of find your own Learning Journey or your own path through those um so again uh uh I I I shared the link to join the community group please consider doing so and I will stop sharing now so that an and Thorson can take us home thank you very much Tim for the context of the creation of the of these guidelines now let's get into very

practical examples I hope that you see my screen um here now with Thon we're going to illustrate the ux part of uh some of the uh wsgs guidelines not all of them we try to choose um ones which we could illustrate with very concrete examples and uh also which can cover different steps of um of a design journey of a digital product so let's start uh there's a few

guidelines uh and maybe the first one the most important one is ask yourself should I digitize uh because the best pollution is the one we don't create so this is always a good reminder here is an example of what you can see in the Parisian Subway so we used to have these very simple light bulbs and nowadays they're trying tend to replace them more and more with screens uh which are much less resilient which have a a massive impact on the on the environment because

the uh the the manufacturing uh of the screens and the devices uh is about um between 50 and 80% of the environmental impact depending on the indicator you're looking at uh of the whole digital industry so that's why we should uh avoid as much as possible to put screens when we don't need them then another idea uh for the first

steps of your project might be to set an environmental budget for your website if it's a website for example so the same way you have a a budget a financial budget and you cannot do an endless project you might want to have um to set a a maximum of what you want to wait uh as a as a website so there is a great uh free tool U called performance budget calculator and the way it works is that

you choose the kind of connection you want your service to work with so for example I tend to choose a slow 3G uh mobile network and then you choose the number uh in how many seconds Mr your um page load so usually it's uh what I like about this it's uh is that it um it boils down to you uh to user experience so just having a good user experience and being inclusive also for people who have all the devices po connection who

live in remote places and then what happens is that just by looking at these two factors they can tell you how much um kilo bytes might your page weight at the maximum and so it's a good indicator to uh to set a limit for how much content you want to put in your page so it's still accessible to many people another one is to make negative impacts visible I'm going to list F and talk about this one yeah it's you have

heard a little bit about this um in my intro and Tim mentioned it as well so we need in the first place to make the negative impacts of the products that we build visible because in in all the tools that we use the standard tools they all focus on the user but they do not take into account all the other actors that are surrounded by the stuff that we build and other actors can be well it can be other humans like the delivery rer for the um for the food but it can

be also non-human actors like you can see here like nature or like animals or like a river and that might sound a little bit funny and well it these these techniques are around for quite some time and over the past years it was always a little bit difficult to to talk about these things because people will always start laughing saying yah why do I need a user persona for a bee right but the good thing is and maybe

you can switch to the next slide an um that changed um this I think about September right when Apple at their big keynote introduced their mother nature spot and there are many things wrong about the spot right there is a lot of well they talk only about the good things they do they did not talk about the bad things and that iPhones are still not easy repairable they do not did not talk about the working conditions in the factories and China etc etc but still they introduce nonhuman

personas to the masses when they when they introduced this spot and this helps people like us a lot because now we can go some and say hey we should also create personas for the impacted actors actually that surround our stuff and when people ask yeah but why should we do this then we say yeah well have you looked at Apple they do this at well and apple is the most valuable or one of the most valuable companies uh in the world Maybe it's a good idea so it really

helps in the narrative and it helps us to convince stakeholders to use these things and I can highly recommend to try in the very beginning of our design processes to give these things room to create an understanding about the negative impacts of the products we build and this is one technique there are many others and if you want to know more about this you can ask n and me um um afterwards but this is a very simple and easy example you can start using bright tomorrow and with this we come to

the next Point um maybe just on this one I wanted to add there's a great tool which is free and available online called the tarot cards of tech which was developed by artifact in England and it's a list of questions you might ask yourself at the beginning of your project and one of the cards is actually called mother nature and one of the questions I love is if uh your user um or your target was nature what would you do differently with your product and have tons of other great questions which might help you

think in the ideation phase on how you can make your digital product better but now let's buold down to the creating fiction user Journeys which you already know as ux UI designers uh is very important why is it so also in the in the in the the ecodesign phase um I'm sorry I forgot every realized I forgot to translate this slides uh so it's in

French but here you can see the US a journey of a French person trying to look for information about taxes in France um so here the use case was um understanding the how much money you could get back from the government if you hire somebody to help you watch your kids and so at the beginning we the user was uh trying to find information and the search barall didn't work and there was hope that it would work but then the results were very disappointing the website would make you go back and forth

um then it it would make you go back to the professional part of the website instead of the um of the PE um of the other parts for single people and then eventually the user would give up and just search on Google and find the information elsewhere so the issue here and what's really important to remember is that we're not just um assessing the environmental impact of one page because actually this website has very light Pages it's just text so if you look at

some uh assessment measures like green it uh analysis it would be uh a great grade but the fact is because the the user journey is so chaotic and here it there's actually a failure at the end um eventually the it's much it has a much bigger impact that if it had been just one page which would have been much heavier so sometimes it's better to have a kind of heavy page medium heavy uh rather than having a long journey of a

lot of very light pages so assessing the weight is important but what's really important is to look at the journey and what is the impact of the overall journey and not just uh of the an average of the websites maybe I can add a few more words about user Journeys because since we use user Journey so much and it's a very wellestablished tool um there's a very easy way again to make impacts visible by using the US user Journeys we

create anyway as you can see here that's a template we use a lot and I use a lot with with clients you can easily add additional layers saying for example okay which other actors are impacted by this step of the user Journey how much energy from which source is used for this step in the user Journey what other social impacts um come in hand with this step in the user Journey so and this is very important very often it's easier to use or to enhance the tool we use anyway

because it's much easier to explain that to to other stakeholders than than introducing a totally new tool so whenever you can um enhance the tools you use anyway do it this way and as I said since we use user Journey so much that's a pretty good tool to at the first place make impacts visible and also use it to create very um small ideas how to make things better because that's also always a big problem

right when we make impacts visible it looks like oh there's the huge mountain of the problem what should we do and if you try to bring it here in the user Journey you get it in such small chunks that you can can develop really pretty tailored ideas to fix one problem after uh after the next right and so that's a very helpful tool um yeah to make things visible and to create ideas how to make things better and with this back to

an another obious uh guideline would be to answer the real need but now we're going to illustrate it so you you can see what it implies here are two example I collected um about um features which are unnecessary and which might impact greatly the uh environmental uh uh toll of the ser this so on the first one I'm sorry again here it's in French it's my my personal screenshots uh there was a

Discord update um which enabl the users to put some animated video backgrounds uh in the in the calls uh which is uh unnecessary because Discord is first and for all a discussion um app and same way uh Spotify now enabled with the Spotify canvas feature to add the 5sec long videos uh when you're listening to music so so of course we understand why they did that it's about emotional design and

uh creating um enabling personalization and customization and reinforcing the link between the the artists and or the community and the the people the users um however when we when we tend to have a bigger and bigger and older uh digital service we tend to add features all the time especially when we are working in agile and um and this is always add expense of something else maybe the app will be too heavy for many people

probably it will have some environmental toll so it's also a choice of uh what is really necessary for the users and trying not to add unnecessary features also there's a a question of serving the right amount and quality so for example here it's the BBC uh podcast app and when you try to download an episode uh they ask you if you want the higher or the lower quality and the weight is between it's 10 to 20 MOS so

it's uh much it's twice as as heavy if you choose the higher quality but for most people especially if you're listening to um uh talk emissions then you don't need the higher quality because you cannot even perceive the difference so here maybe what they could have done regarding Echo design is to have put only one quality so not let people choose but maybe for the most advanced users uh in the settings they could have enabled them to choose choose a different quality like Spotify would do for example to optimize the bandwidth

so um here it's a it's a way of helping the users uh choose best the the settings and it's also a link to a a forthcoming uh guideline which is choose really well your default options but Thon will talk a bit more about that later another very important uh ux and UI um uh guideline is to design mobile first which is also a guideline of accessibility and of performance web

performance in general so when it comes to Echo design it's very important because it forces you to uh go to what's really essential and trying not to clutter too much the the screens so here for example it was the first H version of the echo design guide that we published with the my Association and so at the beginning it was a Google doc and then we put it uh on the on in HTML CSS and you can see what happens on the left so first on desktop we were like yes it's a guide so it's bit long but it's

fine and when we put it in Mobile and it was terrible we thought it was really impossible to publish this so that's why we um by uh designing it mobile first uh we changed the the whole homepage uh to add a summary and also um a table of contents and then it's much better as well on desktop of course so that's why designing mobile first is also very important important um regarding the environment because it forces you uh to

avoid adding any unnecessary plugins or uh too much text that brings us to the sustainable defaults and already mentioned and here's an example um well we all order stuff in the internet right and so here in in Hamburg for example where I live in Hamburg Germany the um the parcel delivery guy that deliver to my to my street it takes him the whole day to

deliver to my street and that street is maybe 300 400 met long and to the to the parallel Street it takes him the whole day it would take him I don't know maybe 15 minutes to throw all the pares in the middle on a uh and and let the people drop pick them up there and so the thing is for example um here in in in Germany or in Europe uh when you order at Amazon for example you can but you have to actively do this say hey I do not want to have it delivered to my home door but

to the next hub and here in a big city like Hamburg the next hub is for me it's in two minutes walking distance right so and that's the much more sustainable option actually right so well it's good because the the delivery guide does not need to to walk to every door and could not even do his his schedule they they never are able to to do the schedule for the day and it's also good for the environment less partial dely cars and and Transporters driving around and so

here's another example uh from a shop from Sweden called ar.com so and what you can see here is the default option for delivery is always the the next pickup location and I have to actively opt out of this option and say no I want to have it delivered to my home door and they go even one step further and one step further but well that's also related to the to the parser delivery company which is C DHL you can see home delivery is even more exemp more expensive it costs more money if I want

to have it delivered to my home door and that's what we mean with hey why don't we make the more sustainable options the default options instead of having the sustainable option the the option that that I need to opt in actively and this is something that directly relates to to what we do in ux right and and these are the options that we can we can easily change and with this back to you and what I love about this parcel delivery example is that it also illustrat how you would uh design if modern nature was

your clients so for example maybe you could let the people choose what dates they want to be delivered because it often happens to me for example that they tell me you're going to receive it in two days but sometimes I'm not going to be home or maybe I want it's not urgent and I want to receive it in one in like one week or 10 days and maybe it would be more rational for them to uh gather the parcels and then toh to drive less distance um because if I could could choose a different date further in time maybe they could choose some slower

means of transportation and it could be less impacting for the environment so that's also a way of how designing for modern nature can um give you new ideas about what you can add in as features in your uh service um which will directly impact both the environment and the users also um it like ecod designing a service or making it sustainable and accessible doesn't have to be ugly which is something we often hear so you can be

really creative with the graphism of course the accessibility and and the other sustainable guidelines are going to be constraints to what you can do or cannot do like the contrast or the sizes or the consistency but it's going to be really fun um so here are two examples I really like so the one on the left is a one I did with some colleagues we had lots of fun designing for a museum and uh about it was about an exhibition on celm and um and so there were lots of

images and there were and so we used lots of svgs and colors to try to make a consistent uh Journey for the users and you could um navigate uh in different ways and uh and it was fully responsive and accessible and um and we had lots of fun and all the pages are like 100% of page speed and they are very light like 700 kilo byes at the maximum uh despite all the images so you can totally put

pictures that's totally fine as long as you optimize them really well an image um we come back to that later but uh it's it's really possible and on the right you have a um an example of a city in France called the grobble and um and they created they published recently a website which is totally and fully accessible uh it's also um very very light and as you can see it looks very um nice uh both on the graphism level and also as a in regarding the the the user

friendliness and the user experience it's a it's very neat and uh and concise and so talking about pictures uh how you can you optimize the content the pictures is still the first um uh reason why the web pages are so heavy at the moment so on average according to https archive uh an average we page is about 2.3 megabytes and images are responsible

for about for more than a third of this weight so that's why even though you might know this it's very important to uh to optimize your images well and usually people tend to resize them uh and that's not necessarily enough here you can see that between the recite version and the optimized one uh so we put 8 800 pixels wide pictures on the website and eventually they're just um not even 50 kilo kilobytes so you can really make them very small and optimize

without having a pixel scene uh on your website if you optimize them well I love using short pixel or tiny PNG um as free tools available online to optimize the images very easily and eventually you can put many nice images on your websites and that's totally fine and same with the videos so videos should be very sparingly used uh and avoid as much as possible but for us uh being about an exhibition we had content

from the scientists and interviews of artists and the and content which had to be put on the website it was important content so if you have to put videos on your website uh we chose to implement them using HTML 5 instead of using a YouTube plugin for example because they're very heavy a YouTube plugin is like 2.4 megabites so it's more than the average weight page um page weight of of the web so you should really um try using alternative methodologies use lazy

loading and display the weight so that people know uh what they what impact they're going to have if they launch the video and here is the same using some free websites for optimization eventually the video was just 30 megabytes heavy but will be still a very good quality in general avoid plugins so not only the YouTube plugin but also the Google Map which is one megabyte uh heavy also all the social networks because they tend to um to uh track the

users uh they tend to uh uh to have a lots of requests also which going to impact negatively your website so instead of that use icons with links use um SVG Maps use maybe uh filters for people to find geographically uh results uh but really think about what's necessary for your user usually a Google map is not the best way of displaying the information and finally um I think it's the final one you should test uh what you

developed so test on all devices on the left it's the picture of my smartphone or the same model so it's seven years old and uh so I cannot use a slack anymore because like decided that my phone was too old uh so I should buy a new one because I don't want to uh to develop for my smartphone anymore but it still works really well and it's still powerful and so it pisses me off that I should need to buy a new device so make sure that your website and your apps uh really work on devices older than five

years or maybe older than seven years if possible uh and then also try on low internet you can simulate it online with your browser so try for example regular 3G and compare with your performance budget calculator uh goal to see uh if you manage to reach it and I'm going to stop presenting and the hand to th taking over for the for the last part and this is well

this is a question we all get get a lot right and I well I I speak at a lot of conf conferences and do a lot of workshops and very often this question shows up right yeah come on ton good points all all right but it's not a business case even if I want to do it how do I convince the business people the management people and well the truth is this is not true it is already also a business case and just two very short examples um this is in use from the beginning of this year so what it says

in general is that HSBC which is a bank puts green washing to the risk metrics so they they they value companies right and see how How likely are they to be a success in the future or or not and well a company that does greenwashing has a much bigger uh um chance to be a failure in the future and Banks do not do this because they want to save the world they do this because they look at it from the money

side and here is another more concrete example C gamini which is a large consulting company they did a research about sustainable product design in 2022 and so what they mainly say is well doing sustainable product design is not only good to reduce emissions etc etc but it is also good for example to um get benefits like increased revenue or um to get an improved relationship

with your customers or an improved relationship with your employees and again cap gamini is a consulting company again it's about money for them it's not because they want to save the world and if these companies already say things like these then you can believe that um that this is true and this is a very important thing also when working in this whole field of digital sustainability there are a lot of narratives out there that we need to change because they are not true anymore

and one very important narrative is that sustainability is just a cost factor it's not and I say very often to to people and to clients to say hey well you could start doing these things now or otherwise you will be overtaken by the market and you won't have a business in five years anymore and especially here so I'm not a very expert about regulations in the US but I can tell here in the EU um what was happening or what is happening with with

accessibility at the moment right so that in the EU we have this legislation that says uh digital products need to be accessible need to be F need to fulfill accessibility standards and the same things are happening with digital sustainability at the moment here in the EU so the regulations will come and that's another very good argument for the business people saying hey well we have to take care of this anyway and if we do let's say the next web project now why don't we take these into account

right now so very important also talking to people and doing it again and again to help changing this narratives to to to work against these wrong narratives of sustainability is a cost Factor because this is not true so well to to wrap this up a little bit what what how can you start and well we we could talk for another 30 minutes about this but just three things maybe also depending on where you are on your personal expert

level in terms of sustainability so how can you start tomorrow well first thing is dive into these things right have a look at the web sustainability guidelines you do not need to learn about all of them at the same time pick one two or three that that feel most familiar that feel okay yeah I think I can start working on this right and start with one or two and that's fine and then later on you you take the next B and then you speak with your um with

your um with your colleagues for example about this so and then on the next level start implementing them and and scaling them right spread the word talk to your team to other stakeholders put sustainability on the agenda and then try to set goals right the easiest one is at first to ask okay what's the what's the carbon impact of our digital product what's the carbon impact of our website and when you have this discussion you can say yeah how about we set a goal about lowering this carbon impact in the next six months or next 12

months well if you say hey I'm now I'm an expert on this level already what can I do now yeah well contribute to the community as as Tim said we have these these wonderful community group uh or working group uh that that worked on these on these guidelines and there are other great communities out there as well and it's really important to to join forces actually to to join communities to work together and uh to to make us all a bigger force all

together and well the the most important question you should or could ask yourself when you're leaving this session here today is how sustainable is your digital product how sustainable is the project you are working on that's the first point starting to ask this question and I want to end the talk with a quote that I use it very lot and it's also another personal mantra for me because you know you know sometimes and that's what many people also say to me it's like yeah but I'm just a

small designer I'm I'm maybe even I'm a junior designer what can I do I don't have any impact and I think I personally think that's not true and here's this nice quote by Amanda Gorman that's the young woman that spoke at the inauguration of Joe Biden and she said for there is always light if only we are brave enough to see it if only we are brave enough to be it and I think that's the very important point we are still at the very beginning and you know I'm 45 45 now yes um I will do these things for

the rest of my life we will never reach a point where we say okay now we are done I can lean back and everything is good we have to do this until the end of our life and we are still at the beginning and we need people like all of us like you that are here today to to be this light to Enlighten other people to to set examples to start working on these things and that everyone can do this right doing a very little thing is always better better than than doing nothing and with this I want to say

thank you and now we're open for your questions thank you thank you very much uh so I've been collecting questions about a lot of activity here uh we've only got seven minutes but um I don't want anyone's questions to be lost so I've been copying them out into a document and hopefully we can do a uh followup um with the recap email as well I think Tim I think Zoom creates a a follow-up email um uh and then we'll

work out some other way of contacting everybody but signed up gpdr allowing um okay so I think we've got time for a couple of these questions though so let me just quickly put this in the share um share screen hopefully you can see this um so uh going to start with one I prepared earlier just because it it was a nice segue from one of Thor's closing points

we saw how wag ended up lining up very nicely with legislation around accessibility uh initially the law said one thing wag said another gradually the law started in mosta most jurisdictions to rely on wag and effectively wag 2. one or 2.0 double A is is the de facto standard for most of israels do you see anything like that happening in the near term with the wsg I'm thinking particularly uh since

California pass their own uh carbon accountancy act and so on that seems to include a nod towards digital um is is this is there a legislative track that you're following in the wsg process to to try and help lawmakers I can answer that um actually I don't know if I have an answer to that but I can tell you what plan is um uh the the the we would need to be on in order to get you know w3c's official

backup which is what would be needed in order for legislators to look at that be like yeah that's a serious thing that we will take into consideration right now as a community group we're kind of outside of the w3c ecosystem even though we're part of it you know we don't have the memberships Buy in yet so we need to go through a process of doing that of which we're planning to do that in 2024 um with the idea being that we could release a first draft of a specification that's officially on the standards track at w3c hopefully sometime next year um

and or or maybe you know even into early early 2025 depending on you know how the red tape goes with with the w3c membership um but the idea is definitely to uh um you know follow the same kind of path legislation wise um providing some recommendations and and you know there are you are you did mention the the California law there's also csrd in the EU um that uh is going to make climate disclosure climate reporting and you know uh emissions disclosure mandatory for larger companies I do see

a day when that's going to be mandatory for all organizations whether you're a nonprofit whether you're a small business that there's just going to be kind of processes that you go through to report your your environmental impacts and and stuff um so I think there's a lot of opportunities there to use the wsgs to kind of drive that process um yeah and like I said in order to do that we will need some uh larger broader buyin um we are also again uh aligning

this with the global reporting initiative um uh they're possibly aligning it maybe with the SGS as as um Thoren brought up earlier um that's they're already aligned with those Concepts it's just a matter of getting very explicit documentation around how um and so like for instance with the SGS are we can can we you know tag specific targets within an SG um that align with a very specific web sustainability guidelines and so you know because it is so early phase I don't know that there's

a a ton that we can do at this point other than to say you know use these as a resource and as you're thinking of as countries are thinking of legislation um they could be used to inform that or or at least uh um you know generate questions to ask and I would like to add one sentence here at least in the EU where the so I think we're at much more speed than we have been with the accessibility guidelines because right in in the EU the as I said the new green deal and there is these

csrd corporate sustainability reporting directive so the thing is at the moment with ESG reporting it's companies talk a lot about scope one and maybe scope two emissions not about scope 3 a lot of the digits Things fall in the scope 3 um SE part and with the csrd companies also must report on these things so that puts a lot of pressure on them I I think actually at least here in the U so legisl legislation is already happening and so therefore I think we at

much more speed here than we have seen with the accessibility C but that's my personal opinion from from the EU at least in Fr we already had our first law on the reduction of the environmental footprint of the digital industry two years ago and next year is being published uh some guidelines equivalent to the one we have for accessibility and uh and we can see already that in every public um request for proposal they have uh they they have demands on the

environmental responsibility of the companies answering so that we see the whole private sector um really getting interest into that because of the Public Services uh demanding these requirements great so thank thanks everybody um great you know car is nice stick works really well as we saw with accessibility right uh lots to look forward to there um okay another question uh from one of our audience existing tools for estimating energy and Emissions uh can have very

broad system boundaries are there any tools that estimate emissions more specifically um and here here here a question saying like around the impact of the U ux decisions we make so so maybe that's two things maybe that's more precise tools for estimating energy use of an existing service and then other tools for estimating the impact of a decision that you are making making it the design phase and I know we've only got like one minute and I've still got to do our thank you so this might be a

big one it is a it is a big one um I I I'll just quickly uh share a link for those who are um interested in this topic on the around the sustainable web design model um to to go read this article uh that really talks about how you can start to put more granular data into the system boundaries to get more uh release or more more accurate accurate uh emissions estimates um thoron and an I don't know if you have any specific Tools in Your ux Arsenal that you use um specifically to measure

or reduce emissions as part of the design phase well I think I think there is no super well o I see and nothing then you can go first you um I think we got to say the same thing there's no such thing as measuring the environmental impact of a digital service the only way you can do it properly is by doing a full life cycle analysis which takes months so by the end you've done doing it it will already be out of date so there's no way everybody who sells you measure is a

liar there's no way of measuring it but you can assess you can make some assessments and then there are a lot of free tools which help you assessing your progress so it's the main goal is assessing so you can see how good you are doing compared to others and how good you are doing compared to yourself before so that's the main goal of these um quantitative assessments uh regarding the specific ux decisions sadly we cannot see the future of how it can impact however we have uh we tend nowadays we have a few years of

experimentations there a lot of things to explore but nowadays we know uh what's um uh the least uh impactful for the environment for example between two different solutions between static pages and dynamic ones between a a slideshow and putting static images so we tend to know what's lighter and what's best regarding ux decisions uh if you look at other um feedbacks from people who experiment it but it's not going to be a

specific quantitative measures regarding your products sadly this doesn't exist at the moment and I don't think it will ever exist because uh yeah digital tools are so complex that's the thing it's complex and what I want to add this example of the sustainable user journey is also a pretty good tool to get as close as you can to these things right because again it's always about breaking it down to small chunks and doing it with user Journey gives you the the

opportunity to estimate for each step okay what emissions come from this but it still work to get to get the answer to these right because there is no tool where you can just enter your data and then bling it's there that's the that's the hard answer I justed the equivalent of playing us all off here like they do at the Oscars uh since we're at our time and slightly over I wanted to make sure that I left enough time here to thank uh all our panelists and Tim thoron um you

can catch all of these fine fine folks uh in their resped respective areas so obviously the W3 Community there susty web um that's always open and looking for contributors so that's like the main place to learn and the main place to contribute is to go there you can catch Tim and Chicago uh you can catch an and Thorston online um at their respective websites Thor's launching a a a new course we'll share a sign up link for that after after the session you can follow me at my newsletter on

sustainable x.com and an designers ethics. org um so just to thank everybody uh involved today thank you audience for coming along uh I hope this was useful um obviously there's you know this is one hour and there's 200,000 guidelines or something I think I heard there Tim um to to learn um it's all good stuff but it it is a lot of to unpack and we're going to be learning about this for months and years to come um I'm going to stay online for

a minute just to make sure I've copied down all the all the q&as but you you all submitted fantastic questions I'm sorry we didn't get to answer all of them um I am going to colate them and do my best to to get find some answers um and put that out in an email so you'll see that on my newsletter um and if we figure out how to send an email through the zoom platform uh we'll see it on there as well thanks again everybody and Tim you didn't get the audience don't have the

reaction button so they can't do the round of applause so I have to do that um instead thank you for having us you very much great stuff thank you all take care now