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
- 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
- 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
- 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!
Editor's Notes
- Thank you to our Implementation Team, Alisa Harrison, Robert Kiffe, Greg Pitts