Using Mobile for Your Message: A Process and a Strategy for Mobile Web Development

Using Mobile for Your Message:A Process and a Strategy

for Mobile Web Development

Evan Donovan

Focus of this PresentationKey question: “I already have a web site / web

content, and want to make it mobile-friendly. How can I best do that?”◦More of a Web-centric perspective, rather than a device-

centric perspective◦Both are valid for different use cases◦We are focusing here on ministries with media they wish

to shareProviding entry points for further study, and a

conceptual framework to evaluate what you learn◦…not to provide one definitive answer

Providing a broad strategy for how to view your project

Our Experience Existing websites:

◦ UrbanMinistry.org – over 100,000 items of audio, video, and text content Site uses Drupal CMS (PHP-based, themeable)

◦ ChristianVolunteering.org – directory of over 10,000 volunteer & missions opportunities Written in JSP, using Struts framework (Java, hard-coded templates)

2 years ago: Developed iPhone and Android native apps with two functions:◦ Browsing UrbanMinistry.org content, via a native web view element

that embedded a mobile theme of the site◦ Searching ChristianVolunteering opportunities

Now: Working on a hybrid app that will allow us to have one codebase for both platforms, presenting same content

Separately, I have also worked on several responsive design projects

About You: Quick SurveyHow many are app developers? How many are

missions workers who have hired developers or are considering hiring them?

Of developers, how many have developed a mobile app before?

How many targeted a specific device?How many used HTML5 to build a cross-device

web app?How many used responsive design?How many people have a separate mobile site?These options will be defined & discussed further

on.

Mobile Web Development: An 8-Step ProcessEvaluation

Planning

Development

Design

Testing

Release

Assessment

Maintenance

Note: Development, Design, and Testing should be an iterative process (going on concurrently prior to release), but are represented as sequential here for simplicity in presenting.

Mobile Web Development: An 8-Step ProcessEvaluation

Planning

Development

Design

Testing

Release

Assessment

Maintenance

Evaluation: Should we use mobile?• Technology & Market Trends• Opportunity for Economic Development• Opportunity for the Church• Challenges of Mobile

Mobile Web Development: An 8-Step ProcessEvaluation

Planning

Development

Design

Testing

Release

Assessment

Maintenance

Planning: How Will We Use Mobile?• 4 Criteria for Choosing an Approach: Intent, Audience, Resources,

Sustainability• Scope of This Comparison: What is Favored & Why• 4 Broad Approaches: Web Site, HTML5 Web App, Hybrid App,

Native App

Mobile Web Development: An 8-Step ProcessEvaluation

Planning

Development

Design

Testing

Release

Assessment

Maintenance

Development: Building Your Mobile App• Initial Definitions• 3 Architectures: 2 Hybrid & 1 Web Site-Based• Caveats

Mobile Web Development: An 8-Step ProcessEvaluation

Planning

Development

Design

Testing

Release

Assessment

Maintenance

Design: Making an App that Delights Users• Focus on the User’s Goals• Simple Navigation• Essential Graphics Only• Use Phone’s Features

Mobile Web Development: An 8-Step ProcessEvaluation

Planning

Development

Design

Testing

Release

Assessment

Maintenance

Testing: Ensuring a consistent, pleasurable, and successful experience• Cross-Device Testing• Usability Testing

Mobile Web Development: An 8-Step ProcessEvaluation

Planning

Development

Design

Testing

Release

Assessment

Maintenance

• Release: Getting Your App Out There

Mobile Web Development: An 8-Step ProcessEvaluation

Planning

Development

Design

Testing

Release

Assessment

Maintenance

• Release: Getting Your App Out There• Assessment: Evaluating Your App’s Impact

Mobile Web Development: An 8-Step ProcessEvaluation

Planning

Development

Design

Testing

Release

Assessment

Maintenance

• Release: Getting Your App Out There• Assessment: Evaluating Your App’s Success• Maintenance and New Development: Keeping usable,

relevant, and fresh

Technology & Market Trends“We are now in the 5th major technology cycle of

the past half century” (Mary Meeker)◦ Mainframe -> Mini -> PC -> desktop Internet -> mobile

Projected 26x growth in mobile use over next 5 years

Around 80% of world’s population currently has a mobile phone

Japan’s leading social network had more mobile views than desktop views in 2007 (5 years ago)

Mobile is spurring a reimagining of nearly everything (convergence of mobile-local-social)

1 Evaluation

Opportunity for Economic Development

The Internet and mobile technology may prove to be “the most transformative technology for economic development of our time” (Jeffrey Sachs)

Half of Africa’s 1 billion population has a mobile phoneLandlines surpassed by mobiles worldwide in 2002.

2/3rds world didn’t have old phone infrastructure to replace.

Twice as many phone users in Mozambique as people with access to electric grid.

In India, government subsidies are now provided by cell phone. Throughout Africa cell phones used for payment.

Cell phones used as e-readers in Kenya

1 Evaluation

Opportunity for the Church

Mobile could be greatest opportunity for Christian media since radio

People live in a world that is “always on”, always social. But negative effects of popular culture are ever-present. We need to make Word of God just as readily available.

Our vision: Many media, many devices, many languages, one message

1 Evaluation

Challenges of Mobile

Rapid development and changeLack of established “best practices”Multiplicity of devices one could targetBut…in light of opportunity, and threat if

we don’t pursue this, we have to occupy this space

1 Evaluation

4 Criteria for Choosingan Approach: Intent

Is your app more content-driven or task-driven?

Content-driven: Engagement over a longer period of time, people consuming audio, video, or text

Task-driven: Short bursts of engagement as people get something done in the moment and move on◦Examples:

Social: social networks, location-based apps, activity trackers

Utilities: calculators, planners, etc.

2 Planning

4 Criteria for Choosingan Approach: Audience

Who are you attempting to reach with this project? Based on demographics, what type of mobile

devices is that audience likely to use?◦ US

◦ Smart phones equal to feature phones for first time in Feb. 2012◦ Of those, Android is 48% and iOS 32%

◦ 2/3rds world◦ China, India, Indonesia at <10% smart phone penetration in early

2012◦ In late 2011, global smart phone penetration at 27%

Conclusions: ◦ iPhone-only development limits your audience◦ May want to target feature phones also if intended for use

in developing world

2 Planning

4 Criteria for Choosingan Approach: Resources

What you have available now – upfront cost“Iron Triangle” of project management – Time,

Budget, FeaturesHuman resources also key:

◦Are you hiring consultants/a firm to develop or are you going to do it in house?

◦Do you have more designers or developers?◦What skills do they have that could be transferred into

mobile development: HTML CSS JS Specific programming languages (PHP, Ruby, Java, etc.)

2 Planning

4 Criteria for Choosingan Approach: Sustainability

What you will have available in the future – maintenance cost

How much are you willing to invest in future development to stay up to date?

Reasons for future development:◦New OS versions for mobile devices◦New mobile devices to target◦New interaction patterns (like touch)◦App development framework version changes◦New mobile best practices (like responsive design)◦New web standards (HTML5)◦New branding / goals for your app (keeping fresh &

relevant)

2 Planning

Scope of This Comparison:Assumptions

Intent: Wanting to communicate a message = a content-driven app.

Resources: ◦ Limited, but with existing website and in-house or

contracted developers◦ Developers know HTML, CSS, JS, and a programming

languageSustainability:

◦ Willing to keep up to date with a framework◦ Want to make use of web standards where possible

Advantage of open standards vs. closed specs for devicesThis is TechMission’s situation. Many Christian

ministries may be similar.

2 Planning

Scope of This Comparison:Excluded Options

Native App Development without Using Web APIs or Pages◦Good for games, but not for content-driven app

Adobe/Apache Flex (i.e., Flash for Mobile)◦Adobe now backs PhoneGap instead, since

many devices (including iPhone) don’t have Flash

Java-Based Frameworks Like Google Web Toolkit (GWT)◦Google may be deprecating this

2 Planning

Scope of This Comparison:Excluded Options

Native App Development without Using Web APIs or Pages◦Good for games, but not for content-driven app

Adobe/Apache Flex (i.e., Flash for Mobile)◦Adobe now backs PhoneGap instead, since

many devices (including iPhone) don’t have Flash

Java-Based Frameworks Like Google Web Toolkit (GWT)◦Google may be deprecating this

2 Planning

4 Broad Approachesto Mobile Development

2 Planning

Designer-Oriented

Developer-Oriented

Mobile Web Site

HTML5 Mobile App

Hybrid App

Native App

4 Approaches: Mobile Web Site - I

A dedicated mobile site, either with separate URL, or redirected via device targeting◦The old way of getting your content mobile while

leveraging existing investments◦Still used effectively by some (m.facebook.com)◦Has many challenges due to the number and

variety of devices◦ If you wish to use this approach, consider using a

tool like DeviceAtlas (http://deviceatlas.com/) or WURFL (http://wurfl.sourceforge.net/) for handling the device detection

2 Planning

4 Approaches: Mobile Web Site - II

Responsive Design – site layout changes with screen size, other capabilities◦Newer (since 2010) alternative to a dedicated

mobile site◦Feature targeting, not device targeting (can be

more reliable)◦Caveats:

Dedicated site may be better for featurephones, if needed

Responsive Design doesn’t necessarily cut down on bandwidth (important factor for mobile)

2 Planning

4 Approaches: HTML5 Mobile App

Use a JS framework to implement mobile interaction patterns and UI

Main alternatives:◦jQuery Mobile: Cross-browser app solution

using HTML5 & jQuery◦jQ Touch: Similar but less capabilities; seems

less commonly usedComparison:

http://jquerybyexample.blogspot.com/2012/02/jqtouch-vs-jquery-mobile.html

2 Planning

4 Approaches: Hybrid App

Use a cross-device development framework, and, optionally, a UI framework for the display layer

Development Frameworks:◦ PhoneGap◦ AppAccelerator Titanium◦ Comparison: http://

www.universalmind.com/mindshare/entry/mobile-html5-phonegap-vs-appcelerator-titanium

UI Frameworks:◦ AppAccelerator Titanium◦ Sencha Touch◦ jQuery Mobile◦ Comparison:

http://operationproject.com/2011/adventures-in-html5-part-one/#.UABoofV0bac

2 Planning

4 Approaches: Native App

Develop for a native platform (iOS, Android, Windows Mobile, Blackberry, etc.)◦ May need to create multiple versions of the app◦ Potentially these could require different programming

languagesTrue native feel & performance, but most time-

consuming and developer-centric approachCan use web APIs to pull in data via JSON or XML and

then render using native UI elementsHowever, can also embed web pages. This is quicker,

but makes your app essentially a wrapper around mobile Safari or whatever the browser is for your device.

2 Planning

4 Approaches: More Info

Definitions of approaches: http://econsultancy.com/uk/blog/7832-the-fight-gets-technical-mobile-apps-vs-mobile-sites

Comparison chart: http://www.markus-falk.com/mobile-frameworks-comparison-chart/◦Especially helpful if your requirements are

known upfront (such as what language you can develop in)

2 Planning

Building Your Mobile App:Initial Definitions

3 Development

1. Client makes request (HTTP GET)

2. Server returns response (HTML + JS, CSS)

Anatomy of an HTTP Request

Client

Server

Building Your Mobile App:Initial Definitions

3 Development

Model-View-Controller (MVC) Architecture

Client

Server

Web Server

Database

Application Layer

Controller View

Model

1. HTTP GET request

2. Request dispatched to Controller

3. Controller handles by requesting data from Database via Model

4. Data is returned from Database

5. Data rendered into View

6. View returned to client as HTML

Architecture 1: PhoneGap + Sencha Touch

Advantages:◦More native app feel◦Yet don’t have to write code for specific devices◦Can leverage content of site (if site provides

content via JSON API)Disadvantages:

◦Resources: Need a developer familiar with Javascript Initial learning curve of framework (more like Java

than regular Javascript)◦Sustainability:

Lock-in to Sencha APIs No direct use of HTML5

3 Development

Architecture 1: PhoneGap + Sencha Touch 3 Development

Client

Server

Web Server

Database

Application Layer

Controller

Model

1. Link/button pressed, with corresponding URL

2. HTTP request from app

3. Server receives, dispatches, queries

4. Sends JSON response

5. Sencha Touch code in app parses and renders into HTML

6. HTML displayed on device

Phone

PhoneGap JS

Sencha Touch JS (View)

Advantages:◦Don’t have to write code for specific devices◦Can leverage content of site◦jQuery Mobile uses web standards (HTML, CSS,

JS) as its baseDisadvantages:

A bit of a hybrid feel, as header/footer may look native, but elements embedded in middle of page may not look as native

May need some custom development in order to get site to serve HTML snippets that can be embedded in jQuery Mobile, or to have a jQuery Mobile theme (if using a CMS)

3 DevelopmentArchitecture 2: PhoneGap + jQuery Mobile from Site

Architecture 2: PhoneGap + jQuery Mobile from Site 3 Development

Client

Server

Web Server

Database

Application Layer

Controller

Model

1. Link/button pressed, with corresponding URL

2. jQuery Mobile intercepts to make it an AJAX request (no page reload)

3. HTTP request from app

4. Server receives, dispatches, queries

4. Sends HTML snippet response

5. jQuery Mobile receives AJAX response of HTML snippet, replaces contents of main <div>

Phone

PhoneGap JS

jQuery Mobile Base (View)

ControllerHTML Snippet (View)

Advantages:◦ Don’t have to write code for specific devices◦ Can leverage content of site◦ Make use of web standards and common web development practices

(with some modification)◦ Redesigns are achievable more rapidly than with app development

Disadvantages:◦ Will follow web conventions largely, so won’t look as much like ◦ HTML5 (and CSS3) is a standard in progress (so check what is

supported)◦ No app store to act as a distribution mechanism, will display in the

browser◦ May be some limitations to the site that would make some mobile

viewers wish to be able to see the “full site” This may be possible through a special link to it

◦ Sometimes laggy performance if hidden images, large images, etc. are downloaded

3 DevelopmentArchitecture 3: Responsive Design Website

How It Works:◦Standard HTTP request model (since it is a regular

website)◦ Add Media Queries to the theme/template for site to target

specific devices based on screen width Use flexible grid system in CSS to make adjusting layout easier Targeting approaches:

◦ Original method: set defaults for large screens and then override for small

◦ Mobile-first: design first for small screens, then scale up

◦ Incorporate a means of making images scale dynamically◦ Often use a JS library like Modernizer for feature detection◦ Often use a dynamic stylesheet language like LESS to

simplify writing CSS

3 DevelopmentArchitecture 3: Responsive Design Website

Focus on User’s GoalsSimple NavigationEssential Graphics OnlyUse Phone’s Features

4 Design4 Key Principles of Mobile UX Design

Cross-device Testing: to ensure sufficiently consistent experience◦Emulators◦Both Android & iPhone (if targeting them)◦Opera Mini

Usability Testing: to ensure successful & pleasurable experience for users◦Formal or informal, depending on budget◦Lab vs. field testing: main difficult is recording◦Task success rates: feature phones 38%, smartphones

55%, touch phones 75% (Jakob Nielsen, 2011) Compare to 78% success rate for websites on desktop in 2010

Note: Automated checklists don’t give very accurate results

5 Testing2 Types of Testing Needed

Native App/Hybrid App: App Store or Marketplace◦ Uses standard distribution mechanism for the device◦ Advantages:

App store provides monetization, marketing channel Will have icon for launching app

◦ Disadvantages: Time to go through approval process Need to comply with terms

Responsive Site/Mobile Site: No phone-integrated system◦ Launch & market like a normal website◦ Advantages:

Quicker release No external constraints on development or content

◦ Disadvantages: Don’t have app store for marketing channel Monetization would have to be of website itself

◦ Note: Some devices allow users to create an icon for a website But would users actually do that?

6 Release2 Alternatives for Releasing App

What to Assess◦Usefulness◦Appeal◦Reach◦Impact

How to Assess◦Analytics

Google Analytics Flurry (part of app)

◦Talking to People◦Other means?

7 AssessmentEvaluating Your App’s Success

Change is inevitable; expect to have to do new development eventually◦Timeframe may be dependent on your audience,

chosen platform, and organizational prioritiesPractice user-centered design: Listen & give

your users what they wantThe cycle begins again…

8 Maintenance & New DevelopmentKeeping Up with Change

Appendix:Sources & Additional Information

Technology & Market Trends “5th major technology cycle”: Mary Meeker quoted in http://

buytaert.net/files/state-of-drupal-march-2012.pdf 2010 inflection point - http://

www.slideshare.net/kleinerperkins/kpcb-top-10-mobile-trends-feb-2011, slide 7

26x growth - http://www.slideshare.net/kleinerperkins/kpcb-top-10-mobile-trends-feb-2011, slide 20

80% world’s population - http://en.wikipedia.org/wiki/List_of_countries_by_number_of_mobile_phones_in_use

Japan’s social network > mobile than desktop - http://www.businessinsider.com/mary-meekers-web-2010-11, slide 11

Reimagination of nearly everything - http://www.slideshare.net/kleinerperkins/kpcb-internet-trends-2012, slides 29 & following

Demographics - http://www.icharts.net/chartchannel/chart/2011/well-defined-demographic-profile-apps-users

Opportunity for Economic Development “Most transformative technology” - http://

economistsview.typepad.com/economistsview/2008/08/the-internet-ce.html

Half of Africa’s population - http://www.guardian.co.uk/technology/2011/jul/24/mobile-phones-africa-microfinance-farming

map of mobile phones per 100 people, 2009 - http://lebanese-economy-forum.com/wdi-gdf-advanced-data-display/?curve=IT-CEL-SETS-P2

more recent stats at http://www.nationmaster.com/graph/med_mob_pho-media-mobile-phones

Landlines surpassed by mobiles in 2002 - http://www.slideshare.net/kleinerperkins/kpcb-internet-trends-2012, slide 30

Number of phone users in Mozambique - http://www.audiencescapes.org/country-profiles/mozambique-who-and-what-mobile-phone-market-mozambique-mcel-vodacom-SMS-tariff-profile

Government subsidies by cell phone - http://www.slideshare.net/kleinerperkins/kpcb-internet-trends-2012, slide 79

Used as e-readers in Kenya - http://www.t-g.com/story/1835756.html

Opportunity for the ChurchMobile outreach strategies: http://

www.internetevangelismday.com/mobile-outreach.php

Little Phone that Could (stories from Africa): http://www.ijfm.org/PDFs_IJFM/27_3_PDFs/mobile_williams.pdf

Mobile/local/social as part of “bridge strategy”: http://thegraymatrix.info/index.php?page=20

Lausanne report: http://www.lausanneworldpulse.com/worldreports/735/06-2007

Challenges of MobileMultiplicity of devices:

◦Browser capability matrix: http://jquerymobile.com/gbs/

◦Comparison of capabilities: http://www.quirksmode.org/m/table.html

◦List of user agent strings: http://www.useragentstring.com/pages/Mobile%20Browserlist/

Smartphone vs. Feature Phone Smartphones equal to feature phones in US -

http://www.slashgear.com/nielsen-first-time-smartphone-and-feature-phone-usage-equal-30220760/

Penetration in developing countries - http://techcrunch.com/2012/07/01/facebooks-mobile-future-rests-on-todays-feature-phone-users/

Global smartphone penetration - http://techcrunch.com/2011/11/28/its-still-a-feature-phone-world-global-smartphone-penetration-at-27/

5 year prediction for Africa - http://techcrunch.com/2012/06/09/feature-phones-are-not-the-future/

Opera developing for feature phones still - http://idealab.talkingpointsmemo.com/2012/02/smartphones-proliferate-but-opera-browser-still-sees-opportunity-in-feature-phones.php

Comparisons of Sencha Touch & jQuery Mobile

http://www.sencha.com/forum/showthread.php?197720-Sencha-Touch-2-vs.-jQuery-Mobile-PhoneGap

http://jquerybyexample.blogspot.com/2012/02/jqtouch-vs-sencha-touch-vs-jquery.html

http://mhorner.blogspot.com/2012/02/sencha-touch-vs-jquery-mobile-high.html

http://cfc.kizzx2.com/index.php/sencha-touch-vs-jquery-mobile-a-first-look/

Native App vs. Hybrid Apphttp

://www.worklight.com/assets/files/HTML5,%20Hybrid%20or%20Native%20Mobile%20App%20Development.pdf

http://buildmobile.com/native-hybrid-or-web-apps/

Responsive Design Starter for responsive design - Bootstrap.js (from Twitter): http://

twitter.github.com/bootstrap/index.html Overview of responsive design: http://

www.lullabot.com/articles/responsive-adaptive-web-design Original article introducing responsive design:

http://www.alistapart.com/articles/responsive-web-design/ Critique of that article:

http://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ (somewhat outdated now)

Original article on mobile-first design: http://www.lukew.com/ff/entry.asp?933

Comparison between mobile-first and general responsive design: http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/

Tutorial on mobile-first design: http://www.html5rocks.com/en/mobile/responsivedesign/

Gallery of sites using responsive design: http://mediaqueri.es/

Mobile UX PrinciplesMobile Design - Special UX

Considerations: http://www.uxmatters.com/mt/archives/2011/01/designing-for-the-mobile-web-special-considerations.php

UX - 10 Ways Mobile Sites Differ From Traditional Websites - http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from-desktop-web-sites.php

Design for Mobile Experience: http://www.zdnet.com/blog/forrester/what-design-for-mobile-first-really-means/867

TestingList of emulators -

http://www.themobilewebdesignblog.com/2011/11/26/best-mobile-emulators-responsive-design-testing-tools/

Intro to mobile usability testing - http://www.slideshare.net/beleniq/diy-mobile-usability-testing-ia-summit-2011

More on mobile usability testing - http://www.slideshare.net/barbaraballard/mobile-usability-testing

Building a testing sled - http://shortboredsurfer.com/2011/09/making-a-mobile-usability-testing-sled-the-macgyver-way/

Mobile Analyticshttp://mobile.tutsplus.com/articles/marketi

ng/7-solutions-for-tracking-mobile-analytics/

https://developers.google.com/mobile/articles/analytics_end_to_end

Technical Browser IssuesExplanation of what is happening when

you embed a browser inside your app & platform differences - http://www.mobilexweb.com/blog/axis-opera-mini-alternative-browsers-iphone-ipad

Comparison of HTML5 support in Android & iOS browsers - http://www.fiercedeveloper.com/story/android-or-ios-which-platform-better-html5/2012-02-03

Issues with different versions of browser in Android - http://arstechnica.com/gadgets/2012/03/android-fragmentation-also-a-challenge-for-web-developers/

For Further ReferenceExtensive list of resources on all things

mobile development - http://learnthemobileweb.com/blog/resources/

Mobile Ministry Magazine (Antoine Wright) - http://mobileministrymagazine.com/