Mobile at USC Common Solutions Group University of Minnesota, June 2011

Mobile Forest Mobile devices are personal and social Main use for mobile devices is for social networking Convergence of the mobile web and the social web

Goals Not interested in Monetizing Apps Our Information is the value we bring Focus on offering sites communicating information Minimize cost of delivery Leverage existing expertise in HTML, CSS, Javascript, php No new languages to learn Maximize outreach Target as many devices as possible with minimal effort Target wide populations Use Semantic Markup and Graceful Degradation

Mobile Web makes sense… … but it’s hard: hours of QA for each hour of development Landscape a constant, moving target Frequent browser updates, new devices, OS flavors and updates In 2011, over 200 new tablets and over 250 smartphones are expected Impossible to test everything A lot of convergence around Webkit, but every manufacturer still makes their own Inconsistent support for CSS3 & Javascript

So if Web Apps are right… …what should we do? Server-side mobile detection? Some argue against it, most Mobile website use it Client-side media queries? Does size matter? Need better device-sensitive design for images, content, architecture Always offer Mobile? Or project by project basis. Need a way to manage the Mobile sites through a CMS

Mobile Approach at USC Separate mobile web sites and web apps with server-side detection Mobile.usc.edu/news Populate with XML, JSON feeds from CMS generated content Fast, light, low ramp up, low maint, customized content Cookies for persistence to avoid doing detection every time But... Need to bake it into every website, need to steer them to the information they’re after. CSS media queries built in to main stylesheets Not relying on server-side detection based on user agent sting No separate codebase – everything baked into the main CSS code Works with CMS’s, no need for custom feeds Good method for multi-device support (iPads, Netbooks, etc) But… it’s less flexible with content and organization; more difficult to optimize images; ALL of the markup is sent to the client, even parts that do not display or are desired; still requires an initial dev & QA of the CSS.

Mobile UI design Considerations Make use of established conventions iPhones look like iPhones, Androids look like Androids, etc. Large touchable areas, arrow icons, standard placement of features, etc Keep things fast and simple, don’t over-crowd the design Think in terms of Overview -> Detail Consider the device size, finger size, screen areas easy to reach 3-click rule, back buttons, and navigation Use technologies with good support for Mobile: CSS3 transitions, animations, gradients Make use of HTML5 and CSS3 instead of Javascript where possible Consider battery life, rendering options and network roundtrips Prototype early and often

Other Challenges, Bonuses with Web Apps App discovery How do we use HTML5 and local storage to offer offline functionality? Will the experience ever be as good as with native apps? Will there ever be full access to all device-specific capabilities through web apps, as there is through native apps? Is GPS all there is? What new sensors will come along? But… SSO works with web apps! Per-user profiles, identity, reputation, connectedness, activity streams

Demo & Stats Usage in March 18,060 visits 31,229 Pageviews 1.73 pages per visit User stats in March iPhone: 37.4% Android 12.5% Windows 8% Blackberry 7% Other 24% USC Homepage mobile stats in March 36,767 visits 14 identified OS’s iPhone 14,784 visits iPad 8,676 visits Android 7,825 visits iPod 3,029 visits Blackberry 1,868 visits

Staying on top Mobile strategies age fast Poll your community 1-2 times a year Needs, habits, devices Improve BI inventory on social and institutional data Determine the relevant information to bring out Go where your community is Goals Improve business processes, workflows, FTE effectiveness Increase use of information and analytics Improve CRM Recruit better

Q & A Asbed Bedrossian