Sustainable CMS

Do CMS Systems Contribute to, or Detract from, Web Sustainability?

Dr. Pete Markiewicz

About the Author

Pete Markiewicz worked as a research scientist at UCLA and elsewhere until mid-1993.

Co-founded an early Internet music download & sales service, “Indiespace” in April 1994.

Author of books on the Internet, US Generations, & Tech.

Began investigating web sustainability from a designer and developer perspective in 2011.

Scope of the Talk

1. Consider why Content Management Systems (CMS) should be analyzed for sustainability.

2. Introduce a sustainability framework for the web.

3. Identify which parts of CMS design and development are more, or less sustainable than alternatives.

4. Apply a “green ingredient” strategy to create fast documentation for the sustainability for CMS projects.

What is a “CMS” (for the purposes of this talk)

Content Management Systems allow non-developers to add content via a web-based visual framework.

Provide a system for controlling the Information Architecture (IA) of the site.

Enable installation of custom “themes” to change a website’s design.

Rely on three technology layers:

● Client-side design templates● Server-side database● Server side “glue” code to link the two

Yes No

WordPress Django

Drupal Google Docs

MotivationWhy worry about CMS?

CMS systems rule the Professional & Amateur Web... The dominant method

for constructing new websites today !

CMS Market Share

It’s half the web...

WordPress is dominant.

Drupal, Joomla, are significant.

A long tail of smaller CMS systems (~600).

Nearly all are PHP & MySQL based (LAMP).

Data source: http://w3techs.com/technologies/overview/content_management/all

Datanlyze “Top Million”

WordPress is even more dominant than you think...

WordPress dominates by sheer volume of sites.

Plugin model is the strongest feature attracting designers and developers.

Data source: http://datanyze.com/market-share

TF Insights Shows...

WordPress is still dominant in vertical markets!

Even at the professional, enterprise-level, WordPress still rules!

Data source: http://tfmainsights.com/wordpress-the-king-of-content-management/

High Traffic = Relevance for Drupal

Drupal has highest traffic relative to market share

Used for high-traffic sites...● Twitter● Pinterest● Whitehouse.gov● Nih.gov● Weightwatchers.com

Data source: http://w3techs.com/technologies/details/cm-drupal/all/all

CMS E-Commerce

A significant segment in terms of impact on the web…

E-Commerce forms a few percent of the total CMS ecosystem.

But e-commerce services are resource-heavy.

Magento is dominant.

Data source: http://tomrobertshaw.net/2014/04/april-2014-ecommerce-survey/#download-now

CMS for “Creatives”

They’re not significant!

Squarespace, Cargo = so-called “Creatives”.

Wix and Weebly appeal to the general public.

Their “code-free world” interfaces don’t translate to significant market share.

Data source: http://w3techs.com/technologies/overview/content_management/all

*relative to all websites

What is Web Sustainability?It’s more than a fast-loading site...

The Sustainable Web is more than energy-efficient... Semantic

ReusableInclusiveFuture-friendly

Sustainable Virtual Design considers...

Current needs of users, designers, and developers to create sites and apps.

Best Practice, so methods used today don’t prevent meeting the same needs in the future.

Strategy, ensuring projects don’t degrade the Internet’s virtual ecosystem.

CMS Features Affecting Sustainability

1. CMS systems differ in features

...and their features directly impact their sustainability

How CMS Systems Differ...

1. Information labeling, taxonomy construction.2. Size of the development community.3. Open or closed-source architecture.4. Support for client-side design and development.5. Caching of content (local, CDNs).6. Easy “On-ramps” for beginners.7. Access to visual themes and functional plugins.8. Cost.9. Support for web standards.

JoomlaWordpress Drupal

Site Dev Strategies Compared

Poor taxonomy/IA

OK standards support

Frequent updates

Caching (W3 Super Cache)

Easy to learn

LOTS of themes, plugins

Efficient Taxonomy

Weak standards support

Frequent updates

Caching (Varnish, APC)

Hard to learn

Few themes, modules often cost $$$

Efficient taxonomy

Weak standards support

Frequent updates

Caching (Jotcache)

Hard to learn

Not many themes

2. CMS versus “client-heavy” frameworks What‘s the alternative,

if you don’t use a CMS?

The Modern Web Emphasizes the Client, or the ServerFrameworks segment by the primary location for logic, data manipulation and Ui creation...

Server-Side Framework Static Website Client-Heavy Framework

Client-HeavyCMS Static Pages

Site Dev Strategies Compared

PHP/MySQL

Page finished on server

Embedding, concatenation

Ajax & page reloads

Weak standards support

Prebuilt HTML, CSS, JS

Static prebuilt page

No dynamic embedding

Ajax and page reloads

Good Standards support

JavaScript & Ajax

JS creates page

Embedding, concatenation

Ajax

Good standards support (cutting-edge)

3. CMS System Ranking

What differentiates the sustainability of CMS systems relative to each other?

WordPress is Slow, Drupal is Fast

WordPress (both versions) show the lowest performance for the top 10,000 sites.

Drupal scores the best out of the most common CMS installations.

Low-Volume proprietary CMS systems (HubSpot, Adobe CQ) score the best.

Data Source: http://www.yottaa.com/company/blog/application-optimization/benchmarking-performance-of-8-cms-platforms-who-is-slowest/

4. CMS WorkflowHow does the emphasis on server-side code affect project design and development?

WordPress Enables Agile Workflow for Small Projects

The blogging origins of WordPress support loose, collaborative design and development.

Theme-swapping allows fast-iterative design experiments by small groups or individuals.

Wide availability of plugins and modules allow “paint-by-numbers” development (which could be refined later).

Drupal & Others Nudge Projects into Silos

In larger systems (Drupal), the difficult learning curves encourages a split between:

1. Server-side developers2. Front-end developers3. Designers

The social disconnect can push workflow into a less sustainable “waterfall” model for project development.

The “waterfall” problem is even more pronounced for CMS frameworks like Django or Ruby on Rails.

WordPress Scales Poorly in Large Projects

Blog-based taxonomy pre-defines specific data structures.

Terms conflict with multiple applied taxonomies.

● Identical WordPress terms in two different taxonomies are still the same term.

● The WordPress interface treats them as distinct.

Source: http://www.oomphinc.com/notes/2012/01/ruminations-on-the-wordpress-taxonomy-system/

Kludges and workarounds are necessary for

complex Information Design.

5. CMS design access

How does the ability to use pre-built themes affect who can design for the web?

CMS Theme + Plugins Models Open the Web

Anyone can learn to set up open-source CMS systems.

Themes allow designers with widely varying technical skills to set up websites.

This helps “inclusive design,” allowing everyone to participation in the creative process (rather than restricting access to an elite of Computer Science graduates).

...But “Amateurization” Could Reduce Sustainability

Amateur design, enabled by CMS themes and plugins, easily leads to “bloatware” websites with high carbon footprints.

Security problems on the amateur web lowers the sustainability of the entire web (contaminate the virtual ecosystem).

Measuring Web SustainabilityBeyond the “Carbon Footprint”

We need a set of rules unique to Web Sustainability... What determines if you

are, or aren’t building a sustainable website?

Other Industries have Well-Developed Frameworks

● The 3Rs (Reduce, Reuse, Recycle)● Sustainability Helix● Cradle2Cradle● Biomimicry● The Living Principles● Wendy Jedlicka’s Graphic Design

○ Sustainable Graphic Design○ Packaging Sustainability

Note: these frameworks mix quantitative and qualitative measures!

Nate Shredoff

WorkChair, California College of the Arts MBA in Design Strategy.

BookDesign is the Problem - The Future of Design Must Be Sustainable

ContributionExtension of sustainable frameworks outside industrial design and architecture.

http://www.nathan.com/

https://www.cca.edu/academics/faculty/nshedroff

Shredoff-Inspired Web Sustainability GuidesShredoff Sustainability Principle Sustainable Web Design Goals

1. Make meaningful products Make websites that are have real value

2. Easy design rollback Iterative or Agile design workflow

3. Source Renewable Materials Switch to a “Green” webhost

4. Design products to work in the future Web standards, classic visual design

5. Design with the user in mind Create effective User Experience (UX)

6. Ensure democratic access Build accessible, responsive websites

7. Interchangeable Parts Apply standards-based design

8. Minimize energy consumption Web Performance Optimization (WPO)

9. Don’t corrupt the virtual system Search Engine Optimization (SEO)

CMS Systems Scored

1. Meaningful Products

Practical Mini-SitesCMS systems make it easy to set up single-function websites, tear them down later.

Functional SitesUsing database, plugins, modules, CMS systems can “do something” instead of being electric paper.

2. Easy Design Rollback

CMS themingEasy to try a design, replace it with another, revert.

Child themesEasy to modify a design, revert if necessary.

3. Source Renewable Materials

Core updatesMajor CMS systems update on a monthly timeframe.

Green hostingMost hosts, including “green” ones, support CMS installations by default.

Obsolete codeNo mechanism for updating or removing obsolete plugins and modules from the ecosystem.

4. Future-Friendly

Large development communityMajor CMS projects have large groups likely to continue upgrades and feature addition.

Poor web standards supportMajor CMSes still haven’t completely shifted to HTML5.

5. User-Centric Design

CMS Themes Support UxMost themes are designed with the user in mind.

Amateur coding ignores UxEasy development allows people who misunderstand interactive media to build unfriendly sites with bad User Experience.

6. Democratic Access

DistributionOpen-source model ensures worldwide access to CMS systems.

WordPress is most inclusiveBest support for general design and development by all.

Drupal is less inclusiveDifficult to build basic sites without mastering taxonomy.

7. Modular Design

Modules and PluginsSimple addition and removal of functional features

Template messUse of PHP creates poor separation of information and presentation/layout in many CMS systems.

Plugin messInappropriate plugin interaction, plugins compete.

8. Energy Efficiency

Greener processingServer-side code uses greener server bits.

Drupal is most efficientTaxonomy and extensions contribute to high WPO scores.

Wordpress is inefficient WordPress plugins encourage non-developers to create functional sites at the cost of WPO and efficiency.

7. Support Virtual Ecosystem

Good SEO supportNon-developers can easily integrate SEO meta-data.

Good social sharingNon-developers can easily integrate social networks.

Spam & Privacy ProblemsBad guys can exploit easy to install plugins for bulk emailers, trackers.

Using the “Green Ingredients” Framework

We need to measure sustainability using qualitative factors... Carbon footprints are

only part of the sustainable story...

Sustainability Criteria aren’t all numbers!

A method that goes beyond energy efficiency is needed to include Ux, workflow, inclusive design in sustainability calculations.

This problem is frequently encountered in Industrial Design when full LCA (Life Cycle Analysis) models aren’t available.

LCA Image Source: http://qisda.com/page.aspx?uid=262

Business-to-Business, B2B Sustainability FrameworkIndustrial Design

We can’t do Web LCA yet!

Full Carbon Footprint Calculations are hard...

You need to include:

1. Office energy and resource consumption

2. Time to complete CMS project3. Maintenance4. Performance calculations for each

major browser5. Server, network, and local

electricity use, by user location6. Ease of taxonomy extension7. Modularity of design8. Access to site versus value to

user

Green Ingredients allow qualitative scoring for... Software

Ux and UiWorkflow ChangesAppropriate Design

The Ouroboros Strategy

Create database listing green ingredients.

Score Presence or Absence of “Green Ingredients” in your project.

Swap “Green Ingredients” for original ones.

Quantify when possible, otherwise list swaps.

Article Series: https://sustainablevirtualdesign.wordpress.com/2012/03/14/the-ouroboros-strategy-for-sustainability-part-1-listing-green-ingredients/ +48%

Setting up “Green Ingredients” in Your Project

1.Create a table breaking out “ingredients” by

● Code Framework & Workflow● Ux and Ui● SEO, WPO

3.Swap non-green for greener ingredients

4.Score with two-state, 4-state, or numerical values.

5. Score alongside quantitative tests (e.g. webpagetest.org)

Reference: https://sustainablevirtualdesign.wordpress.com/2013/02/08/great-example-of-swapping-green-ingredients/

Advantages

Sustainability choices can be made without exhaustive calculation.

Sustainable progress can be detailed in terms of design choices, rather than numbers.

Visual deliverables are more easily understood by non-technical stakeholders.

Green Ingredient WordPress Drupal Joomla Plone

Energy efficiency/Performance

User roles/workflow defined in CMS

Setup

Regular core code updates

Good SEO support

Plugins/Modules available

Graphical flexibility/Ease of Design

Taxonomic flexibility

Scalability

Green Ingredient Matrix - Initial CMS Choice

-22% +33% -12% -11%

22d 22d 36d 65d

14 3 0 0

Ingredient 1st QTR 2nd QTR 3nd QTR 4th QTR

WPO 1st Load Score (Webpagetest.com)

Sustainability Score (Ecograder.com)

Swap HTML5 for HTML4 Support

Swap TDD Coding for Individual coding

Swap OGP data for HTML4 Meta-Tags

Swap W3Cache for SuperCache Plugin

Swap in Divi (user-editable) Theme for Coder Theme

Swap in formal taxonomy for blog category list

Swap Green Host for AWS Cloud

Green Ingredient Matrix - Sustainability Report

3.67s 2.5s 2.1s 1.8s

57/100 63/100 61/100 67/100

Summary

CMS systems and their use form a major part of the Sustainable Web.

CMS systems have features which can improve sustainability.

Considering CMS sustainability requires a framework that goes beyond carbon footprints.

The “Green Ingredients” strategy lets us assay CMS sustainability today, including qualitative features of sustainability.

References

1. Image licenses: commercial use with modification (https://support.google.com/drive/?p=docs_image_search&hl=en)

2. http://cmsmatrix.org/ 3. http://trends.builtwith.com/ 4. http://w3techs.com/5. http://nathan.com 6. http://www.cubrid.org/blog/dev-platform/comprehensive-overview-of-top-14-content-

management-systems/ 7. https://www.elegantthemes.com/blog/resources/wordpress-vs-drupal 8. http://www.yottaa.com/company/blog/application-optimization/benchmarking-performance-

of-8-cms-platforms-who-is-slowest/ 9. http://dyn.com/blog/how-we-improved-page-speed-by-cleaning-css-html-and-images/

10. http://buytaert.net/should-we-decouple-drupal-with-a-client-side-framework