Your Mobile Strategy Can't Be HTML5

17,604 views
16,799 views

Published on

Earlier this month, I presented an updated talk on Mobile Strategy for Servoy. This one hour talk looks at the 3 options for a mobile strategy: Responsive Web, Mobile Optimized, and/or Native. I also explained why HTML5 is not a strategy; it is merely a technology you can use to implement any and all of these options. And we briefly discussed the three faces of Mobile First and how this methodology helps companies break out of old habits to create better customer experiences.

1 Comment
38 Likes
Statistics
Notes
No Downloads
Views
Total views
17,604
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
276
Comments
1
Likes
38
Embeds 0
No embeds

No notes for slide

Your Mobile Strategy Can't Be HTML5

  1. Mobile Design. Strategic Solutions.Theresa Neil
  2. I work as a Consultant, helping companies with their UX Strategy.Theresa Neil
  3. GERMANYTEXAS
  4. GERMANYTEXAS
  5. GERMANYTEXAS
  6. GERMANYTEXAS
  7. The ProgressionClassic Web Site Kiosk Early Mobile WebNative Tablet App Native Mobile Apps Mobile Optimized Site
  8. Whatʼs Driving Their Mobile Strategy?Mobile UsageCustomer RetentionCustomer AcquisitionBrand AlignmentCompetitionEnterprise Mobility
  9. Whatʼs Driving Their Mobile Strategy?Mobile UsageCustomer RetentionCustomer AcquisitionBrand AlignmentCompetitionEnterprise Mobility
  10. Whatʼs Driving Their Mobile Strategy?Mobile UsageCustomer RetentionCustomer AcquisitionBrand AlignmentCompetition Securing loyalty by providingEnterprise Mobility value added services
  11. Whatʼs Driving Their Mobile Strategy?Mobile UsageCustomer RetentionCustomer AcquisitionBrand AlignmentCompetition Attract and convert new customersEnterprise Mobility Use mobile as a conversion funnel for other products and services
  12. Whatʼs Driving Their Mobile Strategy?Mobile UsageCustomer RetentionCustomer AcquisitionBrand AlignmentCompetition Aligning the brand with innovation and forward thinkingEnterprise Mobility
  13. Whatʼs Driving Their Mobile Strategy?Mobile UsageCustomer RetentionCustomer AcquisitionBrand AlignmentCompetition At this point, every airline, evenEnterprise Mobility regional carriers, have integrated mobile solutions in their customer experience
  14. Whatʼs Driving Their Mobile Strategy?Mobile UsageCustomer RetentionCustomer AcquisitionBrand AlignmentCompetition According to ForresterEnterprise Mobility Research, 75% of companies report “increased worker productivity” from deploying mobile applications.
  15. What Are Your Mobile Options?Responsive Web Optimized Sites Native Apps
  16. What Are Your Mobile Options?Responsive Web Optimized Sites Native Apps Responsive Web defined...
  17. Responsive WebDefined Web site responds to the environment using css mediaqueries. Typically achieved by using fluid grid layouts, like ResponsiveGrid System, Bootstrap, from Twitter, or Foundation by Zurb.
  18. Responsive Web UIWindow 768 x 1024 Cisco London 2012
  19. Responsive Web
  20. Responsive WebIdeal ForInformational Web SitesPromotional SitesContent Consumption Sites • Newspapers • Magazines • Blogs • Galleries • Portfolios Boston Globe
  21. If you want to learn more about designingresponsively...
  22. What Are Your Mobile Options?Responsive Web Optimized Sites Native Apps A closer look at Optimized Sites...
  23. Optimized Sites aka mobile apps and dot m sitesOptimizing for different sizes and different usage needs Check Weather Playing Games Watch Video Checking Email Local News Social Networking National News Research Sports Info Listening to Music Entertainment Watching TV Financial InfoReference Materials Shopping Lifestyle Content Reading Books Magazine Content Lightweight Creation 0 12.5 25 37.5 50 0 12.5 25 37.5 50 Smartphone Usage Tablet Usage
  24. Optimized Sites aka mobile apps and dot m sitesMobile usage throughout the day: http://www.inmobi.com/inmobiblog/files/2012/02/Global_MediaConsumption_Info_Feb22.png
  25. Optimized SitesSome companies have three distinct sites...Classic Web Site Tablet Web Site Mobile Web Site
  26. Optimized SitesMore often there are only two distinct sitesAmazonʼs Classic Web Site & Tablet Site Mobile Web Site
  27. Optimized SitesThe mobile version is streamlined for core activities jetBlueʼs Classic Web Site & Tablet Site Mobile Web Site
  28. The Four Core Activities of Mobile UsersLookup/Find (urgent info, local): I need an answer tosomething now—frequently related to my current location inthe world.Explore/Play (bored, local): I have some time to kill andjust want a few idle time distractions.Check In/Status (repeat/micro-tasking): Somethingimportant to me keeps changing or updating and I want tostay on top of it.Edit/Create (urgent change/micro-tasking): I need to getsome- thing done now that can’t wait.
  29. Optimized Site: Backbase Project Tool Basecamp userʼs core activities fall into two categories: 1.Checkin/status 2.Edit/create Their mobile optimized site provides a solution for these needs.
  30. Optimized Site: Harvest Time Tracking Concepts V1 Harvest also optimizes for: 1.Checkin/status 2.Edit/create BETAhttp://www.getharvest.com/blog/2012/04/harvest-mobile-timesheet-beta/
  31. Responsive vs Optimized SitesWeb Sites Web Apps SearchInformational TravelContent Heavy Retail • Newspapers SaaS • Magazines Productivity Tools • Blogs (light-weight) • GalleriesResponsive Optimized Sites
  32. Mobile Web Doʼs and DontʼsDoʼsMake content most important (reduce navigation)Focus on performance Use Image Sprites Bundle & minify CSS and Javascipt files Limit or remove dependencies on heavy JS libraries Use CSS3 for styling, rounded corners, text shadows...
  33. Mobile Web Doʼs and DontʼsDontʼsPort a web app 1-for-1Add back buttonsUse large images andsize downGo crazy with specialeffects/transitionsTry to make it look justlike a Native App
  34. What Are Your Mobile Options?Responsive Web Optimized Sites Native Apps The Native Solution...
  35. Native AppsDefined An application that has been developed for use on aparticular platform or device.Typically native apps are coded with:Objective C for AppleJava for Android and BlackBerryC# or Visual Basic for Windows 7.5But there are also other options:Ruby MotionMonoTouch and MonoDroidAdobe AIR Adobe Flex 4.5 Showcase Apps
  36. Native AppsEvernote for BlackBerry Phone & Tablet, Android Phone & Tablet, iOS Phone & Tablet, Windows Phone
  37. Native Apps Xamarian MWC 2012 App C#, MonoTouch, MonoDroid
  38. Native AppsIdeal ForGamesFinancial ToolsProductivity Tools (heavy-weight)Enterprise Apps Bloomberg AnywhereKeynote Presentation Tool
  39. Native Doʼs and DontʼsDoʼsKnow & understand your target devicesFollow design conventions for those platform Navigation paradigms UI controls GesturesPrototype and test often
  40. Validate the prototypes on the target devices with actual users
  41. Prototyping Essentials
  42. Native Doʼs and DontʼsDontʼsDesign for the iPhone and reuse the design forAndroid or Windows (or vise versa)Recreate the wheel. There are standard mobilepatterns you can leverage for: Search, Sort, Filter Forms Invitations, etc..
  43. Mobile Patterns
  44. Native Apps vs Optimized SitesGames SearchTools requiring: Travel• Complex Calculations Retail• Reporting/Charting Productivity Tools• Native Functionality (light weight)• Offline AccessNative Apps Optimized Sites
  45. Native Apps vs Optimized SitesGames SearchTools requiring: point in time, nativeTravel target At this apps can the specific limitations and abilities of each• Complex Calculationsmuch better than a website individual device Retail• Reporting/Charting inside a Productivity Tools can while running browser.• Native Functionality (light weight) http://www.useit.com/alertbox/mobile-sites-apps.html• Offline AccessNative Apps Optimized Sites
  46. Breaking the Rules...Non Tech Considerations--> FinancialFinancial Times, Playboy and Walmart are using sites instead ofapps to avoid sharing revenues with app store owners.
  47. Breaking the Rules...Walmartʼs Vudu Optimized for tablets,avoids sharing the revenue from movie sales
  48. These are your optionsResponsive Web Optimized Sites Native Apps Questions?
  49. What About HTML5 ?HTML5 is simply a technology that you can use to implementany of these solutions. There are many options, here are few:Responsive Web Optimized Sites Native AppsHTML5 + a responsive HTML5 + a mobile HTML5 + a frameworkfront end framework like framework like JQuery like PhoneGap orBootstrap Mobile Titanium
  50. What About Hybrids?Defined A ʻnative wrappedʼ web application. Products like Titaniumand PhoneGap create a native wrapper that let the HTML and JSaccess OS dependent operations they couldnʼt access on their own(contacts, calendar, camera, geo-location...) LinkedIn-NBC-Built with Titanium Custom Wrapper
  51. Are Hybrids as good as Native Apps?This isn’t black & whiteWhen big players like LinkedIn and Facebook successfullylaunched hybrids, it looked like a shift might be imminent.
  52. Are Hybrids as good as Native Apps?This isn’t black & whiteWhen big players like LinkedIn and Facebook successfullylaunched hybrids, it looked like a shift might be imminent. But Facebook has rebuilt their iOS apps with Objective C, primarily to improve the performance.
  53. Hybrid or (truly) Native? Hybrid Fail
  54. Hybrid or (truly) Native? Hybrid Fail Hybrid Success
  55. Common Hybrid PitfallsCode once and reuse doesnʼt mean designonce and reuse xiPhone Android iPhone Android
  56. Good Hybrids in the MarketFollow the design conventions of each platformNetflixhttp://functionsource.com/post/netflix-feature
  57. What is Mobile First?A different way of thinking Agreement on what matters most
  58. Mobile First is...Knowing your users What they do and why they do it
  59. Know Your Users The Guardianʼs Data 2010 2012
  60. Donʼt rely on data alone; observe your users in the wild
  61. Mobile First Has Many Faces DEVELOPMENT DESIGNhttp://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/
  62. Mobile First Has Many Faces Strategy DEVELOPMENT DESIGNhttp://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/
  63. Mobile First Has Many Faces Strategy Design DEVELOPMENT DESIGNhttp://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/
  64. Mobile First Has Many Faces Strategy Design DEVELOPMENT Development DESIGNhttp://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/
  65. Mobile First In ActionAustin Start-Up Silvercar starts with Mobile First
  66. If you want to learn more about designing for...
  67. Thank YouFollow me on Twitter @theresaneilRead my book and blog:“Mobile Design Pattern Gallery” OʼReilly 2012

×