3D Tetris A Case Study in Phased CMS Migration Image Source.

3D Tetris

A Case Study in Phased CMS Migration

Image Source

Andrea Kaldrovics: web design & development

Juliana Perry: project management & user support

Bryn Mawr College Web ServicesLibrary & Information Technology Services

Bryn Mawr College

• Women’s college near Philadelphia• 1,300 undergraduates• 400 graduates (co-ed)

Image Source

brynmawr.edu:

• 5,400 template web pages• 100+ web stewards• 100+ offices/departments• 40+ official blogs in WordPress

Image Source

The Whole Web Team!

• Vince Patone, Director• Juliana Perry, Project management &

user support• Andrea Kaldrovics, Web design &

development• Andrew Lacey, Systems

administration• Jeremy Gonyea, Development• Kelly Mueller, CMS consultant

Re-re-re-freshing

• Completed migration to a College-wide template in 2008

• 2 additional refreshes• Retrofitting responsive design

onto templates• Finally, a mandate for a CMS in

2012Image Source

Where We Came From

• Wild West->Template maintained in Adobe Contribute (2008)

• Template->Tidied template (2009-12)

• Template->Drupal (Present)

While We Waited

• Migrated stragglers into template• Archived 15+ GB of files• Tidied template and CSS • Eliminated inline styles, random

javascript people found on the interwebs, etc.

Image Source

• Influenced by our experience with WordPress Multisite

• Assessed proprietary and open source platforms

• Wanted extensibility, migration options, choice of development firms.

Choosing a CMS

Image Source

Drupal Learning Curve…for Administrators.

Image Source

Andrea’s Day in Drupal

Image Source

Web Steward’s Day in Drupal

Redesign 2008

No one much liked this design

Redesign 2010

The “classic” blue with a Flash slide show and massive top nav!

Redesign 2012

The “new” blue with a non-Flash slideshow!Note the massive top nav is still present

Redesign 2014

The “fresh” redesign, note the streamlined top nav

How to Migrate??

Vs.

Image 1 Image 2 Image 3

Migrate 5,000 Pages All At Once?!?!?

Image source

Separate Legacy Site

Image Source

Gradual Migration: The Least Worst Choice!

Image Source

Phase 1

High profile content–Homepage– Alumnae– Admissions– Giving– Financial Aid– About the College– Student Life

The Challenge

• Simultaneous redesign and CMS implementation

• Separate design firm and potential CMS vendors

• Changes in College administration• Changes at both vendors

Image Source

Also an Astonishing Number of Cooks• Design firm did not do CMS

implementation• Communications=PM for design

phase• Web= PM for implementation

Image Source

The Elements of Success

• Strong established reskinning process

• Forming a web steering committee to assure good coordination between LITS and Communications

• Good discovery process for legacy server content

Image Source

Redesign 2014

Some pages are in Drupal…

Redesign 2014

While others are still in legacy HTML

Our Typical Reskin Process

receive wirefram

es

PSD to CSS/HTM

Ltest (x 5k) Go Live!

This Redesign Process . . .

. . . had to be different

Our templates needed– structural changes– simplified components– and reskinning to match other site

Receive wirefram

e

Assess structural changes

Hardcoded to

includes

Simplify navs

Weed styles

Refactor media

queries

Test and match to

CMSGo live!

Changes

• Simplifying nav• changing footer

and side nav structure

Structural

changes

• Match new CMS• Simplify CSS • Refactor media

queries

Style changes

Challenges

• Hard-coded header & footer on 5000+ pages

• Crufty 4000+ line CSS & outdated media queries

• New features for old content

Image Source

One Step at a Time

• Header and footer as includes

• Side nav structure change

• CSS cleanup• Restyle in phases– Header– Footer– Everything else

Image Source

One Step at a Time

• Header and footer as includes

• Side nav structure change

• CSS cleanup• Restyle in phases– Header– Footer– Everything else

(cos I’m from Philly, yo!)

Image Source

Discovery

• What do all these files & elements actually do?

• Are they relevant for redesign?

Discovery

• What do all these files actually do?

• Are they relevant for redesign?

Lining Up the Ducks

• Make the header an include file• Make the footer an include file• Clean up all legacy html of extraneous code and

scripts• Make the handwritten, custom left nav for each

department a consistent hierarchy throughout site (saving this for its own step)

• Clean and streamline CSS as-is (saving this for last step before redesign) Image Source

Contribute Garbage

UTF? WTF!75+ lines of <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> A custom style for bold text. For no reason.

Thumbnail Viewer

Web Stats

Clean Up, Aisle 5

• Finding issues before redesign

• Cleaning up Contribute litter

• All Hail Our Awesome Sys Admin!

Breadcrumb Craziness

• Left Nav inconsistent

• Breadcrumb and left nav options all same code

• This needed to change!

Breadcrumb Craziness

• Left Nav inconsistent

• Breadcrumb and left nav options all same code

• This needed to change!

Breadcrumb Craziness

• 370 files to change

• Contact Us and left nav files for all directories

• Teamwork!

Clean Up, Aisle 6

• Trash CSS files?

• Keep CSS files?

• Modify CSS files?

Gardening 101

Cleaning up a stylesheet is like weeding a garden… the best method isn’t the easiest

It’s worth the effort!

Image Source

A Word About Preprocessors

“Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.” ~ sass-lang.com/guide

CSS Tetris• Move like selectors close together• Consolidate by declarations• Comment every line• Comment-out one at a time til you

break something

A Comment on Comments• Comment all media

queries • Comment all sections

of media queries• big comment blocks

for begin and end of sections

• detailed notes helpful• Detail all complex

changes, especially math, in your comments

Go Live Inventory• List all file

components needed for your page

• Migrate as many components as you can ahead of go live

• Treat your sys admin to lunch before you hand over the list

The Elements of Success

• Solid launch plan• Proxy setup• Communication

A Good Launch PlanPrelaunchAnalytics (prelaunch? Zivtech needs to install module)Module security updates (Zivtech)-- July 3-- ticket 218Juliana to post IS blog and web-maintainers announcement July 1 with details about launch/what to expect. Juliana to give Help Desk a heads up on launch timingJuly 712pm Content editing freeze. 1pm (or when ready) Zivtech changes absolute URLs to www.brynmawr.edu ticket 2172pm (or when ready/when absolute URL change is complete) Andrew L and Andrew C begin DNS change. Use Andrew L’s alternate (prelaunch) proxy config. Bascom editing not recommended during launch.  July 9Juliana to send services-updates list announcement pointing to IS blog post (http://is.blogs.brynmawr.edu/2014/07/01/new-bryn-mawr-website-on-july-8/)Juliana to copy new 404 files from test:

/error/error404.shtml/error/error_form.html

Andrew L to Change proxy config to launch configuration Andrew L to enter  redirects that need to be done on bascom at production launch (see https://docs.google.com/spreadsheets/d/1bkAGM69ZqNWTmk0Puc3iemafAfL6LS1_Ozzt16NvkGU/edit#gid=1822655721 )

SFS URLs (especially specific ones for federal verification)balch360admissions vanity URL

Move bascom stylesheets and other relevant files: (Andrew’s script)/includes/stylesheets/all_styles_combined.css --       /includes/stylesheets/genP.css       /includes/stylesheets/bico.css        /includes/stylesheets/gateway4c.css –

Proxy Setup

Proxy

Server

Legacy

Drupal

Fun with Proxy Configuration

• Find ALL the Drupal file paths: /file /media /nodequeue /features /devel /wtf

• Add new paths every time someone needs a vanity redirect on a Drupal page, e.g. brynmawr.edu/special_campaign

Image Source

How We Outsmarted Ourselves

• Proxy directs traffic to legacy server, yay! • We have to build sections to migrate on the

Drupal production server. • Oh. Wait… • Solution:

– Old: brynmawr.edu/math– New: staging.brynmawr.edu/math Image Source

Preparing the Community for Change

• Effective communication–Notifications to community members– Previews for affected users– Easy feedback form for problems

Game Over… for Phase 1• List all file

components needed for your page

• Migrate as many components as you can ahead of go live

• Treat your sys admin to lunch before you hand over the list

Web Migration Part II: The Webbening• Migrate ~90 more sites. – Some have 100+ pages

• Create News and Events content types– Retire WP news blogs

• Develop content types for specialized content– Dining menus, bus schedule, etc.

• What to do with non-template legacy content

Image Source

Content Migration

• Invite departments to sign up for early migration

• Meet with departments requiring special attention first

• Create other sites in advance, then show to department for approval

• Hire copy-paste assistance

Migrating a Site

• Create new section• Change proxy settings to allow

viewing of site on staging.brynmawr.edu

• Create/copy content (the hard part)• Make section visible and change

proxy config

How This Was Possible

• Understanding what we had• Iterative cleanup and improvement• Focus on the individual tasks

required• Teamwork!

Questions???

Image Source