Post on 16-Aug-2015
Our "Special Sauce" Responsive Design Refresh Using Twitter Bootstrap and OU Campus
C. Daniel Chase - @cdchaseThe University of Tennessee at Chattanooga
Agenda
• Implementation• Responsive Design• Template Choices• Profiles• Site Search
ImplementationOctober - 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
ImplementationJanuary - 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!
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
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/
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/
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
Template Choices
• User Templates– Interior Page– Interior Section– Profile Page
• Admin Templates– Profile Section– Secondary Page– Secondary Section– Slide
• Utilities–Department Section– Individual Section
Template Flexibility
• Custom Header & Footer by section• Full Width Page• Custom Template for Library• CAS-enabled sections
Library
• Custom front page• No Breadcrumbs
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?
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
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
Profiles
Individual Index
Profile Groups
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
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
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=hHr80o3M7J5Y4PXRZC3XJL0SwrS9vs6FkpitvAm45Uc8pvYTqpNxxxnaCxPuZfwj"><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>
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!
Questions?
C. Daniel Chase - @cdchaseDan-Chase@UTC.edu