ONE SITE TO RULE THEM ALL The journey to mobile and back Corey Cooper Associate Director of Enterprise Systems MOBILE TRENDS % Desktop 12% Mobile/Tablet % Desktop 20% Mobile/Tablet % Desktop 28% Mobile/Tablet RESPONSIVE DESIGN? MOBILE DETECTION? How about both? We took existing templates, added a mobile detection container, and if mobile, parse a VTL file which defines new containers for mobile. 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) 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? DYNAMIC CONTENT Future student / Parent toggle Geo-location Randomized ads, Instagram images GET LAT/LONG BASED ON USERS 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 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 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: a- 4c 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 counselor = counselor. ; 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 NEXT STEPS Expose login for internal users CAS Integration Role-based landing pages URL variable passing Jquery BBQ Content based on user persona / metadata 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) Corey Cooper Associate Director of Enterprise Systems THANK YOU!