1. ONE SITE TO RULE THEM ALL The journey to mobile and back Corey Cooper Associate Director of Enterprise Systems crcooper@taylor.edu

2. MOBILE TRENDS www.taylor.edu 2012 88% Desktop 12% Mobile/Tablet 2013 80% Desktop 20% Mobile/Tablet 2014 72% Desktop 28% Mobile/Tablet

3. RESPONSIVE DESIGN? MOBILE DETECTION? How about both?

4. We took existing templates, added a mobile detection container, and if mobile, parse a VTL file which defines new containers for mobile.

5. THE WINNING COMBINATION Frameworks Foundation 5 (foundation.zurb.com) jQuery Mobile (jquerymobile.com) Filtering & Sorting Isotope (isotope.metafizzy.co) Images loaded (desandro.github.io/imagesloaded) CSS Preprocessors Sass (sass-lang.com) Compass (compass-style.org) Other jQuery Mmenu (mmenu.frebsite.nl) Slick (kenwheeler.github.io/slick)

9. DYNAMIC CONTENT – THE HOLY GRAIL Average session length on taylor.edu – 3 min How do you give the user what they are looking for? Roles / Personas Geolocation Referrer data / Clickstream Let them identify themselves Fine line between helpful and stalker?

10. DYNAMIC CONTENT Future student / Parent toggle Geo-location Randomized ads, Instagram images

11. GET LAT/LONG BASED ON USER’S GEOLOCATION USING HTML5 function getLocation() { if (navigator.geolocation) { //console.log(navigator.geolocation); navigator.geolocation.getCurrentPosition(findState, showError); } else{counselorDiv.innerHTML = ' Meet Your Counselor Your web browser cannot provide your location. Please try searching instead. Find your counselor » '}; } //end of get Location HTML5 Geolocation API

12. LOOKUP STATE USING LAT/LONG - GOOGLE MAP API function findState(position) { var myLong = position.coords.longitude; var myLat = position.coords.latitude; var myUrl = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' +myLat +',' +myLong +'&sensor=true'; jQuery.ajax({ url:myUrl, success: function(geocodeResponse){ var myArray = geocodeResponse; var resultFields = (myArray.results[1]); jQuery.each(resultFields.address_components, function(i, addressSection){ var addressTypeArray = addressSection.types; var arrayNum = jQuery.inArray("administrative_area_level_1", addressTypeArray); if(arrayNum > -1){ var myLongState = addressSection.long_name; var myState = addressSection.short_name; findCounselor(myState, myLongState); Json call Get state

13. FIND STATE MATCH IN CONTENT STRUCTURE USING JSON function findCounselor(geoState, geoLongState){ if(geoState && geoState.length > 0){ var counselorUrl = '/api/content/type/json/query/+structureName:Employee%20+conhost:75957395-917a- 4c73-9536-cc93af162797%20+Employee.state:' +geoState; jQuery.ajax({ url: counselorUrl, dataType: 'json', success: function(counselorList) { if(counselorList.contentlets.length == 0){ // if counselor is not found … }else{ // if counselor is found var counselor = counselorList.contentlets[0]; var counselorFirstName = counselor.firstName; var counselorName = counselor.firstName +' ' +counselor.lastName; var counselorPhone = counselor.phone; var counselorEmail = counselor.email; var counselorImage = counselor.thumbnailPhotoContentAsset; var counselorUrl = '/employee/staff/' +counselor.urlTitle; REST API JSON Call Using State Filter in Query Create variables based on structure fields

14. NEXT STEPS Expose login for internal users CAS Integration Role-based landing pages URL variable passing Jquery BBQ Content based on user persona / metadata

15. LESSONS LEARNED Design for mobile first Shape sizes Squares of size 2^n Make sure your content people are on board Sass – use early, use often Start small – every role exponentially adds to your content load (lots of javascript libraries is difficult also)

16. www.taylor.edu/bootcamp2014/ Corey Cooper Associate Director of Enterprise Systems crcooper@taylor.edu THANK YOU!