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