Choosing the Right Mobile 
Approach 
Responsive, Dedicated, Native, or Hybrid? 
Jasper Liu 
Sr. UX Architect, ICF Internat...
2 
A Strong Mobile Presence Is A Must-Have 
1.75 billion people around the world have a smartphone 
(Google, September 201...
3 
Responsive Dedicated 
Hybrid Native 
Mobile 
Websites 
Mobile 
Apps
Mobile Websites
5 
Mobile Websites 
• Universally accessible through a mobile browser 
in any platform/device 
• No installation required ...
6 
Responsive Websites 
• Responsive websites adapt layouts to the viewing environment by using fluid 
grids, flexible ima...
7 
Responsive Websites - Pros 
• One website optimized for all devices 
• Cross-channel consistency 
• Low maintenance cos...
8 
Responsive Websites - Pros 
• Good responsive web design is device-agnostic, and provides a future-friendly 
solution f...
9 
Responsive Websites - Cons 
• Without optimization, a responsive mobile website can be slow, as it loads all 
content a...
10 
Responsive Websites 
The Search Agency evaluated the mobile sites of top 100 retailers in the US in 
October 2013.
11 
Responsive Websites 
The Search Agency evaluated the mobile sites of top 100 retailers in the US in 
October 2013.
12 
Dedicated Mobile Websites or Web Apps 
A separate website is created for small screens. The site detects users are usi...
13 
Dedicated Mobile Websites/Apps - Pros 
• Fast 
• Simple and focused 
• Quick and inexpensive to build if the mobile si...
14 
Dedicated Mobile Websites/Apps - Cons 
• The experience may not be consistent in different channels.
15 
Dedicated Mobile Websites/Apps - Cons 
• Time-consuming to maintain and update two separate websites if they often 
ch...
16 
Dedicated Mobile Websites/Apps - Cons 
• Usually presents only a portion of the full website. 
• May still need to pro...
17 
The Advancement of Mobile Websites 
Responsive Websites 
One site to rule them all 
Client-side 
optimization
18 
The Advancement of Mobile Websites 
Responsive Websites 
One site to rule them all 
Dedicated Mobile Sites 
Faster per...
19 
Responsive Design + Server Side Components 
• One site, single URL 
• Server sends device-specific code for the key pa...
20 
Responsive Design + Server Side Components
21 
Some High Profile Websites Have Shifted to 
Responsive Design 
m.dominos.com
22 
Some High Profile Websites Have Shifted to 
Responsive Design 
m.samsung.com www.samsung.com
23 
Some High Profile Websites Have Shifted to 
Responsive Design
24 
Mobile Websites Summary 
• A mobile optimized site is a must-have. 
• The evolving responsive design with client-side ...
Mobile Apps
26 
Mobile Apps Dominate Mobile Usage 
Source: http://mobilemarketingstand.com/2014/04/15/mobile-as-the-future-marketing- ...
27 
On Average, People Don’t Use More Than 30 
Apps A Month 
Source: http://www.nielsen.com/us/en/insights/news/2014/smart...
28 
20% of Mobile Apps Are Used Only Once 
Source: http://info.localytics.com/blog/app-retention-improves
29 
Native Apps 
Native apps are specific to a mobile platform (e.g. 
iOS, Android, Windows Phone, etc.) using the 
develo...
30 
Native Apps - Pros 
Fast graphics and fluid animations. 
Sources: 
http://capptivate.co/
31 
Native Apps - Pros 
Take full advantage of all native device features, such as: 
• GPS 
• Accelerometer 
• Compass 
• ...
32 
Native Apps - Cons 
• Compared with mobile websites, native apps have 
lower discoverability and require installation....
34 
Hybrid Apps 
Hybrid apps bridge the middle ground between native apps and mobile websites. 
They are built using web t...
35 
Hybrid Apps - Pros 
Cost-effective, as it allows code reuse across platforms. 
Use standard web technologies. 
Access ...
36 
Hybrid Apps - Pros 
• Leverage the existing website to power the app. 
Amazon.com Amazon app
37 
Hybrid Apps - Cons 
• The performance and graphics can’t match the native apps. Hybrid apps are 
executed by the platf...
38 
Hybrid Apps - Cons 
• It may be more expensive to build a hybrid app that can deliver as-good-as-native 
experience. 
...
39 
The Advancement of Mobile Apps 
Native Apps 
Best performance and visuals 
Hybrid Apps 
Cross-platform solution 
Impro...
Summary
41 
Responsive 
Sites 
Dedicate 
Sites 
Native 
Apps 
Hybrid 
Apps 
Use Case Occasional use Frequent use 
Content/Features...
42 
Mobile Strategy Is the Key 
• The key to mobile success is building a strategy that continually aligns 
business goals...
43 
Thank you! 
Jasper Liu 
Senior User Experience Architect 
ICF International 
jasper.liu@icfi.com 
www.linkedin.com/in/...
Prochain SlideShare
Chargement dans…5
×

User Focus 2014 - Choosing The Right Mobile Approach

809 vues

Publié le

My presentation at User Focus 2014

Publié dans : Mobile
  • Soyez le premier à commenter

User Focus 2014 - Choosing The Right Mobile Approach

  1. 1. Choosing the Right Mobile Approach Responsive, Dedicated, Native, or Hybrid? Jasper Liu Sr. UX Architect, ICF International User Focus 2014
  2. 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. 3 Responsive Dedicated Hybrid Native Mobile Websites Mobile Apps
  4. 4. Mobile Websites
  5. 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. 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. 7 Responsive Websites - Pros • One website optimized for all devices • Cross-channel consistency • Low maintenance cost • Focused marketing efforts • Consolidated analytics
  8. 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. 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. 10 Responsive Websites The Search Agency evaluated the mobile sites of top 100 retailers in the US in October 2013.
  11. 11. 11 Responsive Websites The Search Agency evaluated the mobile sites of top 100 retailers in the US in October 2013.
  12. 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. 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. 14 Dedicated Mobile Websites/Apps - Cons • The experience may not be consistent in different channels.
  15. 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. 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. 17 The Advancement of Mobile Websites Responsive Websites One site to rule them all Client-side optimization
  18. 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. 19 Responsive Design + Server Side Components • One site, single URL • Server sends device-specific code for the key page components
  20. 20. 20 Responsive Design + Server Side Components
  21. 21. 21 Some High Profile Websites Have Shifted to Responsive Design m.dominos.com
  22. 22. 22 Some High Profile Websites Have Shifted to Responsive Design m.samsung.com www.samsung.com
  23. 23. 23 Some High Profile Websites Have Shifted to Responsive Design
  24. 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. 25. Mobile Apps
  26. 26. 26 Mobile Apps Dominate Mobile Usage Source: http://mobilemarketingstand.com/2014/04/15/mobile-as-the-future-marketing- platform
  27. 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. 28 20% of Mobile Apps Are Used Only Once Source: http://info.localytics.com/blog/app-retention-improves
  29. 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. 30 Native Apps - Pros Fast graphics and fluid animations. Sources: http://capptivate.co/
  31. 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. 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. 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. 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. 35. 36 Hybrid Apps - Pros • Leverage the existing website to power the app. Amazon.com Amazon app
  36. 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. 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. 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. 39. Summary
  40. 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. 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. 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

×