Hit the “s” key to see this presentation with my notes

Gamut: The Non-Template Template

PHP, Web BPs, and Maintaining 150
Unique Websites As If They Were One

HighEdWeb New York 2015, Ithaca, NY
Fri, June 12, Statler Hotel at Cornell University

#hewebNY

Ray Schwartz

Vassar sites

Gamut

Lay of the land: personnel

Web Development Group is in the Communications Office.

Director
Assistant Director
2 web designers
2 web developers
1 CMS trainer

Not in the group but key

Digital Imaging Coordinator
Liaison with Computing and Computer Information Services (CIS)

Lay of the land: Vassar’s webspace

  • We have 150+ websites—academic departments, administrative offices, feature sites—that are “official.”
  • We also have blogs, social media presences, and sites that are both “official” and “unofficial.”

How did it happen?

We asked questions

Q: How do we address “mobile?”

A: RWD

Q: How do we upgrade our websites to current standards?

A: New “Sample Site”

What is a Sample Site?

A flat, single-page HTML template, containing our best practices (developed in-house).

My Mission:

build the new Sample Site

A template to build a template

I used a PHP template to replicate the sample page across a site.

Realization #1
Easy for me, easy for everyone

If a PHP template made my work easier, wouldn’t it make everyone’s?

Instead of sharing a static page, share a dynamic site-builder.

Realization #2
The site-builder could be the site

If it ran on my server, why not on Production?

Reconciling two competing priorities

  • Communications goals—to uniquely represent a particular office or department’s message.
  • Workload—a small team trying to keep pace with maintaining/designing 150+ sites.

Our answer, as it turns out, is Gamut.

What is Gamut?

A system for maintaining the website lifecycle for multiple sites.

Developed in-house.

Simplify the problem

Decide there is only one website.

One website with 150+ variants.

Determine what makes a website a website,
vs. what makes a website a unique website.

It helps to have principles

D R Y (Don’t Repeat Yourself)

As applied to components:

Centralize components shared by 2+ sites.

Components existing on only one site, remain there.

D R I F T
(Do it RIght the First Time)

Y A G N I (You Ain’t Gonna Need It)

KISS (Keep It Simple Stupid)

Complex code is embarrassing.

Code Smells

Not technically incorrect and program “works,” but:

Slows down development

Increases risk of bugs or failures

Code smells in CSS

Apply principles broadly

Don’t only apply to computer science.

The single responsibility principle applied to CSS

The open closed principle applied to CSS

Design your code

Much of my time was spent researching—not coding.

Code that “works” isn’t sufficient.

Have purpose and solve problems.

Gamut: why build it?

Goals

  • A unified methodology for site building
  • To design for change
  • An extensible/configurable system
  • Produce more/higher-caliber sites in less time
  • Streamline maintenance, debugging, and enhancements
  • Let designers focus on design, not technology decisions

Don’t you already have a CMS?

Gamut isn’t a CMS.

It allows a CMS to focus on content management.

Can’t a CMS do that?

Just because it can…doesn’t mean it should.

Does it adhere to web standards?

Follow web BPs?

Allow you to use the tools you want?

Can’t you buy something?

Which thing?

Off-the-shelf   ≠   exactly what we need.

CMS Agnostic

Gamut is designed to work with other CMSs or none at all.

We build websites
not “academic websites”

There is no particular “type” of site we are building.

There is only one website.

The model

CMS/Published Sites

One-way connection from CMS to published sites

Dev Sites

Develop sites locally. Add to the CMS. Publish.

Core

PHP code that unifies our process

Gamut

Content, CMS, CSS, DB, HTML, JS, PHP

CSS Zen Garden

One site with many variants.

Atlantis

Steel

One difference

The same but different

Centralization   ≠   cookie cutter

Flexible, Central CSS

Layers

Shared without modification:

normalize.css

Shared with modification:

Standard modules

Unique, site-specific CSS

Cascade

Specificity and source order can override shared styles.

But using variables with SASS can avoid overrides.

SASS

Sharing SASS vaiables

Variables are set locally but affect central SASS

We’re compiling SASS on-the-fly with PHP using Leaf Corcoran’s SASSPHP (w/caching)

Meaning, each site can have its own values, but still share CSS.

The call is coming from inside the house

Aids visual design (future)

Using style patterns, their combination make unique designs.

  • Typographic treatment #4
  • layout #8
  • color scheme #2

Harness the power of Gamut Core for experimentation and visual design construction.

What does it do?

  • Asynchronous loading
  • Builds IE8 CSS
  • Cache busting
  • Common SASS variables
  • Conditional loading
  • Debugging w/Kint
  • Device detection w/WURFL
  • Force refresh of site CSS/JS
  • Generates slide show images/thumbnails
  • Loads Plug-ins
  • Manages modules
  • Manages Navigation/breadcrumbs/site map
  • Minification/Concatenation
  • Toggle PHP error reporting
  • Writes file content (JS, CSS, HTML)

DevSite Magic

The Markup Template

Demo

Tools

Codekit

MAMP

SASS

Git

PHP Storm

Typekit

Links from Presentation

Resources Part 1

Resources Part 2