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/

Responsive Comparisons

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