-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathintro.html
814 lines (747 loc) · 60 KB
/
intro.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta name="generator" content="ReSpec 35.2.1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
dfn{cursor:pointer}
.dfn-panel{position:absolute;z-index:35;min-width:300px;max-width:500px;padding:.5em .75em;margin-top:.6em;font-family:"Helvetica Neue",sans-serif;font-size:small;background:#fff;background:var(--indextable-hover-bg,#fff);color:#000;color:var(--text,#000);box-shadow:0 1em 3em -.4em rgba(0,0,0,.3),0 0 1px 1px rgba(0,0,0,.05);box-shadow:0 1em 3em -.4em var(--tocsidebar-shadow,rgba(0,0,0,.3)),0 0 1px 1px var(--tocsidebar-shadow,rgba(0,0,0,.05));border-radius:2px}
.dfn-panel:not(.docked)>.caret{position:absolute;top:-9px}
.dfn-panel:not(.docked)>.caret::after,.dfn-panel:not(.docked)>.caret::before{content:"";position:absolute;border:10px solid transparent;border-top:0;border-bottom:10px solid #fff;border-bottom-color:var(--indextable-hover-bg,#fff);top:0}
.dfn-panel:not(.docked)>.caret::before{border-bottom:9px solid #a2a9b1;border-bottom-color:var(--indextable-hover-bg,#a2a9b1)}
.dfn-panel *{margin:0}
.dfn-panel b{display:block;color:#000;color:var(--text,#000);margin-top:.25em}
.dfn-panel ul a[href]{color:#333;color:var(--text,#333)}
.dfn-panel>div{display:flex}
.dfn-panel a.self-link{font-weight:700;margin-right:auto}
.dfn-panel .marker{padding:.1em;margin-left:.5em;border-radius:.2em;text-align:center;white-space:nowrap;font-size:90%;color:#040b1c}
.dfn-panel .marker.dfn-exported{background:#d1edfd;box-shadow:0 0 0 .125em #1ca5f940}
.dfn-panel .marker.idl-block{background:#8ccbf2;box-shadow:0 0 0 .125em #0670b161}
.dfn-panel a:not(:hover){text-decoration:none!important;border-bottom:none!important}
.dfn-panel a[href]:hover{border-bottom-width:1px}
.dfn-panel ul{padding:0}
.dfn-panel li{margin-left:1em}
.dfn-panel.docked{position:fixed;left:.5em;top:unset;bottom:2em;margin:0 auto;max-width:calc(100vw - .75em * 2 - .5em - .2em * 2);max-height:30vh;overflow:auto}
</style>
<title>Introduction to Web Sustainability</title>
<style>
/* Sticky Deprecation Notice for Interest Group */
.sticky { background-color: #fddfdd; border: 5px solid red; border-radius: 15px; padding: 1em 2em; position: sticky; top: 1em; z-index: 999; }
.sticky form { text-align: center; }
.sticky button { padding: 0.5em 1em; }
</style>
<style id="respec-mainstyle">
@keyframes pop{
0%{transform:scale(1,1)}
25%{transform:scale(1.25,1.25);opacity:.75}
100%{transform:scale(1,1)}
}
a.internalDFN{color:inherit;border-bottom:1px solid #99c;text-decoration:none}
a.externalDFN{color:inherit;border-bottom:1px dotted #ccc;text-decoration:none}
a.bibref{text-decoration:none}
.respec-offending-element:target{animation:pop .25s ease-in-out 0s 1}
.respec-offending-element,a[href].respec-offending-element{text-decoration:red wavy underline}
@supports not (text-decoration:red wavy underline){
.respec-offending-element:not(pre){display:inline-block}
.respec-offending-element{background:url(data:image/gif;base64,R0lGODdhBAADAPEAANv///8AAP///wAAACwAAAAABAADAEACBZQjmIAFADs=) bottom repeat-x}
}
#references :target{background:#eaf3ff;animation:pop .4s ease-in-out 0s 1}
cite .bibref{font-style:normal}
a[href].orcid{padding-left:4px;padding-right:4px}
a[href].orcid>svg{margin-bottom:-2px}
ol.tof,ul.tof{list-style:none outside none}
.caption{margin-top:.5em;font-style:italic}
#issue-summary>ul{column-count:2}
#issue-summary li{list-style:none;display:inline-block}
details.respec-tests-details{margin-left:1em;display:inline-block;vertical-align:top}
details.respec-tests-details>*{padding-right:2em}
details.respec-tests-details[open]{z-index:999999;position:absolute;border:thin solid #cad3e2;border-radius:.3em;background-color:#fff;padding-bottom:.5em}
details.respec-tests-details[open]>summary{border-bottom:thin solid #cad3e2;padding-left:1em;margin-bottom:1em;line-height:2em}
details.respec-tests-details>ul{width:100%;margin-top:-.3em}
details.respec-tests-details>li{padding-left:1em}
.self-link:hover{opacity:1;text-decoration:none;background-color:transparent}
aside.example .marker>a.self-link{color:inherit}
.header-wrapper{display:flex;align-items:baseline}
:is(h2,h3,h4,h5,h6):not(#toc>h2,#abstract>h2,#sotd>h2,.head>h2){position:relative;left:-.5em}
:is(h2,h3,h4,h5,h6):not(#toch2)+a.self-link{color:inherit;order:-1;position:relative;left:-1.1em;font-size:1rem;opacity:.5}
:is(h2,h3,h4,h5,h6)+a.self-link::before{content:"§";text-decoration:none;color:var(--heading-text)}
:is(h2,h3)+a.self-link{top:-.2em}
:is(h4,h5,h6)+a.self-link::before{color:#000}
@media (max-width:767px){
dd{margin-left:0}
}
@media print{
.removeOnSave{display:none}
}
</style>
<meta name="color-scheme" content="light">
<meta name="description" content="This document provides an introduction to the subject of Web Sustainability, acting as the "what" and "why" elements to the "how" provided by the Web Sustainability Guidelines (WSG) 1.0 specification.">
<style>
var{position:relative;cursor:pointer}
var[data-type]::after,var[data-type]::before{position:absolute;left:50%;top:-6px;opacity:0;transition:opacity .4s;pointer-events:none}
var[data-type]::before{content:"";transform:translateX(-50%);border-width:4px 6px 0 6px;border-style:solid;border-color:transparent;border-top-color:#222}
var[data-type]::after{content:attr(data-type);transform:translateX(-50%) translateY(-100%);background:#222;text-align:center;font-family:"Dank Mono","Fira Code",monospace;font-style:normal;padding:6px;border-radius:3px;color:#daca88;text-indent:0;font-weight:400}
var[data-type]:hover::after,var[data-type]:hover::before{opacity:1}
</style>
<script id="initialUserConfig" type="application/json">{
"editors": [
{
"name": "Alexander Dawson",
"url": "https://alexanderdawson.com/",
"w3cid": 49702
}
],
"authors": [
{
"name": "Ines Akrap",
"url": "https://inesakrap.com/",
"company": "Storyblok"
},
{
"name": "Mike Gifford",
"url": "https://civicactions.com/",
"company": "CivicActions"
},
{
"name": "Tim Frick",
"url": "https://www.mightybytes.com/",
"company": "Mightybytes",
"w3cid": 62394
}
],
"edDraftURI": "https://w3c.github.io/sustyweb/intro.html",
"github": "https://github.com/w3c/sustyweb/",
"group": "sustyweb",
"latestVersion": "https://w3c.github.io/sustyweb/intro.html",
"localBiblio": {
"CSRD": {
"title": "Corporate sustainability reporting",
"date": "05 January 2023",
"href": "https://finance.ec.europa.eu/capital-markets-union-and-financial-markets/company-reporting-and-auditing/company-reporting/corporate-sustainability-reporting_en",
"status": "Informational",
"publisher": "European Commission",
"id": "csrd"
},
"GRI": {
"title": "Global Reporting Initiative",
"href": "https://www.globalreporting.org/standards/",
"status": "Informational",
"publisher": "GRI",
"id": "gri"
},
"MANIFESTO": {
"title": "Sustainable Web Manifesto",
"href": "https://www.sustainablewebmanifesto.com/",
"status": "Informational",
"publisher": "Sustainable Web Manifesto",
"id": "manifesto"
},
"NETWORK": {
"title": "Network energy use not directly proportional to data volume",
"date": "21 June 2024",
"href": "https://onlinelibrary.wiley.com/doi/10.1111/jiec.13512",
"status": "Informational",
"publisher": "David Mytton, Dag Lundén, and Jens Malmodin",
"id": "network"
},
"UN": {
"title": "Sustainability",
"href": "https://www.un.org/en/academic-impact/sustainability",
"status": "Informational",
"publisher": "United Nations",
"id": "un"
}
},
"specStatus": "CG-DRAFT",
"postProcess": [
null
],
"publishISODate": "2024-12-17T00:00:00.000Z",
"generatedSubtitle": "Draft Community Group Report 17 December 2024"
}</script>
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2021/cg-draft"></head>
<body class="h-entry informative"><div class="head">
<h1 id="title" class="title">Introduction to Web Sustainability</h1>
<p id="w3c-state">
<a href="https://www.w3.org/standards/types#reports">Draft Community Group Report</a>
<time class="dt-published" datetime="2024-12-17">17 December 2024</time>
</p>
<dl>
<dt>Latest published version:</dt><dd>
<a href="https://w3c.github.io/sustyweb/intro.html">https://w3c.github.io/sustyweb/intro.html</a>
</dd>
<dt>Latest editor's draft:</dt><dd><a href="https://w3c.github.io/sustyweb/intro.html">https://w3c.github.io/sustyweb/intro.html</a></dd>
<dt>Editor:</dt><dd class="editor p-author h-card vcard" data-editor-id="49702">
<a class="u-url url p-name fn" href="https://alexanderdawson.com/">Alexander Dawson</a>
</dd>
<dt>Chairs:</dt><dd class="editor p-author h-card vcard">
<a class="u-url url p-name fn" href="https://inesakrap.com/">Ines Akrap</a> (<span class="p-org org h-org">Storyblok</span>)
</dd><dd class="editor p-author h-card vcard">
<a class="u-url url p-name fn" href="https://civicactions.com/">Mike Gifford</a> (<span class="p-org org h-org">CivicActions</span>)
</dd><dd class="editor p-author h-card vcard" data-editor-id="62394">
<a class="u-url url p-name fn" href="https://www.mightybytes.com/">Tim Frick</a> (<span class="p-org org h-org">Mightybytes</span>)
</dd>
<dt>Feedback:</dt><dd>
<a href="https://github.com/w3c/sustyweb/">GitHub w3c/sustyweb</a>
(<a href="https://github.com/w3c/sustyweb/pulls/">pull requests</a>,
<a href="https://github.com/w3c/sustyweb/issues/new/choose">new issue</a>,
<a href="https://github.com/w3c/sustyweb/issues/">open issues</a>)
</dd>
</dl>
<p class="copyright">
<a href="https://www.w3.org/policies/#copyright">Copyright</a>
©
2024
the Contributors to the Introduction to Web Sustainability
Specification, published by the
<a href="https://www.w3.org/groups/cg/sustyweb">Sustainable Web Design Community Group</a> under the
<a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>. A human-readable
<a href="https://www.w3.org/community/about/agreements/cla-deed/">summary</a>
is available.
</p>
<hr title="Separator for header">
</div>
<div class="sticky">
<p><strong>Note:</strong> Several sections of this specification have been superseded. Please refer to the <a href="https://www.w3.org/groups/ig/sustainableweb/">Sustainable Web Interest Group</a> who are developing the latest version of the <a href="https://w3c.github.io/sustainableweb-wsg/">Web Sustainability Guidelines</a>.</p>
<form><button type="button" onclick="parentNode.parentNode.remove()">Hide me</button></form>
</div>
<section id="abstract" class="introductory"><h2>Abstract</h2>
<p>This document provides an introduction to the subject of Web Sustainability, acting as the "what" and "why" elements to the "how" provided by the <a href="https://w3c.github.io/sustyweb/">Web Sustainability Guidelines</a> (<abbr title="Web Sustainability Guidelines">WSG</abbr>) 1.0 specification.</p>
<p>It aims to be a helpful entry point for individuals and stakeholders who have an interest in digital sustainability and the work undertaken by the <a href="https://www.w3.org/groups/cg/sustyweb">Sustainable Web Design Community Group</a>.</p>
<p>This is a supplementary document created to showcase the need for such guidance, helping individuals and organizations better understand the current Web landscape and how it is affected by sustainability issues. It also provides answers to common questions which may help those looking to become more environmentally friendly utilize the <abbr title="Web Sustainability Guidelines">WSGs</abbr> and gain a broader awareness of the subject and its relevance to the Internet.</p>
<p>Help improve this page by sharing your ideas, suggestions, or comments via <a href="https://github.com/w3c/sustyweb/issues/">GitHub issues</a>.</p>
</section>
<section id="sotd" class="override introductory"></section><nav id="toc"><h2 class="introductory" id="table-of-contents">Table of Contents</h2><ol class="toc"><li class="tocline"><a class="tocxref" href="#abstract">Abstract</a></li><li class="tocline"><a class="tocxref" href="#what-is-web-sustainability"><bdi class="secno">1. </bdi>What is Web Sustainability?</a></li><li class="tocline"><a class="tocxref" href="#the-importance-of-web-sustainability"><bdi class="secno">2. </bdi>The Importance of Web Sustainability</a></li><li class="tocline"><a class="tocxref" href="#emissions-vs-ppp"><bdi class="secno">3. </bdi>Emissions vs. <abbr title="Planet, People, and Prosperity">PPP</abbr></a></li><li class="tocline"><a class="tocxref" href="#the-current-landscape"><bdi class="secno">4. </bdi>The Current Landscape</a></li><li class="tocline"><a class="tocxref" href="#the-web-sustainability-guidelines"><bdi class="secno">5. </bdi>The Web Sustainability Guidelines</a></li><li class="tocline"><a class="tocxref" href="#incorporating-the-guidelines-into-your-work"><bdi class="secno">6. </bdi>Incorporating the Guidelines Into Your Work</a></li><li class="tocline"><a class="tocxref" href="#resources"><bdi class="secno">7. </bdi>Resources</a></li><li class="tocline"><a class="tocxref" href="#acknowledgments"><bdi class="secno">A. </bdi>Acknowledgments</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#participants-of-the-swd-cg-active-in-the-development-of-this-document"><bdi class="secno">A.1 </bdi>Participants of the SWD-CG Active in the Development of This Document</a></li></ol></li><li class="tocline"><a class="tocxref" href="#references"><bdi class="secno">B. </bdi>References</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#informative-references"><bdi class="secno">B.1 </bdi>Informative references</a></li></ol></li></ol></nav>
<section id="what-is-web-sustainability"><div class="header-wrapper"><h2 id="x1-what-is-web-sustainability"><bdi class="secno">1. </bdi>What is Web Sustainability?</h2><a class="self-link" href="#what-is-web-sustainability" aria-label="Permalink for Section 1."></a></div>
<p>Sustainability, as defined by the United Nations [<cite><a class="bibref" data-link-type="biblio" href="#bib-un" title="Sustainability">UN</a></cite>], focuses on "meeting the needs of the present without compromising the ability of future generations to meet their own needs". Web Sustainability is the digital equivalent of this. It's an approach to designing digital products and services that puts people and the planet first [<cite><a class="bibref" data-link-type="biblio" href="#bib-manifesto" title="Sustainable Web Manifesto">MANIFESTO</a></cite>].</p>
<p>Web sustainability addresses more than just environmental issues. It's about making the Web—and the world—a better place for everyone.</p>
</section>
<section id="the-importance-of-web-sustainability"><div class="header-wrapper"><h2 id="x2-the-importance-of-web-sustainability"><bdi class="secno">2. </bdi>The Importance of Web Sustainability</h2><a class="self-link" href="#the-importance-of-web-sustainability" aria-label="Permalink for Section 2."></a></div>
<p>Most people are aware of "green" issues. However, fewer understand that digital products and services directly contribute to the climate crisis. With the Internet producing more emissions than the entire aviation industry, anyone with an online presence can get involved and make a difference.</p>
<p>Collectively, by focusing on web sustainability, we have a real chance to make a global impact on the climate crisis going forward. Digital impacts are often proportional, with the biggest websites requiring the most change. However, larger organizations also have more resources to make that change. Plus, the Web often beats the physical world to solutions due to a focus on agility and continuous improvement.</p>
</section>
<section id="emissions-vs-ppp"><div class="header-wrapper"><h2 id="x3-emissions-vs-ppp"><bdi class="secno">3. </bdi>Emissions vs. <abbr title="Planet, People, and Prosperity">PPP</abbr></h2><a class="self-link" href="#emissions-vs-ppp" aria-label="Permalink for Section 3."></a></div>
<p>Many sustainability guidelines follow what are often referred to as <abbr title="Planet, People, and Prosperity">PPP</abbr> principles.</p>
<p>Sustainability's three pillars include:</p>
<ul>
<li><strong>Planet</strong>: Protecting environmental ecosystems.</li>
<li><strong>People</strong>: Protecting individuals, communities, and society as a whole.</li>
<li><strong>Prosperity</strong>: Practices grounded in equitable and shared equity.</li>
</ul>
<p>While environmental factors cover planetary issues like emissions and waste, it's also critical to consider other intersectional issues related to people and society, such as accessibility, privacy, security, and prosperity factors such as good (and ethical) governance. In other words, investing in people correlates to positive effects on sustainability:</p>
<ul>
<li>For example, good Web performance can improve user-experience while also reducing the physical impact of a site in terms of size, loading, rendering times, etc.</li>
<li>Similarly, good governance and ethical economic practices improve organizations. In turn, these organizations can also outperform their more traditional counterparts on a variety of indicators, including sustainability and long-term financial performance.</li>
</ul>
<p>With that being said, emissions accounting is challenging in any industry. This is exacerbated by the fact that it is still an emerging discipline. With the Internet, this becomes especially difficult.</p>
<p>Many data gaps exist when measuring emissions across the Internet stack. While we do have some information on electrical usage for servers, device usage, and, to an extent, rendering, we don't have a complete picture of the entire web ecosystem. In addition to emissions, we also come up short on data related to other important impacts like mineral waste, water waste, e-waste, and so on.</p>
<p>The Internet is anything but simplistic in how its infrastructure works. Because of this, we must take a holistic approach to sustainability, including web sustainability. In other words, restricting our focus to the obvious causes of electrical waste—otherwise referred to as "carbon tunnel vision"—sabotages our ability to consider the impact of the entire system.</p>
<p>Notably, as one issue can impact another, a "butterfly effect" of unintended consequences that undermine long-term sustainability efforts or beneficial side effects that enrich people and the planet can result from the choices we make. This is why it pays to consider all forces that might be affected by our work and decisions.</p>
<p>More research is needed to help us collectively understand how best to achieve web sustainability goals. Creating consensus on terms and the language we use to describe these goals is a step in the right direction.</p>
</section>
<section id="the-current-landscape"><div class="header-wrapper"><h2 id="x4-the-current-landscape"><bdi class="secno">4. </bdi>The Current Landscape</h2><a class="self-link" href="#the-current-landscape" aria-label="Permalink for Section 4."></a></div>
<p>Every part of the Internet has some sort of environmental impact from the developer's machine, to web service providers, to the physical infrastructure that carries data, right through to hosting and consumer devices. Aiming to reduce the impact of these different mechanisms, where possible, is as much a part of an individual or organization's responsibility as driving sales or improving customer service.</p>
<p>Increasingly, through awareness of green issues, the public and press have placed pressure upon industries to become more ethically aware and push for sustainable change. With several governments seeking regulatory enforcement in this area, the need to make our products and services match such a requirement will increase.</p>
<p>Whether you work in hosting, back-end development, front-end development, user-experience design, information architecture, content authoring, user-interface design, run a business, manage a product or service, or have another role, there are many opportunities to create meaningful change: performance optimizations, waste reduction techniques, emissions measurement, impact reporting practices, or other as yet unknown tactics, to name just a few.</p>
<p>We need champions within industries and organizations to spearhead web sustainability practices and meet these challenges head-on.</p>
</section>
<section id="the-web-sustainability-guidelines"><div class="header-wrapper"><h2 id="x5-the-web-sustainability-guidelines"><bdi class="secno">5. </bdi>The Web Sustainability Guidelines</h2><a class="self-link" href="#the-web-sustainability-guidelines" aria-label="Permalink for Section 5."></a></div>
<p>The <a href="https://w3c.github.io/sustyweb/">Web Sustainability Guidelines</a> (<abbr title="Web Sustainability Guidelines">WSGs</abbr>) were created to help individuals and businesses more easily obtain implementable advice that would have a sustainable benefit on their digital products and services. Previously, best practices were scattered and not easy to find with new resources appearing regularly. In this environment, keeping tabs on the latest information is challenging.</p>
<p>Plus, many of these resources do not weigh cited evidence with regulatory references that are aligned with common sustainability reporting standards. This makes it difficult for organizations to include the impact of digital products and services in reports they're already working on.</p>
<p>If you are aware of the World Wide Web Consortium's (<abbr title="World Wide Web Consortium">W3C</abbr>) Web Content Accessibility Guidelines [<cite><a class="bibref" data-link-type="biblio" href="#bib-wcag22" title="Web Content Accessibility Guidelines (WCAG) 2.2">WCAG22</a></cite>], it may not surprise you to know that the <abbr title="Web Sustainability Guidelines">WSGs</abbr> were inspired by them. As such, these guidelines can be considered very similar, except that our goal is to make the web more sustainable. Equally, if you've read a <abbr title="World Wide Web Consortium">W3C</abbr> specification, the <abbr title="Web Sustainability Guidelines">WSGs</abbr> will look familiar.</p>
<p>The <abbr title="Web Sustainability Guidelines">WSGs</abbr> are not only evidence-backed wherever possible but the work is also aligned with open standards from the Global Reporting Initiative (<abbr title="Global Reporting Initiative">[<cite><a class="bibref" data-link-type="biblio" href="#bib-gri" title="Global Reporting Initiative">GRI</a></cite>]</abbr>), in readiness for helping organizations meet compliance targets. This is especially relevant for upcoming legislation in the <abbr title="European Union">EU</abbr> (<abbr title="Corporate Sustainability Reporting Directive">[<cite><a class="bibref" data-link-type="biblio" href="#bib-csrd" title="Corporate sustainability reporting">CSRD</a></cite>]</abbr>), alongside additional standards and laws we aligned our work with. Hopefully, this will prove useful to drive change as part of a wider portfolio of evidence to reduce emissions and improve sustainability.</p>
</section>
<section id="incorporating-the-guidelines-into-your-work"><div class="header-wrapper"><h2 id="x6-incorporating-the-guidelines-into-your-work"><bdi class="secno">6. </bdi>Incorporating the Guidelines Into Your Work</h2><a class="self-link" href="#incorporating-the-guidelines-into-your-work" aria-label="Permalink for Section 6."></a></div>
<p>When utilizing the Web Sustainability Guidelines, a progress-over-perfection approach is advised. The specification is very long and may appear quite intimidating. However, if you examine the accompanying quick reference, the guidelines are a lot less dense than they might initially appear. The best way to get started is to scroll through the categories (picking which suits your skillset) and choose items that you feel you can make a mark on easily.</p>
<p>Also, the guidelines are written from the perspective of those who work on the web. For example, advisory guidelines in the web development section use technical terms common to that industry. User-experience design guidelines adopt the terminology of this discipline. And so on.</p>
<p>If the description, success criteria, or examples are confusing, expandable resources can help you delve into each topic with third parties providing explanatory details of how to implement and accomplish such tasks.</p>
<p>Finally, these guidelines are meant to help you get started quickly on a journey of continuous learning and improvement. You don't need to read or adopt them in a specific order or all at once.</p>
<p>Don't worry about getting things wrong or even if you can only do a couple of things—if we all made a few small changes to our own little corner of the web, this would make a huge difference! If you can scope out the time to drop in some more sustainability improvements later, great. If you can design sustainability into your process from the start, even better. However, it's something that will constantly evolve and need work.</p>
<p>Here are answers to some common questions about the guidelines.</p>
<section class="notoc"><div class="header-wrapper"><h3 id="what-can-people-do">What can people do?</h3><a class="self-link" href="#what-can-people-do" aria-label="Permalink for this Section"></a></div>
<p>Speak out on and learn about sustainability issues! If your organization isn't yet doing anything, propose an initiative and offer to train coworkers. If you work with partner organizations that could use help, offer to be that resource. Just be sure to meet them where they are. Web sustainability can be intimidating to newcomers. Offer to help get them started on their learning path.</p>
</section>
<section class="notoc"><div class="header-wrapper"><h3 id="what-can-designers-of-new-web-platform-features-do">What can designers of new web platform features do?</h3><a class="self-link" href="#what-can-designers-of-new-web-platform-features-do" aria-label="Permalink for this Section"></a></div>
<p>Make sure that tooling is accessible, performant, private by design, secure, non-exploitative, and powered by renewable energy. If your product or service is for the public good, ensure its infrastructure is tightly optimized and meets the <abbr title="Web Sustainability Guidelines">WSGs</abbr>. In turn, this will help you get a leg up on potential regulatory requirements down the line.</p>
</section>
<section class="notoc"><div class="header-wrapper"><h3 id="what-can-browsers-do">What can browsers do?</h3><a class="self-link" href="#what-can-browsers-do" aria-label="Permalink for this Section"></a></div>
<p>Browser makers have a few key opportunities: optimize their rendering processes as much as possible, reduce resource utilization, don't do anything unethical within a product, and keep improving developer tooling!</p>
</section>
<section class="notoc"><div class="header-wrapper"><h3 id="what-can-hardware-vendors-do">What can hardware vendors do?</h3><a class="self-link" href="#what-can-hardware-vendors-do" aria-label="Permalink for this Section"></a></div>
<p>Hardware vendors can improve software efficiency with their products, reduce production waste through circular economy practices, and increase product life cycles with a greater focus on maintenance.</p>
</section>
<section class="notoc"><div class="header-wrapper"><h3 id="what-can-regulators-do">What can regulators do?</h3><a class="self-link" href="#what-can-regulators-do" aria-label="Permalink for this Section"></a></div>
<p>Regulators can ensure that digital sustainability has a prominent role to play in both climate change modeling (due to its impact) and climate reduction targets (due to the significant economic and cultural force it has on the world's current and future population).</p>
</section>
</section>
<section id="resources"><div class="header-wrapper"><h2 id="x7-resources"><bdi class="secno">7. </bdi>Resources</h2><a class="self-link" href="#resources" aria-label="Permalink for Section 7."></a></div>
<p>Resources are for information purposes only, no endorsement is implied.</p>
<section class="notoc"><div class="header-wrapper"><h3 id="books">Books</h3><a class="self-link" href="#books" aria-label="Permalink for this Section"></a></div>
<details>
<summary>Show / Hide available resources.</summary>
<ul class="resources">
<li><a href="https://www.oreilly.com/library/view/building-green-software/9781098150617/">Building Green Software</a></li>
<li><a href="https://www.apc.org/sites/default/files/Community_networks_-_the_Internet_by_the_people_for_the_people_0.pdf">Community networks: The internet by the people, for the people</a> (<em>PDF</em>)</li>
<li><a href="https://decarbonise.digital/">Decarbonise Digital</a></li>
<li><a href="https://designaftercapitalism.org/">Design after Capitalism</a></li>
<li><a href="https://rosenfeldmedia.com/books/design-is-the-problem/">Design Is the Problem</a></li>
<li><a href="https://nathan.com/design-is-the-solution/">Design is the Solution</a></li>
<li><a href="https://www.oreilly.com/library/view/designing-for-sustainability/9781491935767/">Designing for Sustainability</a></li>
<li><a href="https://royalsociety.org/-/media/policy/projects/digital-technology-and-the-planet/digital-technology-and-the-planet-report.pdf">Digital technology and the planet</a> (<em>PDF</em>)</li>
<li><a href="https://ecoconceptionweb.com/">Ecoconception web: les 115 bonnes pratiques</a> (<em>French</em>)</li>
<li><a href="https://altreconomia.it/prodotto/ecologia-digitale/">Ecologia digitale</a> (<em>Italian</em>)</li>
<li><a href="https://link.springer.com/book/10.1007/978-3-642-19322-4">Energy-Efficient Computing and Networking</a></li>
<li><a href="https://www.smashingmagazine.com/printed-books/ethical-design-handbook/">Ethical Design Handbook</a></li>
<li><a href="https://inthecloud.withgoogle.com/go-green-software/software-guide.html">Google Go Green Software</a></li>
<li><a href="https://www.lulu.com/shop/green-code-lab/green-patterns-manuel-d%C3%A9co-conception-des-logiciels/ebook/product-18848920.html?page=1&pageSize=4">Green Patterns - Manuel d'éco-conception des logiciels</a> (<em>French</em>)</li>
<li><a href="https://hpbn.co/">High Performance Browser Networking</a></li>
<li><a href="https://www.unep.org/resources/publication/little-book-green-nudges">Little Book of Green Nudges</a></li>
<li><a href="https://link.springer.com/book/10.1007/978-3-658-41093-3">Nachhaltige Websites</a> (<em>German</em>)</li>
<li><a href="https://www.wiley.com/en-us/Packaging+Sustainability%3A+Tools%2C+Systems+and+Strategies+for+Innovative+Package+Design-p-9781119103868">Packaging Sustainability</a></li>
<li><a href="https://www.amazon.co.uk/Rare-Metals-War-transition-technologies/dp/1912854260">Rare Metals War: the dark side of clean energy and digital technologies</a></li>
<li><a href="https://webarchive.library.unt.edu/eot2008/20080916072444/http://www.usability.gov/pdfs/guidelines.html">Research-Based Web Design and Usability Guidelines</a></li>
<li><a href="https://theecommmanager.com/sustainable-ecommerce-handbook/">Sustainable Ecommerce Handbook</a></li>
<li><a href="https://www.wiley.com/en-us/Sustainable+Graphic+Design%3A+Tools%2C+Systems+and+Strategies+for+Innovative+Print+Design+-p-9780470640272">Sustainable Graphic Design</a></li>
<li><a href="https://abookapart.com/products/sustainable-web-design">Sustainable Web Design</a></li>
<li><a href="https://link.springer.com/book/10.1007/978-1-4614-7714-3">Sustainable Web Ecosystem Design</a></li>
<li><a href="https://gerrymcgovern.com/books/world-wide-waste/buy-the-book/">World Wide Waste</a></li>
</ul>
</details>
</section>
<section class="notoc"><div class="header-wrapper"><h3 id="magazines-discussion">Magazines / Discussion</h3><a class="self-link" href="#magazines-discussion" aria-label="Permalink for this Section"></a></div>
<details>
<summary>Show / Hide available resources.</summary>
<ul class="resources">
<li><a href="https://branch.climateaction.tech/issues/">Branch</a></li>
<li><a href="https://www.wholegraindigital.com/curiously-green/">Curiously Green</a></li>
<li><a href="https://greensoftware.foundation/">Green Software</a></li>
<li><a href="https://greeningdigital.substack.com/">Greening Digital</a></li>
<li><a href="https://spectrum.ieee.org/green-software">IEEE Spectrum</a> (Article)</li>
<li><a href="https://mailman3.ietf.org/mailman3/lists/[email protected]/">IETF E-Impact Discussion</a></li>
</ul>
</details>
</section>
<section class="notoc"><div class="header-wrapper"><h3 id="courses">Courses</h3><a class="self-link" href="#courses" aria-label="Permalink for this Section"></a></div>
<details>
<summary>Show / Hide available resources.</summary>
<ul class="resources">
<li><a href="https://www.accessibilityassociation.org/s/certification">Certified Professional in Web Accessibility (CWPA)</a></li>
<li><a href="https://online.unschools.co/collections/circular-economy">Circular Economy</a></li>
<li><a href="https://www.gaiaeducation.org/design-for-sustainability-en">Design for Sustainability & Regeneration (GEDS)</a></li>
<li><a href="https://www.fun-mooc.fr/en/courses/environmental-impacts-of-digital-technologies/">Environmental impacts of digital technologies MOOC</a></li>
<li><a href="https://www.hmntycntrd.com/self-paced-masterclass">Humanity-Centered Masterclass</a></li>
<li><a href="https://web.dev/learn/accessibility/">Learn Accessibility</a></li>
<li><a href="https://web.dev/learn/performance">Learn Performance</a></li>
<li><a href="https://sdgacademy.org/masters-pathway-in-foundations-of-sustainable-development/">SDG Masters Pathway</a></li>
<li><a href="https://online.unschools.co/collections/sustainability">Sustainability</a></li>
<li><a href="https://www.isit-academy.org/">Sustainable IT MOOC</a></li>
<li><a href="https://www.tomorrow.university/msc-sustainability-innovation-technology">Sustainability, Innovation & Technology (MSc)</a></li>
</ul>
</details>
</section>
<section class="notoc"><div class="header-wrapper"><h3 id="events">Events</h3><a class="self-link" href="#events" aria-label="Permalink for this Section"></a></div>
<details>
<summary>Show / Hide available resources.</summary>
<ul class="resources">
<li><a href="https://bits-und-baeume.org/">Bits & Bäume</a></li>
<li><a href="https://greenio.tech/conferences">Green IO</a></li>
<li><a href="https://ieee-sustech.org/">IEEE Sustech</a></li>
<li><a href="https://computingwithinlimits.org/">Limits</a></li>
</ul>
</details>
</section>
<section class="notoc"><div class="header-wrapper"><h3 id="media">Media</h3><a class="self-link" href="#media" aria-label="Permalink for this Section"></a></div>
<details>
<summary>Show / Hide available resources.</summary>
<ul class="resources">
<li><strong>Media</strong><ul>
<li><a href="https://www.youtube.com/watch?v=1tGSe_XxW8g">Digital Earth Experience Mark</a></li>
<li><a href="https://www.youtube.com/watch?v=ZEsKI41s6O0">EuroDIG 2017 - Drowning in data</a></li>
<li><a href="https://www.youtube.com/watch?v=P-d3d8DgqVA">Future Ethics with Cennydd Bowles at SustainableUX</a></li>
<li><a href="https://www.youtube.com/watch?v=quLFLH36Lro">How to be a djangonaut in a climate emergency</a></li>
<li><a href="https://www.youtube.com/watch?v=9dLmecsuwEY">How to make digital services more sustainable</a></li>
<li><a href="https://www.youtube.com/watch?v=VL8qpr9P4nE">Save Our World with Progressive Enhancement & Accessibility</a></li>
<li><a href="https://www.youtube.com/watch?v=qW75oJszcws">Sustainability and the Web: Are We Tweeting Our Way to a Warmer Planet?</a></li>
<li><a href="https://www.youtube.com/watch?v=o-eE6qKGeIE">Understanding Sustainable Web Design</a></li>
</ul></li>
<li><strong>Podcast</strong><ul>
<li><a href="https://podcasts.castplus.fm/environment-variables">Environment Variables</a></li>
<li><a href="https://podcasts.castplus.fm/greenio">Green IO Podcast</a></li>
<li><a href="https://greentheweb.com/podcast/">Green The Web</a></li>
<li><a href="https://sustainwp.com/">Sustain WP</a></li>
<li><a href="https://www.greenelement.co.uk/podcasts/">Sustainability Solved</a></li>
<li><a href="https://creators.spotify.com/pod/show/suxpodcast">Sustainable UX</a></li>
<li><a href="https://dr-beyer.de/news/podcast.php">Web, But Green!</a> (<em>German</em>)</li>
</ul></li>
<li><strong>Episode</strong><ul>
<li><a href="https://mattreport.com/can-wordpress-save-the-planet/">Can WordPress save the planet?</a></li>
<li><a href="https://constantvariables.co/episodes/74">Creating Sustainable Digital Products with Tom Greenwood of Wholegrain Digital</a></li>
<li><a href="https://creators.spotify.com/pod/show/sustrain-daily/episodes/EP-10-Digital-Carbon-Footprint-eigvvv">Digital Carbon Footprint</a></li>
<li><a href="https://creators.spotify.com/pod/show/sustainabilityexplored/episodes/Digital-Carbon-Footprint--How-to-Measure-It--Interview-with-Frank-Meehan-from-Equilibrium-World-el95r9">Digital Carbon Footprint & How to Measure It</a></li>
<li><a href="https://www.teamhuman.fm/episodes/david-jensen-eliane-ubalijoro">Éliane Ubalijoro & David Jensen</a></li>
<li><a href="https://irlpodcast.org/season5/episode3/">Internet's Carbon Footprint</a></li>
<li><a href="https://talkingdrupal.com/373">Performance, Privacy, and the Open Web</a></li>
<li><a href="https://talkingdrupal.com/348">Website's Carbon Footprint</a></li>
<li><a href="https://shoptalkshow.com/606/">Web Sustainability with Michelle Barker</a></li>
<li><a href="https://insidedatacentre.buzzsprout.com/1223072/episodes/9954954-john-booth-carbon3it-ltd-what-is-sustainability">What is sustainability?</a></li>
<li><a href="https://creators.spotify.com/pod/show/tech-tip-tuesdays/episodes/Why-should-you-care-about-your-digital-carbon-footprint-eubdok">Why should you care about your digital carbon footprint?</a></li>
<li><a href="https://shows.acast.com/climate-podcast/episodes/yourdigitshaveafootprint">Your digits have a footprint</a></li>
</ul></li>
<li><strong>Presentation</strong><ul>
<li><a href="https://docs.google.com/presentation/d/1XWdCVYAzTuUDi--SVd8Je8hiKpITNuCM/edit">How to design a green digital product</a></li>
<li><a href="https://archive.fosdem.org/2023/schedule/event/energy_power_profiling_firefox/">Power profiling with the Firefox Profiler</a></li>
<li><a href="https://noti.st/er1p/vaFRbG/sustainability-all-the-way-down">Sustainability All The Way Down</a></li>
<li><a href="https://docs.google.com/presentation/d/1OTXaz3RuV0HWgM754PRMUC7d2KYVHH974s5hnAt53wk/edit">Sustainable UX in VR</a></li>
<li><a href="https://oursustainablewp.org/">Sustainable WP</a></li>
</ul></li>
</ul>
</details>
</section>
<section class="notoc"><div class="header-wrapper"><h3 id="websites">Websites</h3><a class="self-link" href="#websites" aria-label="Permalink for this Section"></a></div>
<details>
<summary>Show / Hide available resources.</summary>
<ul class="resources">
<li><a href="https://anotherdesign11.wixsite.com/website">Another Design</a></li>
<li><a href="https://climateaction.tech/">Climate Action.tech</a></li>
<li><a href="https://www.climatedesigners.org/">Climate Designers</a></li>
<li><a href="https://www.codes.global/">CODES</a></li>
<li><a href="https://css-irl.info/tags/web-sustainability/">CSS: In Real Life</a></li>
<li><a href="https://davidmytton.blog/">David Mytton</a></li>
<li><a href="https://www.designgigsforgood.org/">Design Gigs For Good</a></li>
<li><a href="https://designsustainably.eu/">Design Sustainably</a></li>
<li><a href="https://dodonut.com/category/sustainability/">DoDonut</a></li>
<li><a href="https://ecofriendlyweb.org/">Eco Friendly Web Alliance</a></li>
<li><a href="https://unep.ecoinnovation.org/activities/">Eco Innovation Manual</a></li>
<li><a href="https://ethicaldesignnetwork.com/">Ethical Design Network</a></li>
<li><a href="https://gauthierroussilhe.com/en/articles">Gauthier Roussilhe</a> (<em>French</em>)</li>
<li><a href="https://gerrymcgovern.com/">Gerry McGovern</a></li>
<li><a href="https://www.greendesign.io/">Green Design</a></li>
<li><a href="https://thegreenpages.bima.co.uk/">Green Pages</a></li>
<li><a href="https://linktr.ee/digitalfuturestold">Green Software Carbon Hack 24</a></li>
<li><a href="https://greentheweb.com/">Green The Web</a></li>
<li><a href="https://climate-tech.getoutline.com/s/2f3c5ad4-fee5-490b-8ecc-740c6f048ac8">Greener Design</a></li>
<li><a href="https://www.england.nhs.uk/greenernhs/">Greener NHS</a></li>
<li><a href="https://greenspector.com/en/blog-2/">Greenspector</a></li>
<li><a href="https://indieweb.org/green_computing">IndieWeb Green Computing</a></li>
<li><a href="https://amsterdameconomicboard.com/en/initiative/leap/">LEAP</a></li>
<li><a href="https://www.mightybytes.com/blog/sustainable-web-design/">MightyBytes</a></li>
<li><a href="https://nachhaltiges-webdesign.jetzt/">Nachhaltiges Webdesign</a> (<em>German</em>)</li>
<li><a href="https://permacomputing.net/Principles/">PermaComputing Principles</a></li>
<li><a href="https://www.piano-d.it/category/sostenibilita-digitale/">Piano D</a> (<em>Italian</em>)</li>
<li><a href="https://stevesouders.com/">Steve Souders</a></li>
<li><a href="https://www.sustainabledesignhandbook.com/">Sustainable Design Handbook</a></li>
<li><a href="https://the-sustainable.dev/">Sustainable Dev</a></li>
<li><a href="https://sdialliance.org/roadmap/">SDIA Roadmap</a></li>
<li><a href="https://sustainableuxnetwork.com/#playbook">Sustainable UX Playbook</a></li>
<li><a href="https://sustainablevirtualdesign.wordpress.com/">Sustainable Virtual Design</a></li>
<li><a href="https://tomjarrett.earth/">Tom Jarrett</a></li>
<li><a href="https://www.wholegraindigital.com/blog/">Wholegrain Digital</a></li>
</ul>
</details>
</section>
<section class="notoc"><div class="header-wrapper"><h3 id="tools">Tools</h3><a class="self-link" href="#tools" aria-label="Permalink for this Section"></a></div>
<details>
<summary>Show / Hide available resources.</summary>
<ul class="resources">
<li><strong>Assessment</strong><ul>
<li><a href="https://www.deque.com/axe/">aXe Accessibility</a></li>
<li><a href="https://aremythirdpartiesgreen.com/">Are My Third Parties Green?</a></li>
<li><a href="https://digitalbeacon.co/">Beacon</a></li>
<li><a href="https://builtwith.com/">Built With</a></li>
<li><a href="https://carbonneutralwebsite.org/">Carbon Neutral Website</a></li>
<li><a href="https://github.com/lfwa/carbontracker">Carbon Tracker</a></li>
<li><a href="https://www.cloudcarbonfootprint.org/">Cloud Carbon Footprint</a></li>
<li><a href="https://www.thegreenwebfoundation.org/co2-js/">Co2.js</a></li>
<li><a href="https://codecarbon.io/">Code Carbon</a></li>
<li><a href="https://dataviz.boavizta.org/">Datavizta</a></li>
<li><a href="https://www3.epa.gov/carbon-footprint-calculator/">Carbon Footprint Calculator</a></li>
<li><a href="https://ecograder.com/">Ecograder</a></li>
<li><a href="https://www.ecoindex.fr/">EcoIndex</a></li>
<li><a href="https://www.thegreenwebfoundation.org/">Green Host Checker</a></li>
<li><a href="https://greenframe.io/">GreenFrame</a></li>
<li><a href="https://github.com/cnumr/GreenIT-Analysis">GreenIT Analysis</a></li>
<li><a href="https://github.com/thegreenwebfoundation/web-extension">Green Web Extension</a></li>
<li><a href="https://app.greenweb.org/directory/">GWF Directory</a></li>
<li><a href="https://www.imagecarbon.com/">Image Carbon</a></li>
<li><a href="https://if.greensoftware.foundation/">Impact Framework</a></li>
<li><a href="https://kastor.green/">Kastor</a></li>
<li><a href="https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk">Lighthouse</a></li>
<li><a href="https://mlco2.github.io/impact/">ML Co2 Impact</a></li>
<li><a href="https://www.privacytools.io/">Privacy Tools</a></li>
<li><a href="https://readabilityformulas.com/readability-scoring-system.php">Readability Checker</a></li>
<li><a href="https://www.webfx.com/tools/read-able/">Readable</a></li>
<li><a href="https://www.sitigreen.it/">SitiGreen</a></li>
<li><a href="https://unlighthouse.dev/">Unlighthouse</a></li>
<li><a href="https://www.nolesserpanda.com/pages/video-conference-carbon-calculator.php">Video Calls Calculator</a></li>
<li><a href="https://validator.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr> Markup Validator</a></li>
<li><a href="https://wave.webaim.org/">WAVE Accessibility</a></li>
<li><a href="https://websustainabilityindex.com/about">Web Sustainability Index</a></li>
<li><a href="https://webhint.io/">WebHint</a></li>
<li><a href="https://www.webpagetest.org/">WebPageTest</a></li>
<li><a href="https://www.websitecarbon.com/">Website Carbon</a></li>
</ul></li>
<li><strong>Utilities</strong><ul>
<li><a href="https://opensustain.tech/">Open Sustainable Technology</a></li>
<li><a href="https://github.com/Boavizta/cloud-scanner">Cloud Scanner</a></li>
<li><a href="https://datavizta.boavizta.org/">Datavizta</a></li>
<li><a href="https://www.ecosia.org/">Ecosia</a></li>
<li><a href="https://app.electricitymaps.com/map?solar=false&remote=true&wind=false">Electricity Maps</a></li>
<li><a href="https://github.com/Boavizta/Energizta">Energizta</a></li>
<li><a href="https://www.microsoft.com/en-us/sustainability/emissions-impact-dashboard">Emissions Impact Dashboard</a></li>
<li><a href="https://ethical.net/resources/?resource-category=web-hosting">Ethical</a></li>
<li><a href="https://ethicalrevolution.co.uk/">Ethical Revolution</a></li>
<li><a href="https://globemallow.io/">Globemallow</a></li>
<li><a href="https://github.com/Adora-Foundation/awesome-green-extensions">Green Extensions</a></li>
<li><a href="https://github.com/lowwebtech/low-web-extension">Low Web Extension</a></li>
<li><a href="https://lune.co/">Lune</a></li>
<li><a href="https://github.com/hubblo-org/scaphandre">Scaphandre</a></li>
<li><a href="https://scope3.com/">Scope3</a></li>
<li><a href="https://wikirate.org/">Wikirate</a></li>
<li><a href="https://www.utilitybidder.co.uk/business-electricity/zoom-emissions/">Zoom Emissions</a></li>
</ul></li>
</ul>
</details>
</section>
<section class="notoc"><div class="header-wrapper"><h3 id="metrics">Metrics</h3><a class="self-link" href="#metrics" aria-label="Permalink for this Section"></a></div>
<details>
<summary>Show / Hide available resources.</summary>
<ul class="resources">
<li><a href="https://greensoftware.foundation/articles/emission-calculations-through-large-language-model">Emission Calculations through Large Language Model</a></li>
<li><a href="https://wfanet.org/l/library/download/urn:uuid:f9ed9222-4263-44ad-8b11-4b15e50da945/garm_anz_digital_channelemissionsframeworkformula_v1.0.pdf?redirected=1718971909">GARM: Channel Emissions Framework and Formula</a> (<em>PDF</em>)</li>
<li><a href="https://www.etsy.com/codeascraft/cloud-jewels-estimating-kwh-in-the-cloud">Cloud Jewels: Estimating kWh in the Cloud</a></li>
<li><a href="https://www.thegreenwebfoundation.org/news/data-sources-for-calculating-digital-emissions/">Data Sources For Calculating Digital Emissions</a></li>
<li><a href="https://marmelab.com/blog/2022/04/05/greenframe-compare.html">Digital Carbon Footprint: The Current State of Measuring Tools</a></li>
<li><a href="https://www.ecoindex.fr/comment-ca-marche/">EcoIndex: How it works?</a></li>
<li><a href="https://sustainablewebdesign.org/estimating-digital-emissions/">Estimating Digital Emissions</a></li>
<li><a href="https://fershad.com/writing/improving-the-accuracy-of-website-carbon-emissions-estimates/">Improving the accuracy of website carbon emissions estimates</a></li>
<li><a href="https://www.fershad.com/writing/including-user-interaction-in-website-carbon-estimates/">Including user interaction in website carbon estimates</a></li>
<li><a href="https://www.the-public-good.com/web-development/measuring-the-web">Measuring The Web</a></li>
<li>Network energy use not directly proportional to data volume [<cite><a class="bibref" data-link-type="biblio" href="#bib-network" title="Network energy use not directly proportional to data volume">NETWORK</a></cite>]</li>
<li><a href="https://circleid.com/posts/20170321_shedding_light_on_how_much_energy_internet_and_ict_consume/">Shedding Light on How Much Energy the Internet and ICTs Consume</a></li>
<li><a href="https://screenspan.net/talks/green-perf-metric/">Why We Need a Green Perf Metric</a></li>
<li><a href="https://calendar.perfplanet.com/2023/why-web-perf-tools-should-be-reporting-website-carbon-emissions/"> Why web perf tools should be reporting website carbon emissions</a></li>
</ul>
</details>
</section>
</section>
<section class="appendix" id="acknowledgments"><div class="header-wrapper"><h2 id="a-acknowledgments"><bdi class="secno">A. </bdi>Acknowledgments</h2><a class="self-link" href="#acknowledgments" aria-label="Permalink for Appendix A."></a></div>
<p>Additional information about participation in the Sustainable Web Design Community Group (SWD-CG) can be found <a href="https://www.w3.org/community/sustyweb/wiki/Main_Page">within the wiki</a> of the community group.</p>
<section id="participants-of-the-swd-cg-active-in-the-development-of-this-document"><div class="header-wrapper"><h3 id="a-1-participants-of-the-swd-cg-active-in-the-development-of-this-document"><bdi class="secno">A.1 </bdi>Participants of the SWD-CG Active in the Development of This Document</h3><a class="self-link" href="#participants-of-the-swd-cg-active-in-the-development-of-this-document" aria-label="Permalink for Appendix A.1"></a></div>
<p>Alexander Dawson, Dennis Lemm, Gael Duez, Laurent Devernay, Łukasz Mastalerz, Mike Gifford, Nahuai Badiola, Nick Doty, Nicola Bonotto, Tim Frick, Torsten Beyer</p>
</section>
</section>
<section id="references" class="appendix"><div class="header-wrapper"><h2 id="b-references"><bdi class="secno">B. </bdi>References</h2><a class="self-link" href="#references" aria-label="Permalink for Appendix B."></a></div><section id="informative-references"><div class="header-wrapper"><h3 id="b-1-informative-references"><bdi class="secno">B.1 </bdi>Informative references</h3><a class="self-link" href="#informative-references" aria-label="Permalink for Appendix B.1"></a></div>
<dl class="bibliography"><dt id="bib-csrd">[CSRD]</dt><dd>
<a href="https://finance.ec.europa.eu/capital-markets-union-and-financial-markets/company-reporting-and-auditing/company-reporting/corporate-sustainability-reporting_en"><cite>Corporate sustainability reporting</cite></a>. European Commission. 05 January 2023. Informational. URL: <a href="https://finance.ec.europa.eu/capital-markets-union-and-financial-markets/company-reporting-and-auditing/company-reporting/corporate-sustainability-reporting_en">https://finance.ec.europa.eu/capital-markets-union-and-financial-markets/company-reporting-and-auditing/company-reporting/corporate-sustainability-reporting_en</a>
</dd><dt id="bib-gri">[GRI]</dt><dd>
<a href="https://www.globalreporting.org/standards/"><cite>Global Reporting Initiative</cite></a>. GRI. Informational. URL: <a href="https://www.globalreporting.org/standards/">https://www.globalreporting.org/standards/</a>
</dd><dt id="bib-manifesto">[MANIFESTO]</dt><dd>
<a href="https://www.sustainablewebmanifesto.com/"><cite>Sustainable Web Manifesto</cite></a>. Sustainable Web Manifesto. Informational. URL: <a href="https://www.sustainablewebmanifesto.com/">https://www.sustainablewebmanifesto.com/</a>
</dd><dt id="bib-network">[NETWORK]</dt><dd>
<a href="https://onlinelibrary.wiley.com/doi/10.1111/jiec.13512"><cite>Network energy use not directly proportional to data volume</cite></a>. David Mytton, Dag Lundén, and Jens Malmodin. 21 June 2024. Informational. URL: <a href="https://onlinelibrary.wiley.com/doi/10.1111/jiec.13512">https://onlinelibrary.wiley.com/doi/10.1111/jiec.13512</a>
</dd><dt id="bib-un">[UN]</dt><dd>
<a href="https://www.un.org/en/academic-impact/sustainability"><cite>Sustainability</cite></a>. United Nations. Informational. URL: <a href="https://www.un.org/en/academic-impact/sustainability">https://www.un.org/en/academic-impact/sustainability</a>
</dd><dt id="bib-wcag22">[WCAG22]</dt><dd>
<a href="https://www.w3.org/TR/WCAG22/"><cite>Web Content Accessibility Guidelines (WCAG) 2.2</cite></a>. Michael Cooper; Andrew Kirkpatrick; Alastair Campbell; Rachael Bradley Montgomery; Charles Adams. W3C. 12 December 2024. W3C Recommendation. URL: <a href="https://www.w3.org/TR/WCAG22/">https://www.w3.org/TR/WCAG22/</a>
</dd></dl>
</section></section><p role="navigation" id="back-to-top">
<a href="#title"><abbr title="Back to Top">↑</abbr></a>
</p><script id="respec-dfn-panel">(() => {
// @ts-check
if (document.respec) {
document.respec.ready.then(setupPanel);
} else {
setupPanel();
}
function setupPanel() {
const listener = panelListener();
document.body.addEventListener("keydown", listener);
document.body.addEventListener("click", listener);
}
function panelListener() {
/** @type {HTMLElement} */
let panel = null;
return event => {
const { target, type } = event;
if (!(target instanceof HTMLElement)) return;
// For keys, we only care about Enter key to activate the panel
// otherwise it's activated via a click.
if (type === "keydown" && event.key !== "Enter") return;
const action = deriveAction(event);
switch (action) {
case "show": {
hidePanel(panel);
/** @type {HTMLElement} */
const dfn = target.closest("dfn, .index-term");
panel = document.getElementById(`dfn-panel-for-${dfn.id}`);
const coords = deriveCoordinates(event);
displayPanel(dfn, panel, coords);
break;
}
case "dock": {
panel.style.left = null;
panel.style.top = null;
panel.classList.add("docked");
break;
}
case "hide": {
hidePanel(panel);
panel = null;
break;
}
}
};
}
/**
* @param {MouseEvent|KeyboardEvent} event
*/
function deriveCoordinates(event) {
const target = /** @type HTMLElement */ (event.target);
// We prevent synthetic AT clicks from putting
// the dialog in a weird place. The AT events sometimes
// lack coordinates, so they have clientX/Y = 0
const rect = target.getBoundingClientRect();
if (
event instanceof MouseEvent &&
event.clientX >= rect.left &&
event.clientY >= rect.top
) {
// The event probably happened inside the bounding rect...
return { x: event.clientX, y: event.clientY };
}
// Offset to the middle of the element
const x = rect.x + rect.width / 2;
// Placed at the bottom of the element
const y = rect.y + rect.height;
return { x, y };
}
/**
* @param {Event} event
*/
function deriveAction(event) {
const target = /** @type {HTMLElement} */ (event.target);
const hitALink = !!target.closest("a");
if (target.closest("dfn:not([data-cite]), .index-term")) {
return hitALink ? "none" : "show";
}
if (target.closest(".dfn-panel")) {
if (hitALink) {
return target.classList.contains("self-link") ? "hide" : "dock";
}
const panel = target.closest(".dfn-panel");
return panel.classList.contains("docked") ? "hide" : "none";
}
if (document.querySelector(".dfn-panel:not([hidden])")) {
return "hide";
}
return "none";
}
/**
* @param {HTMLElement} dfn
* @param {HTMLElement} panel
* @param {{ x: number, y: number }} clickPosition
*/
function displayPanel(dfn, panel, { x, y }) {
panel.hidden = false;
// distance (px) between edge of panel and the pointing triangle (caret)
const MARGIN = 20;
const dfnRects = dfn.getClientRects();
// Find the `top` offset when the `dfn` can be spread across multiple lines
let closestTop = 0;
let minDiff = Infinity;
for (const rect of dfnRects) {
const { top, bottom } = rect;
const diffFromClickY = Math.abs((top + bottom) / 2 - y);
if (diffFromClickY < minDiff) {
minDiff = diffFromClickY;
closestTop = top;
}
}
const top = window.scrollY + closestTop + dfnRects[0].height;
const left = x - MARGIN;
panel.style.left = `${left}px`;
panel.style.top = `${top}px`;
// Find if the panel is flowing out of the window
const panelRect = panel.getBoundingClientRect();
const SCREEN_WIDTH = Math.min(window.innerWidth, window.screen.width);
if (panelRect.right > SCREEN_WIDTH) {
const newLeft = Math.max(MARGIN, x + MARGIN - panelRect.width);
const newCaretOffset = left - newLeft;
panel.style.left = `${newLeft}px`;
/** @type {HTMLElement} */
const caret = panel.querySelector(".caret");
caret.style.left = `${newCaretOffset}px`;
}
// As it's a dialog, we trap focus.
// TODO: when <dialog> becomes a implemented, we should really
// use that.
trapFocus(panel, dfn);
}
/**
* @param {HTMLElement} panel
* @param {HTMLElement} dfn
* @returns
*/
function trapFocus(panel, dfn) {
/** @type NodeListOf<HTMLAnchorElement> elements */
const anchors = panel.querySelectorAll("a[href]");
// No need to trap focus
if (!anchors.length) return;
// Move focus to first anchor element
const first = anchors.item(0);
first.focus();
const trapListener = createTrapListener(anchors, panel, dfn);
panel.addEventListener("keydown", trapListener);
// Hiding the panel releases the trap
const mo = new MutationObserver(records => {
const [record] = records;
const target = /** @type HTMLElement */ (record.target);
if (target.hidden) {
panel.removeEventListener("keydown", trapListener);
mo.disconnect();
}
});
mo.observe(panel, { attributes: true, attributeFilter: ["hidden"] });
}
/**
*
* @param {NodeListOf<HTMLAnchorElement>} anchors
* @param {HTMLElement} panel
* @param {HTMLElement} dfn
* @returns
*/
function createTrapListener(anchors, panel, dfn) {
const lastIndex = anchors.length - 1;
let currentIndex = 0;
return event => {
switch (event.key) {
// Hitting "Tab" traps us in a nice loop around elements.
case "Tab": {
event.preventDefault();
currentIndex += event.shiftKey ? -1 : +1;
if (currentIndex < 0) {
currentIndex = lastIndex;
} else if (currentIndex > lastIndex) {
currentIndex = 0;
}
anchors.item(currentIndex).focus();
break;
}
// Hitting "Enter" on an anchor releases the trap.
case "Enter":
hidePanel(panel);
break;
// Hitting "Escape" returns focus to dfn.
case "Escape":
hidePanel(panel);
dfn.focus();
return;
}
};
}
/** @param {HTMLElement} panel */
function hidePanel(panel) {
if (!panel) return;
panel.hidden = true;
panel.classList.remove("docked");
}
})()</script><script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script></body></html>