3d tetris a case study in phased cms migration image source
TRANSCRIPT
![Page 1: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/1.jpg)
3D Tetris
A Case Study in Phased CMS Migration
Image Source
![Page 2: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/2.jpg)
Andrea Kaldrovics: web design & development
Juliana Perry: project management & user support
Bryn Mawr College Web ServicesLibrary & Information Technology Services
![Page 3: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/3.jpg)
Bryn Mawr College
• Women’s college near Philadelphia• 1,300 undergraduates• 400 graduates (co-ed)
Image Source
![Page 4: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/4.jpg)
brynmawr.edu:
• 5,400 template web pages• 100+ web stewards• 100+ offices/departments• 40+ official blogs in WordPress
Image Source
![Page 5: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/5.jpg)
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
![Page 6: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/6.jpg)
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
![Page 7: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/7.jpg)
Where We Came From
• Wild West->Template maintained in Adobe Contribute (2008)
• Template->Tidied template (2009-12)
• Template->Drupal (Present)
![Page 8: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/8.jpg)
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
![Page 9: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/9.jpg)
• 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
![Page 10: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/10.jpg)
Drupal Learning Curve…for Administrators.
Image Source
![Page 11: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/11.jpg)
Andrea’s Day in Drupal
Image Source
![Page 12: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/12.jpg)
Web Steward’s Day in Drupal
![Page 13: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/13.jpg)
Redesign 2008
No one much liked this design
![Page 14: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/14.jpg)
Redesign 2010
The “classic” blue with a Flash slide show and massive top nav!
![Page 15: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/15.jpg)
Redesign 2012
The “new” blue with a non-Flash slideshow!Note the massive top nav is still present
![Page 16: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/16.jpg)
Redesign 2014
The “fresh” redesign, note the streamlined top nav
![Page 17: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/17.jpg)
How to Migrate??
Vs.
Image 1 Image 2 Image 3
![Page 18: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/18.jpg)
Migrate 5,000 Pages All At Once?!?!?
Image source
![Page 19: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/19.jpg)
Separate Legacy Site
Image Source
![Page 20: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/20.jpg)
Gradual Migration: The Least Worst Choice!
Image Source
![Page 21: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/21.jpg)
Phase 1
High profile content–Homepage– Alumnae– Admissions– Giving– Financial Aid– About the College– Student Life
![Page 22: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/22.jpg)
The Challenge
• Simultaneous redesign and CMS implementation
• Separate design firm and potential CMS vendors
• Changes in College administration• Changes at both vendors
Image Source
![Page 23: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/23.jpg)
Also an Astonishing Number of Cooks• Design firm did not do CMS
implementation• Communications=PM for design
phase• Web= PM for implementation
Image Source
![Page 24: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/24.jpg)
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
![Page 25: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/25.jpg)
Redesign 2014
Some pages are in Drupal…
![Page 26: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/26.jpg)
Redesign 2014
While others are still in legacy HTML
![Page 27: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/27.jpg)
Our Typical Reskin Process
receive wirefram
es
PSD to CSS/HTM
Ltest (x 5k) Go Live!
![Page 28: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/28.jpg)
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!
![Page 29: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/29.jpg)
Changes
• Simplifying nav• changing footer
and side nav structure
Structural
changes
• Match new CMS• Simplify CSS • Refactor media
queries
Style changes
![Page 30: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/30.jpg)
Challenges
• Hard-coded header & footer on 5000+ pages
• Crufty 4000+ line CSS & outdated media queries
• New features for old content
Image Source
![Page 31: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/31.jpg)
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
![Page 32: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/32.jpg)
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
![Page 33: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/33.jpg)
Discovery
• What do all these files & elements actually do?
• Are they relevant for redesign?
![Page 34: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/34.jpg)
Discovery
• What do all these files actually do?
• Are they relevant for redesign?
![Page 35: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/35.jpg)
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
![Page 36: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/36.jpg)
Contribute Garbage
![Page 37: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/37.jpg)
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.
![Page 38: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/38.jpg)
Thumbnail Viewer
![Page 39: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/39.jpg)
Web Stats
![Page 40: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/40.jpg)
Clean Up, Aisle 5
• Finding issues before redesign
• Cleaning up Contribute litter
• All Hail Our Awesome Sys Admin!
![Page 41: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/41.jpg)
Breadcrumb Craziness
• Left Nav inconsistent
• Breadcrumb and left nav options all same code
• This needed to change!
![Page 42: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/42.jpg)
Breadcrumb Craziness
• Left Nav inconsistent
• Breadcrumb and left nav options all same code
• This needed to change!
![Page 43: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/43.jpg)
Breadcrumb Craziness
• 370 files to change
• Contact Us and left nav files for all directories
• Teamwork!
![Page 44: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/44.jpg)
Clean Up, Aisle 6
• Trash CSS files?
• Keep CSS files?
• Modify CSS files?
![Page 45: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/45.jpg)
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
![Page 46: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/46.jpg)
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
![Page 47: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/47.jpg)
CSS Tetris• Move like selectors close together• Consolidate by declarations• Comment every line• Comment-out one at a time til you
break something
![Page 48: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/48.jpg)
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
![Page 49: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/49.jpg)
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
![Page 50: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/50.jpg)
The Elements of Success
• Solid launch plan• Proxy setup• Communication
![Page 51: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/51.jpg)
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 –
![Page 52: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/52.jpg)
Proxy Setup
Proxy
Server
Legacy
Drupal
![Page 53: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/53.jpg)
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
![Page 54: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/54.jpg)
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
![Page 55: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/55.jpg)
Preparing the Community for Change
• Effective communication–Notifications to community members– Previews for affected users– Easy feedback form for problems
![Page 56: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/56.jpg)
![Page 57: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/57.jpg)
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
![Page 58: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/58.jpg)
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
![Page 59: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/59.jpg)
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
![Page 60: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/60.jpg)
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
![Page 61: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/61.jpg)
How This Was Possible
• Understanding what we had• Iterative cleanup and improvement• Focus on the individual tasks
required• Teamwork!
![Page 62: 3D Tetris A Case Study in Phased CMS Migration Image Source](https://reader035.vdocument.in/reader035/viewer/2022062715/56649d965503460f94a7f109/html5/thumbnails/62.jpg)
Questions???
Image Source