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 Services
Library & 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 2012
Image 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
Choosing a CMS
• Influenced by our experience
with WordPress Multisite
• Assessed proprietary and open
source platforms
• Wanted extensibility,
migration options, choice of
development firms.
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
wireframes
PSD to
CSS/HTML
test (x 5k)
Go Live!
This Redesign Process . . .
Receive
wireframe
Assess
structural
changes
Hardcoded
to includes
Simplify
navs
Weed
styles
Refactor
media
queries
. . . had to be different
Our templates needed
– structural changes
– simplified components
– and reskinning to match other site
Test and
match to
CMS
Go live!
Changes
Structural
changes
Style
changes
• Simplifying nav
• changing footer and
side nav structure
• Match new CMS
• Simplify CSS
• Refactor media
queries
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
(cos I’m from Philly, yo!)
– Header
– Footer
– Everything else
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="ContentType" 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 Plan
Prelaunch
Analytics (prelaunch? Zivtech needs to install module)
Module security updates (Zivtech)-- July 3-- ticket 218
Juliana 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 timing
July 7
12pm Content editing freeze.
1pm (or when ready) Zivtech changes absolute URLs to www.brynmawr.edu ticket 217
2pm (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 9
Juliana to send services-updates list announcement pointing to IS blog post (http://is.blogs.brynmawr.edu/2014/07/01/new-bryn-mawr-websiteon-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)
balch
360
admissions 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
Drupal
Legacy
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