# Designing for a Sustainable Web 🕸️ 🍃
__[presentation and workshop by Joana Chicau](https://joanachicau.com/)__

_@ Digital Innovation Season '22 at Central Saint Martins;_

**Joana Chicau** is a designer and researcher — with a background in dance. She researches the intersection of the body with the designed and programmed environment, aiming at widening the ways in which digital sciences is presented and made accessible to the public. The latter informs a practice and exploration of various forms and formats — interweaving web programming with choreography — from the making of online platforms to performances and workshops.
She has been participating and co-organizing events involving collaborative coding, algorithmic improvisation, open discussions on digital equity and activism. Chicau is pursuing a PhD and lecturing at the University of Arts of London.

Web: [joanachicau.com](https://joanachicau.com/)

## ..⌒－→ Presentation …………

__Have you ever thought about what the carbon footprint of your portfolio website is?__

Just like various daily activities, the act of accessing a website might also contribute to Co2 emissions. This talk will focus on design strategies for reducing the energy consumption of the websites we make.
We will look into examples of projects and practitioners in the field of design and activism. And how through climate conscious web design practices we can build a more sustainable futures for the web.


[Source: DEFOOOOOOOOOOOOOOOOOOOOOREST by Joana Moll](https://www.janavirgin.com/CO2/DEFOOOOOOOOOOOOOOOOOOOOOREST.html), read more [here](https://www.janavirgin.com/CO2/DEFOOOOOOOOOOOOOOOOOOOOOREST_about.html).

> "…by first dismantling the idea that digital experiences are exempt from environmental costs. We create digital litter that has tangible consequences, manifesting as greenhouse gas emissions and factory waste." Rachel He in [Sustainable Web by Tom Greenwood](https://abookapart.com/products/sustainable-web-design)

> The internet is the world’s largest machine, and it continues to significantly contribute to these emissions. If we continue business-as-usual, the IT sector will be responsible for 14% of the world’s carbon emissions by 2040 [Source: Harvard Business Review, 2020](https://hbr.org/2020/09/how-green-is-your-software).

Big Tech announced its climate pledges:

<ul><li>Google: <a href="https://blog.google/outreach-initiatives/sustainability/our-third-decade-climate-action-realizing-carbon-free-future">completely carbon-free energy 24/7 in its data centers and campuses by 2030</a>&nbsp;</li><li>Amazon: operations running with renewable energy by 2025 and <a href="https://sustainability.aboutamazon.com/about/the-climate-pledge">reach net-zero emissions by 2040</a></li><li>Microsoft: <a href="https://www.theverge.com/2021/1/28/22254483/microsoft-climate-change-pledge-update-carbon-dioxide-removal">carbon negative by 2030</a> </li><li>Apple: <a href="https://www.nytimes.com/2020/07/21/climate/apple-emissions-pledge.html">cut 75% of emissions by 2030 across entire supply chain</a> and use carbon removal technologies to compensate for the remaining emissions.&nbsp;</li><li>Facebook: <a href="https://sustainability.fb.com/our-climate-commitment/">net-zero emissions across supply chain by 2030.</a></li></ul>

[Source: A movement to green the web by Michelle Thorne](https://michellethorne.cc/2021/02/a-movement-to-green-the-web/)


[Source: Financial Times](https://www.ft.com/content/0c69d4a4-2626-418d-813c-7337b8d5110d)

### "Greening Big Tech is not enough"

> We need to go beyond tech solutionism and towards intersectional climate justice work. We need to go beyond individual action. We need to shift the power of systemic inequalities, hold major polluters to account, and dismantle the forces—financial, political and cultural—that hold us back from a greener internet and a more sustainable society.

> There is a growing body of research about how we can green the internet. However, this research rarely tells us what impactful action internet professionals can take in their daily practice, let alone how to connect their technical decisions with the cause of climate justice.

[Source: A movement to green the web by Michelle Thorne](https://michellethorne.cc/2021/02/a-movement-to-green-the-web/)


Sustainable web design is an approach to designing web services that prioritizes the health of our home planet. At its core is a focus on reducing carbon emissions and energy consumption. Read here the [Sustainable Web Manifesto](https://www.sustainablewebmanifesto.com/).

### Study cases


[Source: solar.lowtechmagazine](https://solar.lowtechmagazine.com/about.html)

#### Other low-tech websites:

)→ [Low-tech Magazine’s Solar-Powered Website is Rewriting the Rules of Web Design](https://eyeondesign.aiga.org/low-tech-magazines-solar-powered-website-is-rewriting-the-rules-of-web-design/)

)→ [The Solar Powered Media](https://wp.nyu.edu/solarpoweredmedia/)

)→ [Forma Fantasma](https://formafantasma.com/website)

)→ [lowimpact Organic Basics](https://lowimpact.organicbasics.com/gbp#manifesto)

)→ [Low Tech Lab](https://lowtechlab.org/en/news-blog/le-low-tech-lab-lance-son-site-internet-low-tech)


[Solar Protocol: this website is hosted across a network of solar powered servers and is sent to you from wherever there is the most sunshine. ](http://solarprotocol.net/)


[Rhizome Climate Impact Portal ](https://rhizome.org/climate-impact/)


[Souce: feral.earth](http://feral.earth/about)

#### Further References

)→ [Invisible Cape: a platform for building websites with ultra low carbon emissions](https://invisiblecape.com/about/)

)→ [Chris Bolin created a website that can only be accessed when the user is disconnected from the internet](https://chris.bolin.co/offline/)

)→ [5% battery](https://diewithme.online/)

)→ [Working Offgrid Efficiently](https://100r.co/site/working_offgrid_efficiently.html)

)→ [Design-for-obsolete-devices-by-anaelle](https://buttondown.email/otherworlds/archive/ow-2-design-for-obsolete-devices-by-anaelle/)

)→ [Radical Web Design](https://radicalweb.design/en)

)→ [Reducing CO2 emissions from distributed code](https://dannyvankooten.com/website-carbon-emissions/)

## ..⌒－→ Workshop …………
In this workshop part we will dive into more detail how to put into practice the ideas presented in the lecture. We will the create a collective website while actively discussing the challenges and discoveries within this process.

#### How to measure?

* **Transfer size:** this is the amount of files that is actually transferred. This is what you wanted to know, because this makes the most impact since this amount is transferred from the server.
* **Size of the resources:** This is the actual size of the files used to build the page.

> 'The ideal website load time is 2 seconds or less' — [UI Breakfast Podcast. Episode 140: Sustainable UX with James Christie ](https://uibreakfast.com/140-sustainable-ux-with-james-christie/)

#### ::: 0 ::: Warm-up
:hourglass_flowing_sand: 15 min

_Lets check on transfer size:_ open your browser, visit a website, then open the web console so we can investigate the 'network'.

<small> — if in Firefox: on the top menu of the browser select "Tools" > "Web Developed" > "Web Console";​</small>
<small> — if in Chrome: on the top menu of the browser select "View" > "Developer" > "Developer Tools";​ </small>

Now lets check using the [Website Carbon](https://www.websitecarbon.com/how-does-it-work/).

### Group Exercise

:hourglass_flowing_sand: 15 min

#### ::: 1 ::: Collect material for your website:
* heading;
* body of text;
* one image;
* a custom font;

You can use the template below. Simply copy paste it into a code editor (for eg.: [sublime](https://www.sublimetext.com/) or [atom](https://atom.io/)).

<!DOCTYPE html>
<html lang="en-US">

  <head>	
  
  <!-- character encoding set -->
  <meta charset="utf-8">
  
  <title>Welcome my HTML!</title>
  
  <!-- Metadata -->
  <meta name="name" content="authors name">
  <meta name="description" content="website testing ground for measuring the ecological impact in the web">

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap');  
    
    h1 {
      font-family: 'Playfair Display', serif;
    }
    figure {
      max-width: 300px;
      line-height: 0px;
      margin: 50px 0px;
      background-color: blue;
    }
    
    img {
     width: 300px;
	  /* mix-blend-mode: hard-light; */
    }

  </style>
  
  </head>
  
  <body>
  
    <!-- Content goes here -->

    <h1>Designing for a Sustainable Web 🕸️ 🍃</h1>

    <p>Playground for measuring the ecological impact of this website.   </p>
    
    <figure>
      <img src="ComputerCat.jpg" width="20%" alt="Animated image of Planet Earth, source Wikimedia">
    </figure>

    <iframe src="https://en.wikipedia.org/wiki/Climate_change" height="300" width="900" title="Wikipedia Article on Climate Change"></iframe> 
 
  </body>
</html>

[Download Source Code and Files here](https://git.vvvvvvaria.org/JoanaChicau/susty-web/src/branch/master/).

___

:hourglass_flowing_sand: 30 min

#### ::: 2 ::: Create different versions of the website and measure the difference:

1. original content;
2. using a custom external font;
3. embedding external website (iframe);

___


:hourglass_flowing_sand: 15 min

#### ::: 3 ::: Create the most lightweight version using dithering images:

Dithering is used in computer graphics to create the illusion of "color depth" in images with a limited color palette - a technique also known as color quantization. In a dithered image, colors that are not available in the palette are approximated by a diffusion of colored pixels from within the available palette. Continue reading in [Dither in Wikipedia](https://en.wikipedia.org/wiki/Dither);

* Online tool [Dither it!](https://ditherit.com/);
* Dither in [Adobe Photoshop](https://helpx.adobe.com/uk/photoshop-elements/using/dithering-web-images.html);
* Image Dithering: [Eleven Algorithms and Source Code](https://tannerhelland.com/2012/12/28/dithering-eleven-algorithms-source-code.html)

### ► Checklist

⤜(⚆_⚆)⤏ _please note this is just for reference and not an exhaustive list._

* Lightweight media: reducing file sizes saves energy throughout the whole network—from the data center through the transmission network to the devices of all users;
* Choose formats that are optimized for the web (eg.: WEBP for images; WOFF2 for fonts; mp4 for videos;)
* Studying user patterns and identifying issues (eg.: yoyo behavior, long user journeys...);
* Streamline content (eg.: limit links in the navigation; eliminate unnecessary repeated content; rethink animations and interactions; features that are not needed..);
* Include a print stylesheet that that optimizes you layout for print;

## .. ⌒－→ Resources ⌒ º ⌒ …………..

#### Further Reading

* [A User-Centered Lens into Digital Excess: Exploring the Superfluity and Environmental Burden of the Digital World](https://limits.pubpub.org/pub/krloqqv4/release/1)https://branch.climateaction.tech/
* [Branch Magazine: Climate Action Tech](https://branch.climateaction.tech/)
* [Exploring possible digital ecosystems in a sustainable world](https://gauthierroussilhe.com/en)
* [Why and how does Future Planet count carbon? Greenpeace Planet 4 project](https://www.bbc.com/future/article/20200131-why-and-how-does-future-planet-count-carbon)
* [Greenpeace Clicking green report](https://medium.com/sanctuary-computer-inc/our-2019-sustainability-report-36428441f73c)
* [Zero Carbon Websites](https://kinsta.com/blog/zero-carbon-websites)
* [Gathering for a Sustainable Internet](https://www.thegreenwebfoundation.org/news/gathering-for-a-sustainable-internet/)
* [Sustainable UX](https://sustainableux.com/)
* [Green Web Syllabus](https://www.zotero.org/groups/4399301/green-web-syllabus/items/VHGT78IB)

#### Listening

* [The Internet’s Carbon Footprint, Firefox Podcast](https://irlpodcast.org/season5/episode3/)
* [html.energy](https://html.energy/marie.html)
* [Podcast Low-Tech](https://therestartproject.org/podcast/low-tech/)

#### Watching

* [Reduce Carbon Dioxide and Make Businesses Happy with Data-Conscious Web Design, with James Christie](https://www.youtube.com/watch?v=HDFOPofTbpU);
* [Do You Speak Jackal or Giraffe? Designing Sustainable Relationships, with Whitney Hess](https://www.youtube.com/watch?v=qQ4UgmF3tBs&list=PLrJVv8APJhWmHnDXE7xIns5RjAmos1Nj7)
* [Sustainability and the Web: Are We Tweeting Our Way to a Warmer Planet? Tim Frick, TEDxBentleyU]( https://www.youtube.com/watch?v=qW75oJszcws)
* [Sustainable UX Playlist](https://www.youtube.com/channel/UCoS21NU8QBB0FcUwijfS49A)
* [Sustainable Web Playlist](https://www.youtube.com/watch?v=P-d3d8DgqVA&list=PLrJVv8APJhWnLjmVsrM3FKoNoNSnmxVue)

#### Initiatives

* [Green Web Foundation](https://www.thegreenwebfoundation.org/about/)
* [Low Carbon Methods](http://lowcarbonmethods.com/)
* [Solarpower for Artists](https://www.solarpowerforartists.com/)
* <a href="https://medium.com/@techwontdrillit/tech-wont-drill-it-a63594dc6e66">Tech Won’t Drill It</a>
* <a href="https://makeamazonpay.com/">Make Amazon Pay</a>
* <a href="https://climateaction.tech/about/">Climate Action Tech</a>
* [Right-to-Repair](https://www.ifixit.com/Right-to-Repair/Intro)
* [Design Life Cycle](https://www.designlife-cycle.com/)

#### Design Resources

* [LowCarbon Research Methods](http://lowcarbonmethods.com/)
* [Lowtechmag WebDesign](https://github.com/lowtechmag/solar/wiki/Solar-Web-Design)
* [BBC planet 4 Design System](https://p4-designsystem.greenpeace.org/05f6e9516/p/76cd7b-planet-4-design-system)
* [w3 Community SustyWeb](https://www.w3.org/community/sustyweb/)
* [Sustainable Digital Design](https://sustainabledigitaldesign.com/)
* [The Post Growth Toolkit](http://postgrowth.art/)
* [Designing Branch: Sustainable Interaction Design Principles](https://branch.climateaction.tech/issues/issue-1/designing-branch-sustainable-interaction-design-principles/)
* [Sustainable Webdesign - calculating digital wmissions](https://sustainablewebdesign.org/calculating-digital-emissions/)

#### Tools

* [Ecograder](https://ecograder.com/)
* [Website Footprint](https://www.website-footprint.com/en/)
* [Cabin - privacy-first, carbon conscious web analytics](https://withcabin.com)
* [LowCarbon Wesbite Builder](https://invisiblecape.com/)

#### Web Coding Resources List

_Optimizing for Web Sustainability_

* [Image srcset](https://www.w3schools.com/TAgs/att_source_srcset.asp)
* [Web Fonts](https://www.w3schools.com/cssref/css_websafe_fonts.asp)
* [WOFF2](https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF)
* [Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator)
* [Variable Fonts](https://v-fonts.com/)
* [Subsetting fonts](https://everythingfonts.com/subsetter)

_General Web Dev_

* * [Brief intro to HTML + CSS + JS](https://www.internetingishard.com/html-and-css/introduction/ "html-and-css intro")
* * [HTML + CSS + JS Cheat Sheets](https://html-css-js.com/html/)
* * [Guide to Web Console Commands](https://css-tricks.com/a-guide-to-console-commands/)
* * [Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)
* * [DOM Model](https://en.wikipedia.org/wiki/Document_Object_Model#/media/File:DOM-model.svg)
* [& more references here!](https://github.com/JoBCB/Web-Development-Studio-2020/wiki/Programming-Resources)