Embracing the mobile frontier and reaching the digital natives

V1.01

Embracing the Mobile Frontier and Reaching the Digital Natives

Jonathan [email protected]@jwall

Jay [email protected]

@jayburling

WHAT YOU WILL LEARN:

• Mobile trends: How prospective and current students use mobile today

• How to create a mobile strategy

• Native apps vs. mobile web: Which is better?

• How Hendrix College created a mobile presence in 3 months

• Tips and best practices

• Where to start

By the end of 2014, the installed base of devices based on mobile operating systems will exceed the total installed base of all PC based systems.

5

Born 1976 - Deceased… ???

Acer Dell Lenovo HP iPad

9.8m11.9m

13m

15.1m15.4m

WELCOME TO THE POST PC ERA

MOBILE TRENDS

0%

10%

20%

30%

40%

50%

60%

70%

58%63%

SMARTPHONE OWNERSHIP

Teens 13-17 Undergrads

0%

10%

20%

30%

40%

50%

60%

70%

44%

20%

TABLET OWNERSHIP AMONG TEENS

Currently ownPlan to buy in next 6 months

Admissions?

Current Students?

Faculty and Staff?

Alumni?

Device capabilities?

HTML5? N

ative app?

Mobile si

te?

Templates? m.site.edu?Responsive Web?

Smartphones? Tablets?

MOBILE STRATEGY?

RESPONSIVE WEB DESIGN

“A website that responds to the device that accesses it and delivers the appropriate output.”

Ethan Marcotte

MOBILE MATURITY MODEL

1. FORGET IT

Stay stagnant

• Flash• Fixed Page

Layout• Slow page loads• Complex Nav

2. FOCUSSubset o f

h igh va lue pages , render , l im i ted dev i ce suppor t

• Support popular devices & screen sizes

• Simplified navigation for mobile pages

3. FRIENDLYSite-wide

mobile experience

• Optimized for speed

• Fluid, not fixed design

• Mobile enabled site applications

• Segment devices by screen size and features

Think mobile

fi rst

• Mobile strategy and vision

• Extensive use of HTML 5

• Leverage device capabilities like location, orientation, cameras,

• Tough centric- user interactions – DRAG CLICK PRESS

4. MOBIILE FIRST

TARGETED, RELEVANT CONTENT

NATIVE APPS VS MOBILE WEBResponsive Web Mobile Web Mobile App

Easy to update content

Accessible to all, no installation required

No need to download new version to upgrade

Content discoverable through search

User experience similar on different mobile platforms

Lower cost/time to develop

Full website content providers

Only need to update one site

Offline use

Uses device capabilities – camera, accelerometer

http://gomobile.tamu.edu/Texas_A_M_Mobile_Strategy/index.php

http://www.ektron.com/Case-Studies/Education/Hendrix-College/

HENDRIX WEB AND MOBILE GOALS

• Provide ALL of the site’s content

• Reach our constituents where they are now

• Be device agnostic• Reach all of our users,

but focus on Prospective Students

HENDRIX APPROACH

• No to native app• Mobile website?

HENDRIX APPROACH - Strategy

Mobile First

Responsive (Adaptive)

Design

Refocused Content

and Navigation

HENDRIX APPROACH - Technical

• MasterPages• Standard templates• PageBuilder templates

• Device Width• Designed on Grid• CSS3 Media Queries• Image resizing tricks

HENDRIX RESULTS

• Success!

TIPS AND BEST PRACTICES FOR MOBILE AT YOUR SCHOOL

1: AVOID WEBSITE BY COMMITTEE

2: UNDERSTAND YOUR VISITORS

RegionPercent

Massachusetts 12%California 9%Illinois 6%New Hampshire 6%New York 6%Texas 5%Virginia 4%Pennsylvania 4%Florida 4%Maryland 4%

VISITORS BY STATE

VISITORS BY CITY

3: HAVE MOBILE FRIENDLY CONTENT FORMATS

System RequirementsYou will need a computer with a

soundcard and Adobe Flash Player

4: MAKE LAYOUTS FLEXIBLE

• Detect devices and screen size

• Set breakpoints for common screen sizes

5: OPTIMIZE FOR SPEED

• Adaptive image resizing• Automatically resize

• Perform resizing on the server side

• Minimize large chunks of content

• Reduce # of form fields

320px

700px

6: MOBILE FRIENDLY DESIGN

• Use large buttons and touch targets

• Vertical navigation for smaller screen sizes

• Clear “Home” buttons

7: DEVELOP WITH CONTENT IN MIND

• Use real content

• Design for web, smartphone and tablet at the same time

• Separate content from presentation

8: TARGET CONTENT

• Know your visitors

• Design your site to provide relevant, targeted content

• Create simple targeting rules• “If from your_school.edu

show class registration info”

• If from other_state, show ‘how to apply’”

Student type

9: ENRICH THE STUDENT EXPERIENCE

• Use geolocation to surface events

• Send text messages to accepted students

• Use the camera and social apps

• Make your course catalog mobile friendly

WHERE TO START

1. Start with your strategy

2. Prioritize3. Start small

http://j.mp/emsmash http://j.mp/mmmedu

Jonathan [email protected]@jwall

Jay [email protected]

@jayburling