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:

http://www.greenboilerplate.com (hosted on “green” host http://www.aiso.net)

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 pindiespace@gmail.com.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s