Skip to main content

WSG-o-matic: Small Sustainability Wins

WSG-o-matic

Re-launched this website with an update on its own domain and on green hosting!

This website now gets 100’s on Ecograder, Lighthouse, Excellent WebPageTest results also.

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 WSGs and then investigate further back at the real source of truth, the WSGs 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:

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.com/, 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 9kb CSS
  • Less than 8kb JS
  • Small JSON Data but the entire Web Sustainability Guidelines!
  • No Images (Emoji is used for the Largest Contentful Paint)
  • Maintains some usability and integrity without JS-> No Scripts link back to the WSGs
  • System Font Stack - Downloads no Web fonts
  • Responsive for Tablet and Mobile

The website does amazing when you test it:

Conclusion

This project is actively maintained!

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