The document discusses different approaches to mobile development: responsive websites, dedicated mobile websites, native apps, and hybrid apps. Responsive websites use fluid grids and media queries to adapt to different screens, providing a consistent experience at a low cost. Dedicated mobile sites are separate from desktop sites but may not be as consistent. Native apps have best performance and access to device features but require platform-specific development. Hybrid apps use web technologies to work across platforms at a lower cost than native but with reduced performance. The best approach depends on factors like content, usage patterns, and development skills. An effective mobile strategy aligns business goals with users and technologies.

1. Choosing the Right Mobile
Approach
Responsive, Dedicated, Native, or Hybrid?
Jasper Liu
Sr. UX Architect, ICF International
User Focus 2014

2. 2
A Strong Mobile Presence Is A Must-Have
1.75 billion people around the world have a smartphone
(Google, September 2014)
90% of American adults have a cell phone
58% of American adults have a smartphone
42% of American adults have a tablet
(Pew Internet, January 2014)
Mobile internet usage in the US had increased by 73% over the
last 12 months
(StatCounter, August 2014)

3. 3
Responsive Dedicated
Hybrid Native
Mobile
Websites
Mobile
Apps

4. Mobile Websites

5. 5
Mobile Websites
• Universally accessible through a mobile browser
in any platform/device
• No installation required
• High discoverability
• Built with standard web technologies

6. 6
Responsive Websites
• Responsive websites adapt layouts to the viewing environment by using fluid
grids, flexible images, CSS3 media queries, and JavaScript.
Source: http://www.dtelepathy.com/blog/design/responsive-design-great-ux

7. 7
Responsive Websites - Pros
• One website optimized for all devices
• Cross-channel consistency
• Low maintenance cost
• Focused marketing efforts
• Consolidated analytics

8. 8
Responsive Websites - Pros
• Good responsive web design is device-agnostic, and provides a future-friendly
solution for new devices.
iPhone 5
320 x 568 pt
iPhone 6
375 x 667 pt
iPhone 6 Plus
414 x 736 pt
7.9” iPad Mini
1024x768 pt

9. 9
Responsive Websites - Cons
• Without optimization, a responsive mobile website can be slow, as it loads all
content and scripts of the page for every device, even when they are set to be
hidden on smaller screens.
• If milliseconds mean money to your business, you have to be cautious about
the responsive design approach.
?

10. 10
Responsive Websites
The Search Agency evaluated the mobile sites of top 100 retailers in the US in
October 2013.

11. 11
Responsive Websites
The Search Agency evaluated the mobile sites of top 100 retailers in the US in
October 2013.

12. 12
Dedicated Mobile Websites or Web Apps
A separate website is created for small screens. The site detects users are using
a mobile device and redirects them to the mobile site.
www.bankofamerica.mobile.walmart.com com/mobile/ m.cancer.gov

13. 13
Dedicated Mobile Websites/Apps - Pros
• Fast
• Simple and focused
• Quick and inexpensive to build if the mobile site/app focuses on a small
portion of the full website
• Allows a different mobile web experience independent of the full site

14. 14
Dedicated Mobile Websites/Apps - Cons
• The experience may not be consistent in different channels.

15. 15
Dedicated Mobile Websites/Apps - Cons
• Time-consuming to maintain and update two separate websites if they often
change.
• Usually a binary solution that is not always optimized for a wide variety of
internet-connected devices.

16. 16
Dedicated Mobile Websites/Apps - Cons
• Usually presents only a portion of the full website.
• May still need to provide a link to the full site which usually does not offer
an excellent mobile experience.

17. 17
The Advancement of Mobile Websites
Responsive Websites
One site to rule them all
Client-side
optimization

18. 18
The Advancement of Mobile Websites
Responsive Websites
One site to rule them all
Dedicated Mobile Sites
Faster performance;
device detection
Merge the best
of each
RESS
Responsive Design
+
Server Side Components
Client-side
optimization

19. 19
Responsive Design + Server Side Components
• One site, single URL
• Server sends device-specific code for the key page components

20. 20
Responsive Design + Server Side Components

21. 21
Some High Profile Websites Have Shifted to
Responsive Design
m.dominos.com

22. 22
Some High Profile Websites Have Shifted to
Responsive Design
m.samsung.com www.samsung.com

23. 23
Some High Profile Websites Have Shifted to
Responsive Design

24. 24
Mobile Websites Summary
• A mobile optimized site is a must-have.
• The evolving responsive design with client-side and server-side optimization
is the preferred approach, especially in the long term.
• If you need the fastest website or have limited flexibility to change your
existing website, a separate mobile site can be an interim solution to consider.

25. Mobile Apps

26. 26
Mobile Apps Dominate Mobile Usage
Source: http://mobilemarketingstand.com/2014/04/15/mobile-as-the-future-marketing-
platform

27. 27
On Average, People Don’t Use More Than 30
Apps A Month
Source: http://www.nielsen.com/us/en/insights/news/2014/smartphones-so-many-apps--so-much-time.html

28. 28
20% of Mobile Apps Are Used Only Once
Source: http://info.localytics.com/blog/app-retention-improves

29. 29
Native Apps
Native apps are specific to a mobile platform (e.g.
iOS, Android, Windows Phone, etc.) using the
development tools and languages that the
respective platform supports.
Pros
• Best performance
• Superior user experience
• Easy to access after initial installation
• Personalized tools for regular use

30. 30
Native Apps - Pros
Fast graphics and fluid animations.
Sources:
http://capptivate.co/

31. 31
Native Apps - Pros
Take full advantage of all native device features, such as:
• GPS
• Accelerometer
• Compass
• Camera
• Advanced device gestures
• Push notifications
• Offline use
• Access contacts, calendar, emails, text messages, and even health data.

32. 32
Native Apps - Cons
• Compared with mobile websites, native apps have
lower discoverability and require installation.
• App updates needs to be downloaded by users. It can
become difficult to maintain and provide support for
users on different versions.
• Supporting multiple platforms results in higher costs in
development, maintenance, pushing out updates, etc. $

33. 34
Hybrid Apps
Hybrid apps bridge the middle ground between native apps and mobile websites.
They are built using web technologies, like HTML5 and JavaScript, and then
wrapped in a platform-specific shell allowing them to be installed like native apps.

34. 35
Hybrid Apps - Pros
Cost-effective, as it allows code reuse across platforms.
Use standard web technologies.
Access most device features. Below are the features supported by PhoneGap.

35. 36
Hybrid Apps - Pros
• Leverage the existing website to power the app.
Amazon.com Amazon app

36. 37
Hybrid Apps - Cons
• The performance and graphics can’t match the native apps. Hybrid apps are
executed by the platform’s Web engine, which adds another layer of operation
between the user and the app.
“Facebook tried HTML5 for years. When they
switched to native code, they were able to improve
performance by 200% and increase their average
user rating from two stars to four stars.”
(source: http://www.smashingmagazine.com/2012/11/07/
succeed-with-your-app/).

37. 38
Hybrid Apps - Cons
• It may be more expensive to build a hybrid app that can deliver as-good-as-native
experience.
Xero, an accounting software company, abandoned hybrid
and went native, because:
“And the lesson we’ve learnt over the last 12 months has
been that the cost in time, effort and testing to bring an
HTML5 application to a native level of performance seems
to be far greater than if the application was built with native
technologies from the get-go.”
(source: https://www.xero.com/blog/2013/03/making-mobile-work/).

38. 39
The Advancement of Mobile Apps
Native Apps
Best performance and visuals
Hybrid Apps
Cross-platform solution
Improving
performance
Adaptive
layout
Responsive Native Apps?

39. Summary

40. 41
Responsive
Sites
Dedicate
Sites
Native
Apps
Hybrid
Apps
Use Case Occasional use Frequent use
Content/Features Full Focused Focused
Installation No Required
Discoverability High Low
Performance Good
(if optimized)
Good Excellent Good
(if optimized)
Visuals, Animations OK Excellent OK
Device Features Some All Most
Development Skills Standard Platform
specific
Standard
Maintenance Cost Low Medium High Medium
Development Cost Depends (You get what you pay for)

41. 42
Mobile Strategy Is the Key
• The key to mobile success is building a strategy that continually aligns
business goals, user needs, and evolving mobile technologies.
Business
Mobile
Strategy
Technologies Users

42. 43
Thank you!
Jasper Liu
Senior User Experience Architect
ICF International
jasper.liu@icfi.com
www.linkedin.com/in/jasperlz
www.pinterest.com/jasper1084