Pro Yearly is on sale from $80 to $50! »

Mobile Cross-Platform Development

Mobile Cross-Platform Development

Mobile Support Strategies and Mobile Cross-Platform Development; Websites vs Web Apps; Responsive & Adaptive Web Design; Native, Hybrid and Mixed apps.

E13498af38db5a5ab97f89fdc500b5af?s=128

Ilya Pukhalski

December 07, 2013
Tweet

Transcript

  1. MOBILE CROSS-PLATFORM DEVELOPMENT One code to rule them all Ilya

    Pukhalski
  2. @pukhalski Ilya Pukhalski, EPAM Mobile Competency Center, British Higher School

    of Art & Design
  3. What the hell is going on?

  4. IN THREE WORDS… KOCIGU

  5. None
  6. " 6 2005

  7. " 7 2013

  8. F*CTS

  9. None
  10. None
  11. None
  12. Why should I care?

  13. None
  14. None
  15. None
  16. Mobile Support Strategies

  17. WEB

  18. WEB APP vs WEBSITE

  19. ?

  20. !== Ориентировано на задачи Ориентирован на контент

  21. SEPARATE MOBILE WEBSITE

  22. m.site.com mobile.site.com touch.site.com smart.site.com

  23. tablet.site.com ios.site.com desktop.site.com

  24. Separate mobile version should be adaptive as well ! No

    more m.site.com Please
  25. None
  26. None
  27. Pros — Nice performance — Mobile-optimized IA

  28. Cons — Expensive in terms and resources — Poor mobile

    UX and UI
  29. SEPARATE MOBILE WEB APP

  30. None
  31. None
  32. Pros — Look-and-feel close to native* — Mobile-optimized IA —

    Nice UX
  33. Cons — Expensive in terms of time and resources —

    Different design versions for different screen resolutions required — Performance optimization «headache»
  34. “Truly cross-platform Web App? “Not a big deal for sure!”

    ! — No one ever
  35. CROSS-PLATFORM cross-device WEB APP

  36. None
  37. Responsive & Adaptive Web Design

  38. “There is no mobile Web, nor “desktop Web. It is

    just the Web. “Start with the content and meet “people halfway.” ! — Luke Wroblewski
  39. One line of CSS, you said. It’ll be fun, you

    said.
  40. • STRATEGY Reflow Breakpoints strategy Responsive typography Responsive media Accessibility

    Cross-browser support i18n and l10n User interaction Responsive ad
  41. • COMPONENTS Flexible grid Media-queries Breakpoints Typography Navigation Form elements

    Carousels Accordions Pagination ! Drop-downs Tables Media elements Icons …
  42. Pros — One web philosophy — Doesn’t require additional design

    versions — Future-friendly
  43. Cons — Some old mobile and desktop browsers don’t support

    media- queries — Slow rendering; downloading non-using content — Reflow/restructure problems — UX is not optimised for mobile; it’s optimized for all device types
  44. APPS

  45. Hybrid

  46. Wrapper + Web App

  47. Wrapper + Web App

  48. Wrapper + Web App

  49. Wrapper + Web App

  50. Wrapper + Web App

  51. Wrapper + Web App

  52. Desktop?

  53. Desktop?

  54. Pros — Access to native mobile features — Simple bugfixing

    and support — Simple content update — Future-friendly
  55. Cons — Time-consuming for maintaining — Third-party approval required for

    app to appear in the app stores — Problems with look-and-feel if needed to get native for all devices or native-like UX
  56. Native

  57. None
  58. None
  59. None
  60. Pros — Native look-and-feel — Nice load speed and performance

    — Access to native mobile features — Simple bugfixing and support
  61. Cons — Time-consuming for maintaining — Third-party approval reqiured for

    app to appear in the app stores — Not all device features are available — Difficult to make a plugin — A lot of bugs in the platform itself
  62. Mixed

  63. Native + Web = ❤

  64. PhoneGap Native Plugins

  65. None
  66. How to pick the right strategy?

  67. Know… — your audience // platforms, device types, OS versions

    — the audience needs // UX, UI, feature set — your developers // cross-platform is much more difficult — your distribution strategy // app stores, web, content — the solutions and their possibilities // frameworks, platforms — …choose wisely and don’t be afraid to try
  68. I STILL BELIEVE

  69. @pukhalski