Describes 4

1. Using Mobile for Your Message:
A Process and a Strategy
for Mobile Web Development
Evan Donovan

2. Focus of this Presentation
 Key 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 share
 Providing 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

3. 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

4. About You: Quick Survey
 How 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.

5. Mobile Web Development: An 8-Step Process
Evaluation
Maintenance Planning
Assessment Development
Release Design
Testing
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.

6. Mobile Web Development: An 8-Step Process
Evaluation
Maintenance Planning
Assessment Development
Release Design
Testing
Evaluation: Should we use mobile?
• Technology & Market Trends
• Opportunity for Economic Development
• Opportunity for the Church
• Challenges of Mobile

7. Mobile Web Development: An 8-Step Process
Evaluation
Maintenance Planning
Assessment Development
Release Design
Testing
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

8. Mobile Web Development: An 8-Step Process
Evaluation
Maintenance Planning
Assessment Development
Release Design
Testing
Development: Building Your Mobile App
• Initial Definitions
• 3 Architectures: 2 Hybrid & 1 Web Site-Based
• Caveats

9. Mobile Web Development: An 8-Step Process
Evaluation
Maintenance Planning
Assessment Development
Release Design
Testing
Design: Making an App that Delights Users
• Focus on the User’s Goals
• Simple Navigation
• Essential Graphics Only
• Use Phone’s Features

10. Mobile Web Development: An 8-Step Process
Evaluation
Maintenance Planning
Assessment Development
Release Design
Testing
Testing: Ensuring a consistent, pleasurable, and successful
experience
• Cross-Device Testing
• Usability Testing

11. Mobile Web Development: An 8-Step Process
Evaluation
Maintenance Planning
Assessment Development
Release Design
Testing
• Release: Getting Your App Out There

12. Mobile Web Development: An 8-Step Process
Evaluation
Maintenance Planning
Assessment Development
Release Design
Testing
• Release: Getting Your App Out There
• Assessment: Evaluating Your App’s Impact

13. Mobile Web Development: An 8-Step Process
Evaluation
Maintenance Planning
Assessment Development
Release Design
Testing
• Release: Getting Your App Out There
• Assessment: Evaluating Your App’s Success
• Maintenance and New Development: Keeping usable,
relevant, and fresh

14. Technology & Market Trends 1 Evaluation
 “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)

15. Opportunity for Economic Development 1 Evaluation
 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
phone
 Landlines 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

16. Opportunity for the Church 1 Evaluation
 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

17. Challenges of Mobile 1 Evaluation
 Rapid development and change
 Lack of established “best practices”
 Multiplicity of devices one could target
 But…in light of opportunity, and threat if
we don’t pursue this, we have to occupy
this space

18. 4 Criteria for Choosing 2 Planning
an 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.

19. 4 Criteria for Choosing 2 Planning
an 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

20. 4 Criteria for Choosing 2 Planning
an Approach: Resources
 What you have available now – upfront cost
 “Iron Triangle” of project management –
Time, Budget, Features
 Human 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.)

21. 4 Criteria for Choosing 2 Planning
an 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)

22. Scope of This Comparison: 2 Planning
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
language
 Sustainability:
◦ 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 devices
 This is TechMission’s situation. Many Christian
ministries may be similar.

23. Scope of This Comparison: 2 Planning
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

24. Scope of This Comparison: 2 Planning
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

25. 4 Broad Approaches 2 Planning
to Mobile Development
Designer- Developer-
Oriented Oriented
Mobile HTML5 Hybrid Native
Web Mobile App App
Site App

26. 4 Approaches: Mobile Web Site - I 2 Planning
 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

27. 4 Approaches: Mobile Web Site - II 2 Planning
 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)

28. 4 Approaches: HTML5 Mobile App 2 Planning
 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 used
 Comparison:
http://jquerybyexample.blogspot.com/2012/02/jqtouch-
vs-jquery-mobile.html

29. 4 Approaches: Hybrid App 2 Planning
 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

30. 4 Approaches: Native App 2 Planning
 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
languages
 True native feel & performance, but most time-
consuming and developer-centric approach
 Can use web APIs to pull in data via JSON or XML
and then render using native UI elements
 However, 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.

31. 4 Approaches: More Info 2 Planning
 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)

32. Building Your Mobile App: 3 Development
Initial Definitions
Anatomy of an
Client
HTTP Request
1. Client 2. Server
makes returns
request response
(HTTP GET) (HTML +
JS, CSS)
Server

33. Building Your Mobile App: 3 Development
Initial Definitions
Model-View-
1. HTTP GET
Client Controller (MVC)
request Architecture
2. Request
dispatched to 4. Data is
Controller returned from
3. Controller Database
handles by 5. Data rendered
requesting into View
data from 6. View returned
Database via to client as
Model HTML
Web Server
Application Controller View
Layer Server
Model
Database

34. Architecture 1: PhoneGap + Sencha Touch 3 Development
 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

35. Architecture 1: PhoneGap + Sencha Touch 3 Development
Phone
1. Link/button
Client
PhoneGap JS 4. Sends JSON
pressed, with response
corresponding Sencha Touch JS 5. Sencha Touch
(View)
URL code in app
2. HTTP request parses and
from app renders into
3. Server HTML
receives, 6. HTML
dispatches, displayed on
queries device
Web Server
Controller
Application
Layer Server
Model
Database

36. Architecture 2:
PhoneGap + jQuery Mobile from Site 3 Development
 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 base
 Disadvantages:
 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)

37. Architecture 2:
PhoneGap + jQuery Mobile from Site 3 Development
Phone
1. Link/button Client
PhoneGap JS 4. Sends HTML
pressed, with snippet
corresponding
URL
jQuery Mobile response
Base (View)
2. jQuery Mobile 5. jQuery Mobile
intercepts to receives AJAX
make it an AJAX response of
request (no HTML snippet,
page reload) replaces
3. HTTP request contents of
from app
4. Server receives,
main <div>
dispatches,
queries
Web Server
Controller HTML Snippet
Controller
Application (View)
Layer Server
Model
Database

38. Architecture 3:
Responsive Design Website 3 Development
 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

39. Architecture 3:
Responsive Design Website 3 Development
 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

40. 4 Key Principles of Mobile UX Design 4 Design
 Focus on User’s Goals
 Simple Navigation
 Essential Graphics Only
 Use Phone’s Features

41. 2 Types of Testing Needed 5 Testing
 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

42. 2 Alternatives for Releasing App 6 Release
 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?

43. Evaluating Your App’s Success 7 Assessment
 What to Assess
◦ Usefulness
◦ Appeal
◦ Reach
◦ Impact
 How to Assess
◦ Analytics
 Google Analytics
 Flurry (part of app)
◦ Talking to People
◦ Other means?

44. Keeping Up with Change 8 Maintenance & New Development
 Change is inevitable; expect to have to do
new development eventually
◦ Timeframe may be dependent on your audience,
chosen platform, and organizational priorities
 Practice user-centered design: Listen & give
your users what they want
 The cycle begins again…

45. Appendix:
Sources & Additional Information

46. 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_mo
bile_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

47. 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

48. Opportunity for the Church
 Mobile outreach strategies:
http://www.internetevangelismday.com/mobi
le-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=2
0
 Lausanne report:
http://www.lausanneworldpulse.com/worldreport
s/735/06-2007

49. Challenges of Mobile
 Multiplicity 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/

50. 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/smartphon
es-proliferate-but-opera-browser-still-sees-opportunity-in-
feature-phones.php

51. Comparisons of Sencha Touch & jQuery Mobile
 http://www.sencha.com/forum/showthrea
d.php?197720-Sencha-Touch-2-vs.-
jQuery-Mobile-PhoneGap
 http://jquerybyexample.blogspot.com/2
012/02/jqtouch-vs-sencha-touch-vs-
jquery.html
 http://mhorner.blogspot.com/2012/02/s
encha-touch-vs-jquery-mobile-high.html
 http://cfc.kizzx2.com/index.php/sencha-
touch-vs-jquery-mobile-a-first-look/

52. Native App vs. Hybrid App
 http://www.worklight.com/assets/files/H
TML5,%20Hybrid%20or%20Native%20
Mobile%20App%20Development.pdf
 http://buildmobile.com/native-hybrid-or-
web-apps/

53. 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/

54. Mobile UX Principles
 Mobile Design - Special UX
Considerations:
http://www.uxmatters.com/mt/archives/2
011/01/designing-for-the-mobile-web-
special-considerations.php
 UX - 10 Ways Mobile Sites Differ From
Traditional Websites -
http://www.uxmatters.com/mt/archives/2
011/03/10-ways-mobile-sites-are-
different-from-desktop-web-sites.php
 Design for Mobile Experience:
http://www.zdnet.com/blog/forrester/wha
t-design-for-mobile-first-really-means/867

55. Testing
 List of emulators -
http://www.themobilewebdesignblog.com/20
11/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/mo
bile-usability-testing
 Building a testing sled -
http://shortboredsurfer.com/2011/09/making
-a-mobile-usability-testing-sled-the-
macgyver-way/

56. Mobile Analytics
 http://mobile.tutsplus.com/articles/marke
ting/7-solutions-for-tracking-mobile-
analytics/
 https://developers.google.com/mobile/
articles/analytics_end_to_end

57. Technical Browser Issues
 Explanation 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/

58. For Further Reference
 Extensive list of resources on all things
mobile development -
http://learnthemobileweb.com/blog/resou
rces/
 Mobile Ministry Magazine (Antoine Wright)
- http://mobileministrymagazine.com/