Transcript Document
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 2012 70% Growth of global mobile data traffic in 2012 45% Americans own a smartphone 31% Americans own a tablet computer 12-fold Mobile traffic in 2012 vs. entire Internet in 2000 2013 Mobile-connected devices will exceed the world's population Source: EdTechMagazine.com Source: Microsoft Tag USFCA.EDU Mobile Traffic • Mobile traffic: 16% in July, 13.78% in S’13, 10% in F’12 • 50% iPhone users, 23% iPad users Mobile is a priority for USF • Communicate our USF 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: Gomez 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 What’s 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: - Don’t 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 - Don’t use tables for layout - Don’t specify widths in your images 3. Reduce, reduce, reduce content. What is essential to read? Formatting Examples 1. Remove extra space above the page title 2. Change the Quick Link menu name 3. Remove odd, inline text styles View the Web Communications & Services blog to see more postings on formatting fixes for mobile devices. If you need help fixing any of your web pages, just send the page name to [email protected] and we will be more than happy to help make the fix for you!