OmniUpdate User Training Conference 2014: Our "Special Sauce" Responsive Design Refresh Using Twitter Bootstrap and OU Campus
Download as PPTX, PDF0 likes299 views
This document summarizes the responsive design refresh of the University of Tennessee at Chattanooga website using Twitter Bootstrap and OU Campus. It describes the implementation timeline from October to July, including preparing designs, training staff, and launching the new site. It discusses the responsive template choices and features like profiles, search, and integrating the library site. Snippets and templates provided flexibility for customizing pages while maintaining standards. Proper planning, training, and communication were keys to the successful website redesign and transition.
OmniUpdate User Training Conference 2014: Our "Special Sauce" Responsive Design Refresh Using Twitter Bootstrap and OU Campus
- 1. Our "Special Sauce" Responsive Design Refresh Using Twitter Bootstrap and OU Campus C. Daniel Chase - @cdchase The University of Tennessee at Chattanooga
- 2. Agenda • Implementation • Responsive Design • Template Choices • Profiles • Site Search
- 3. Implementation October - January • Prepare – Design – Architecture plan – Technical Review Board – Steering Committee – Commit • Web Reboot Team – Cross-disciplinary – Weekly meetings • Sell It to – Executive staff, then campus – Show new design & functionality – Meet with Library and plan integration
- 4. Implementation January - July • Training Plan • Dean Evans EMS Master Calendar • WordPress CAS • Train, Train, Train! – Web Reboot Team+ – Early Adopters – Campus – 263 by July 31; 334 currently – Mailing List • Web Workshops • Open Labs • Launch!
- 5. Site Architecture • Two Staging / Production Servers (oucstage0/1/9) • Three Frontend Web Servers (webouc0/1/2) • Shared file storage - SAN • F5 Big IP Load Balancer • Separate Firewalls for Public access & OU Campus interface • Recommend: Separate database cluster
- 6. Responsive Design • Bootstrap - http://getbootstrap.com/ • Currently using v2, will move to v3 • Uses LESS CSS preprocessor - http://lesscss.org/ – Variables – Mixins – Nesting – Functions • 12-column responsive grid • JavaScript plugins • Other tools – YOURLS - http://yourls.org/ – Adaptive Images - http://adaptive-images.com/
- 8. How to be Responsive • We used Bootstrap 2.3.2 with Font Awesome icons • Initial HTML using Kickstrap – http://getkickstrap.com/ • Examples to get started: – WrapBootstrap - https://wrapbootstrap.com/ – Bootsnipp - http://bootsnipp.com/ • Custom CSS used on both blogs and OU Campus site – Templates based on Bootstrap – WordPress uses child theme with BootSwatch style custom CSS – http://bootswatch.com/
- 9. How to be Responsive • Host our own CSS • Use CDN for JavaScript & fonts • Off-canvas and drop-down side navigation uses Bootstrap components • CSS customization done in LESS, and compiled to CSS • Tools – Coda for IDE – CodeKit to compile LESS
- 10. Template Choices • User Templates – Interior Page – Interior Section – Profile Page • Admin Templates – Profile Section – Secondary Page – Secondary Section – Slide • Utilities – Department Section – Individual Section
- 11. Template Flexibility • Custom Header & Footer by section • Full Width Page • Custom Template for Library • CAS-enabled sections
- 12. Library • Custom front page • No Breadcrumbs
- 14. Secret to Happiness • Satisfy editors that want to customize their page perhaps a little too much? • Easy for web administrators to get clean standardized code? • The secret?
- 15. OU Campus Snippets! • Interior Page enhancements – Sidebar Well – 2 Column Flow – Hero Unit – Profile Group • Video & Embedded Media – Wide in blue frame with caption – Normal in blue frame with caption – Wide / HD – Normal • Images & Captions – Media object with description – Left-aligned image with caption – Right-aligned image with caption – Row of two with captions – Row of three with captions
- 16. Profiles • OU Campus MultiEdit! • Standardized fields • OU Campus Multi-Channel Output generates XML used by Index • XML can be harvested for other purposes • Edits of individuals can be made by editors • OU Campus Snippet for Profile Groups
- 18. Profile Groups
- 19. Site Search • OU Campus easily allows integration of PHP code within templates • Google Search Appliance from UT System • XML API query for results • Customized GSA output XSL • PHP go-between helps fine tune queries • Basis for 404 Page
- 20. Search - 404 • We changed our URL format • Rewrites created for Top ~250 pages • All department names & shortcuts • YOURLS - http://yourls.org/ • What about the rest? • 404.htm JavaScript redirect to 404.php • Parse URL for words • Do Search based on those words! Ex: http://www.utc.edu/Academic/Business/FriersonChair/battle
- 21. Other Site Features • Event Calendar Integration with EMS • Unit-specific calendar feeds with HTML5 MicroData tagging • Front content is fed directly from news blog • Unit-specific blog feeds available • Social Media streams on front • Unit-specific social media streams <div itemscope itemtype="http://schema.org/Event"> <strong><a href="http://events.utc.edu/MasterCalendar/EventDetails.aspx?data=hHr80o3M7J5Y4PXRZC3XJL0SwrS9vs6FkpitvAm45Uc8pv YTqpNxxxnaCxPuZfwj"><span itemprop="name">Southern Composers League Forum Concert</span></strong></a><br /> <em><small><time itemprop="startDate" datetime="2014-02-20T19:30:00-05:00">Feb 20, 7:30 PM to 9:30 PM</time></small></em> <div itemprop="location" itemscope itemtype="http://schema.org/Place"> <span itemprop="name">Roland Hayes Concert Hall</span> </div> <span itemprop="description">Southern Composers League Forum Events.All events are open to the public. Free admission.</span> </div>
- 22. Implementation Checklist • Get all your key players in one room early • Design concept for multiple sites • The HTML mockup provided to OmniUpdate should be fully responsive • Plan your transition from old site to new – Rewrites, Search • Manage your sites & editors • Get ready to provide training & support to all editors during conversion and after • Communicate expectations early • Plan to keep old site available for a short time under alternate name • Set a Launch date and stick to it!
- 23. Questions? C. Daniel Chase - @cdchase Dan-Chase@UTC.edu
Editor's Notes
- #3: Thank you to our Implementation Team, Alisa Harrison, Robert Kiffe, Greg Pitts