Building a More Sustainable and Accessible Internet: Lightweight Web Design with HTML and CSS

“Digital is physical. Digital is not green. Digital costs the Earth. Every time I download an email I contribute to global warming. Every time I tweet, do a search, check a webpage, I create pollution. Digital is physical. Those data centers are not in the Cloud. They’re on land in massive physical buildings packed full of computers hungry for energy. It seems invisible. It seems cheap and free. It’s not. Digital costs the Earth.”

• Gerry McGovern¹

Overview:

While the internet has great potential to bring people together and connect them to information, it is also having an increasing impact on the planet as web technologies consume more and more energy. So, as we embark on learning about the foundation of web development—HTML and CSS—we will also explore how these building blocks can be used to create websites that are visually engaging, accessible, and sustainable². We will also discuss why accessibility and sustainability should be considered building blocks for web development in their own right.

Assignment:

For this project, you will be building a website using HTML and CSS. The website will be a portfolio for your creative projects and must be designed with sustainability and accessibility in mind. Below you will find an outline of the steps we will take to build our site. Each of these steps will include in class lectures, technical demos, hands-on technical exercises, readings, and group discussions.

Steps:

1 - Overview and HTML Exploration

To begin this project, we will be writing our first web pages using only HTML. This first technical exercise will give us a solid foundation for understanding how content is organized in an HTML document. While working hands-on with HTML, we will also begin learning about the resources available to us for web development, including resources for understanding sustainability and accessibility concerns.

Materials you will need:

• Access to the internet.

• Both the Firefox³ and Google Chrome⁴ web browsers installed on your computer.

• The text editor Atom⁵ installed on your computer.

• A free GitHub⁶ account.

We will be covering content from:

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML
• https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head
• https://www.sustainablewebmanifesto.com/
• https://www.mightybytes.com/blog/digital-accessibility-series-part-one/

2 - CSS Exploration and Accessible Media

Building on our knowledge from Step 1, Step 2 will introduce CSS as a means of modifying the layout, color, font, and other design features of your HTML document. In addition to hands-on practice with CSS, we will also explore methods of reducing media file sizes and best practices for adding alternative text to images and video.

Materials you will need:

• All items listed in Step 1.

• Photoshop or equivalent photo editing software such as GIMP⁷.

• Images and text descriptions of previous projects that you wish to feature on your site.

We will be covering content from:

• https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps
• https://doodad.dev/dither-me-this/
• https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
• https://insidesamfox.wustl.edu/communications/digital-accessibility/describing-art-design-images/

3 - Putting It all Together: Building Your Portfolio

Having now covered the basics of HTML, CSS, sustainability, and accessibility, you will be drawing on these exercises to create your portfolio website. You will be making use of the materials practiced in Steps 1 and 2, using the conceptual and technical resources provided to guide your design. The culminating website will be hosted publicly using GitHub (this is free) and must meet the technical requirements listed below.

Technical Requirements:

Your website must contain the following:

• At least 3 separate HTML pages containing a total of:
  • At least 1 use of a class
  • At least 1 use of an ID
  • At least 10 media elements
• A style sheet (CSS) containing at least 20 style rules including:
  • At least 1 use of a class
  • At least 1 use of an ID

Your design must align with sustainability and accessibility practices by doing the following:

• Code is efficient and does not contain unused or unnecessary code.

  • Ex 1: All CSS style rules are used on the site and in a single document.
  • Ex 2: The web browser console should be clear of errors when pages are loaded.

• Images are saved in efficient formats, use the lowest possible resolution required for the desired visual effect, and contain alt text.

  • Ex: Artwork images are saved in WebP⁸ format and are sized to a maximum width of 1200 pixels or less and have clear alt text descriptions⁹.

• The layout and color of the site must consider screens of multiple sizes and color contrast standards to increase accessibility.

  • Ex 1: The “@media”¹⁰ rule is used in the CSS document to change the styling of the page based on the user’s screen size.

  • Ex 2: High contrast colors¹¹ are used between the text and background to ensure text remains legible.

Assessment:

For this project your grade will be derived as follows: 50% from your final website, 20% from the technical exercises in Steps 1 and 2, 20% from written responses to readings and other media, and 10% from participation in discussions and critiques. A rubric for your site will be provided and based on the technical requirements listed above.

Additional Resources

Examples:

Below are some examples of sustainable and/or low tech websites:

• My (Chelsea Thompto's) portfolio website: https://chelsea.technology/

• A web project running on and about solar power: http://solarprotocol.net/

• A magazine with a solar powered online edition: http://solar.lowtechmagazine.com/

• A sustainable website about making sustainable websites: https://sustainablewebdesign.org/

• A list of contemporary low tech (Web 1.0) websites: https://emreed.net/LowTech_Directory.html

Online Tools:

Below are some online tools for helping you explore the current state of web sustainability and create more sustainable spaces online.

Testing the Environmental Impact Of Existing Websites:

• Test live websites for their climate impact: https://www.websitecarbon.com/

• Test live websites for their climate impact: https://ecograder.com/

Accessibility Tools:

• Test color contrast: https://webaim.org/resources/contrastchecker/

• WAVE (comprehensive accessibility analysis tool): https://wave.webaim.org/extension/

Dithering Images:

• Online Dithering Tool: https://ditherit.com/

• Online Dithering Tool: https://doodad.dev/dither-me-this/

Other Image Tools:

• Creating patterned backgrounds using only CSS: http://www.patternify.com/

• Converting images to Base 64: https://www.w3docs.com/tools/image-base64

• Convertings Images to SVG: https://image.online-convert.com/convert-to-svg

• Converting Images to WebP: https://cloudconvert.com/webp-converter

Further Reading:

Below are links to more readings related to sustainable web development.

• https://www.wholegraindigital.com/blog/sustainable-web-design/

• https://vanillajspodcast.com/web-development-and-climate-change/

• https://web.dev/fast/#introduction

• https://gerrymcgovern.com/books/world-wide-waste/

• https://branch.climateaction.tech/issues/issue-1/hands-on-sustainable-web-design/

Notes

Footnotes

1. https://gerrymcgovern.com/books/world-wide-waste/ ↩

2. https://www.sustainablewebmanifesto.com/ ↩

3. https://www.mozilla.org/en-US/firefox/new/ ↩

4. https://www.google.com/chrome/ ↩

5. https://atom.io/ ↩

6. https://github.com/ ↩

7. https://www.gimp.org/ ↩

8. https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#webp_image ↩

9. https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#text_alternatives ↩

10. https://developer.mozilla.org/en-US/docs/Web/CSS/@media ↩

11. https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#color_and_color_contrast ↩