-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
82 lines (82 loc) · 7.41 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Sustainability - Research & Tools for Web Developers</title>
<meta name="description" content="The web is a major source of carbon emissions. This site provides independent research to help web developers make their products more sustainable.">
<link rel="preload" as="font" type="font/woff2" crossorigin href="cache/fonts/SourceSerifPro-Regular.woff2">
<link rel="preload" as="font" type="font/woff2" crossorigin href="cache/fonts/SourceSerifPro-Italic.woff2">
<link rel="preload" as="font" type="font/woff2" crossorigin href="cache/fonts/SourceSerifPro-SemiBold.woff2">
<link rel="preload" as="font" type="font/woff2" crossorigin href="cache/fonts/SourceSerifPro-Bold.woff2">
<link rel="stylesheet" href="cache/style.css">
<link rel="author" type="text/plain" href="humans.txt">
<meta name="referrer" content="no-referrer">
<meta name="apple-mobile-web-app-title" content="Sustainability">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" href="favicon.ico" sizes="32x32">
<link rel="icon" type="image/svg+xml" href="images/icon.svg">
<link rel="manifest" href="site.webmanifest">
<meta name="msapplication-config" content="browserconfig.xml">
<meta name="theme-color" content="#48ba80">
<meta name="msapplication-config" content="browserconfig.xml">
<meta property="og:title" content="Website Sustainability">
<meta property="og:description" content="The web is a major source of carbon emissions. This site provides independent research to help web developers make their products more sustainable.">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_us">
<meta property="og:url" content="https://websitesustainability.com/">
<meta property="og:image" content="images/banner.png">
<meta property="og:image:alt" content="Logo">
<script async src="cache/script.js"></script>
<script type="application/ld+json">
{
"@context" : "https://schema.org",
"@type" : "WebSite",
"name": "Website Sustainability",
"url": "https://websitesustainability.com/"
}
</script>
</head>
<body class="body">
<header class="header">
<a class="logo" href="index.html"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M9.5 20C4.42 20 1 16.99 1 12.5 1 9.04 3.1 1 22.5 1a.5.5 0 0 1 .35.85A16.93 16.93 0 0 0 18 10.61C17.27 13.89 15.92 20 9.5 20ZM21.32 2.01C3.92 2.31 2 9.41 2 12.5 2 16.39 5.01 19 9.5 19c5.18 0 6.6-4.44 7.51-8.6.88-4 2.66-6.57 4.31-8.39Z" style="fill:#48ba80;"/><path d="M1.5 23a.5.5 0 0 1-.5-.5C1 19.53 6.16 9.99 14.28 6.05a.5.5 0 0 1 .72.45c0 .2-.1.37-.28.45C6.52 10.93 2 20.16 2 22.5a.5.5 0 0 1-.5.5Z" style="fill:#48ba80;"/></svg></a>
<h1 class="heading">Website Sustainability</h1>
<p class="subtitle">Research & Tools for Web Developers</p>
<nav class="nav">
<ul>
<li class="item"><a href="#content">Content</a></li>
<li class="item"><a href="#about">About</a></li>
</ul>
</nav>
</header>
<main>
<article class="page" id="content">
<h2 class="head">Content</h2>
<h3 class="region">Research</h3>
<ul class="list">
<li class="items"><a class="inner" href="cache/files/research23.pdf">The Carbon Impact of Web Standards (2023)</a> - A systematic investigation into the carbon impact of Web Standards such as front-end HTML and CSS; which have a cumulative impact upon how high the emissions of a website, service, or web application are. <br><a class="inner" href="cache/files/research23.pdf">PDF</a> (Paper), <a class="inner" href="cache/files/research23.zip">Zip</a> (Paper, Data, Tests).</li>
<li class="items"><a class="inner" href="cache/files/variables.pdf">The Variables of Web Sustainability (2023)</a> - A comprehensive map of the carbon traps which exist on the Internet. From development and rendering to business and external elements, this evergreen visual representation showcases the plumbing of energy usage.<br><a class="inner" href="cache/files/variables.pdf">PDF</a> (Visualization).</li>
</ul>
</article>
<article class="page" id="about">
<h2 class="head">About</h2>
<h3 class="region">Website</h3>
<p class="txt">This website is primarily focused on the subject of Web sustainability. It's an emerging field and there are loads about sustainability that we just don't know about yet; so if you're looking to specialize, or if you're interested in launching some sort of open source project, or starting a research study, or another endeavor that might be of interest to the community, please dive in (and let me know as I'm always interested in passing on the word of great new stuff).</p>
<p class="txt">From the amount of carbon you utilize (among other resources) in developing a website (solo or as part of a business), to getting it hosted online, to sending that data down the tube, to it being rendered by the web browser on a device (which had to be manufactured), to read by a visitor (who will have carbon emissions of their own); the journey to being carbon-neutral isn't an easy one, nor is it simple to map out. But sustainability is about small steps, making progress and nudges in the right direction as we make the world cleaner and greener.</p>
<h3 class="region">Author</h3>
<p class="txt">Alexander Dawson is an experienced Web Developer who initially came from a background in inclusive design. From promoting best practices in front-end development and upholding the best interests of those who may struggle to access websites or apps, his attention soon got turned to the climate crisis upon recognizing that this issue would ultimately impact at-risk groups (such as those with accessibility issues) severely. With a dual focus of promoting Sustainability and Accessibility, he hopes to push the Web to become more inclusive.</p>
</article>
<article class="about" id="home">
<h2 class="head">Home</h2>
<h3 class="region">Introduction</h3>
<p class="txt">If you're a Web Developer or Designer looking to change the world (for the better), look no further. This website has been explicitly created as a resource to host the research, content, and tools I produce with a specific subject in mind - Web Sustainability. The Internet is a giant emitter of carbon, and as the curators of all things digital, we have a responsibility to reduce our impact online (to help save the planet offline). Small changes matter, so feel free to join the climate challenge, and I hope my resources are of use to you on your journey.</p>
<p class="txt">If you believe that you can help make the Internet more sustainable, please join our friendly <a class="url" href="https://www.w3.org/community/sustyweb/">W3C Community Group</a> as we're working to produce sustainability guidelines for the Web. In fact, we've recently got a <a class="url" href="https://w3c.github.io/sustyweb/">public draft</a> version live for you to examine, offer feedback, or even implement (as an early adopter)! If you want a quick intro, see our <a class="url" href="https://w3c.github.io/sustyweb/glance.html">at-a-glance</a> supplement.</p>
</article>
</main>
<footer class="footer">
<p class="copyright">Copyright, <span>2024</span></p>
<p class="build">Built by <a href="https://alexanderdawson.com">Alex Dawson</a>.</p>
</footer>
</body>
</html>