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

Ektron Brown Bag: USF Mobile Website

Marlene TomAugust 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 webservices@usfca.edu and we will be more than happy

to help make the fix for you!