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.

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/

7. Responsive Comparisons

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

17. Profiles
Individual Index

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