WSG-o-matic: Small Sustainability Wins

The concept was simple and hopefully fun…

I would take the wonderful draft Web Sustainability Guidelines and provide a bite sized sample of the guidelines to hopefully spark further interest in the reader. Throw in a little randomness and whimsy with it as well to make it stick with people!

Ideally someoneone would get a single sample of the WSG’s and then investigate further back at the real source of truth, the 95 WSG’s themselves under construction by the W3C, which are linked to several times in the website. Why? It seemed good for sustainability. I took this concept and ran with it and so far I have the following:

https://wsg-o-matic.netlify.app/

GitHub Repo

Built with HTML5 Boilerplate and JSON API from the WSG Draft, WSG-o-matic aims to be a simple and engaging educational tool making the best of the guidelines themselves to guide its development.

If you visit https://wsg-o-matic.netlify.app/, Try clicking either the big button or the package.

Doing this action will produce a populated guideline onto the page for browsing. You can even try holding enter focused on the big yellow button to see a bunch of guidelines whizz past pretty fast. Selecting the button dynamically loads from JSON a guideline at random, with some relatively simple JavaScript.

Features:

  • Built with the Web Sustainability Guidelines in mind. Many guidelines were inspected as I built this!
  • Semantic HTML
  • Less than 10kb CSS
  • Less than 10kb JS
  • 533 KB of JSON Data- The entire Web Sustainability Guidelines!
  • No Images (Emoji is used for the Largest Contentful Paint)
  • Maintains some usability and integrity without JS
  • System Font Stack - Downloads no Web fonts
  • Responsive for Tablet and Mobile
  • Service Worker providing basic Offline Mode

The website does amazing when you test it:

Conclusion

I am going to keep working on this project, but I like the early first draft version of the WSG-o-matic!

Do you have any thoughts for making this better? let me know! (Email in About page)