Ektron Brown Bag: USF Mobile Website Marlene Tom August 7 &16, 2013

Agenda 1.USF Mobile Strategy 2.Demo of Mobile Website Layout 3.Example Page Formatting Fixes

Growth in Mobile Device Use 87% Americans own a cell phone 81% Growth of smartphone usage in % Growth of global mobile data traffic in % Americans own a smartphone 31% Americans own a tablet computer 12-fold Mobile traffic in 2012 vs. entire Internet in Mobile-connected devices will exceed the world's population Source: EdTechMagazine.comEdTechMagazine.com

Source: Microsoft TagMicrosoft Tag

USFCA.EDU Mobile Traffic Mobile traffic: 16% in July, 13.78% in S13, 10% in F12 50% iPhone users, 23% iPad users

Mobile is a priority for USF Communicate our USF mobile strategyUSF mobile strategy 1.Oversight, request, and assessment process 2.Define mobile areas and technologies -USF websites -Official USF mobile app umbrella -Mobile publications 3.Roadmap and priorities set -Mobile app: Admission content and campus tour -Mobile publications: Admission and Development publications

USF Mobile Websites The long-term solution is responsive web design

Next Steps for the Mobile Website Secure funding in FY 2015 for a full web redesign Revise all web content thinking about mobile first Importance of mobile optimization: 74% of consumers will wait 5 seconds for a web page to load on their mobile device before abandoning 46% of consumers are unlikely to return to a mobile site if it didn't work properly during their last visit 71 % of mobile browsers expect web pages to load almost as quickly or faster as web pages on their desktop computers Source: GomezGomez

Summer 2013 Mobile Website Project A web-friendly presentation of the website launched in July 2013 for mobile devices This is a short-term fix, not a real solution. This will primarily optimize an iPhone experience, but does not account for all other mobile devices Content is not optimized for a mobile experience

Whats Changed in the Mobile Layout? Same layout/templates! Css & Javascript alter the layout view for a mobile experience. Certain elements had to be hidden Banner 150 boxes are not viewable Right-hand contents, except for navigation menus Slideshow captions will not appear Optimized for iPhone portrait view & iPad iPhone landscape will still default to a desktop view Larger mobile phone screens will have an extra 20 padding of white-space

How Can You Optimize Your Pages? 1.Review your web pages from a smartphone. Can you see the essential information? 2.Formatting: -Dont use inline styles. Use the styles in the Ektron WYSWIG menus. Adding in your own font tags, colors, and sizes will not reformat in size for a mobile screen -Dont use tables for layout -Dont specify widths in your images 3.Reduce, reduce, reduce content. What is essential to read?

Formatting Examples 1.Remove extra space above the page titleRemove extra space above the page title 2.Change the Quick Link menu nameChange the Quick Link menu name 3.Remove odd, inline text stylesRemove odd, inline text styles View the Web Communications & Services blog to see more postings on formatting fixes for mobile devices.formatting fixes for mobile devices If you need help fixing any of your web pages, just send the page name to and we will be more than happy to help make the fix for