Green Boilerplate – A Proposal for Sustainable Web Templates

With so many factors impacting the sustainable features of a web page, it’s obvious that more than minor adjustments in code and layout may be necessary. So, to explore this concept I am developing my own version of “HTML5 Boilerplate” of the type made popular by sites like HTML5 Boilerplate, Blueprint, 320 and Up, and so on. The new site will be hosted at: (hosted on “green” host

I’m asking for suggestions on how to make a boilerplate with the primary goal of sustainability. At present, we can anticipate some features such a boilerplate should have:

  • “Bootstrap first” strategy to always minimize resource and energy use
  • Some server-side code, where it is more efficient that client-side libraries, (or the host’s CPU cycles are more green)
  • Mobile first design, so the primary template is always small
  • Progressive Enhancement rather than graceful decay
  • Responsive design featuring dynamic checking for device type, with files (e.g. big CSS sheets) only loaded when necessary
  • Minimized polyfills, rather than a big default JS library
  • Layouts making for efficient rendering by most devices
  • Code documented and laid out for modular use and expansion without rewrites
  • A design ethic biased in terms of UX, rather than showcase art
  • Preferred placement on “green” hosts
  • Built-in systems for measuring performance of pages
  • Promotion module (e.g. Google AdSense) spreading the sustainability word

At this point, I’ve worked with the various boilerplates out there, and am exploring those features that promise to create sustainability.  Over the next few months I’ll explore ways to create a more “virtually systainable” boilerplate, along with ways to document/measure improved sustainability. Send your suggestions to

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.