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.

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
6. " 6 2005
7. " 7 2013
8. F*CTS
12. Why should I care?
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
27. Pros — Nice performance — Mobile-optimized IA
28. Cons — Expensive in terms and resources — Poor mobile UX and UI
29. SEPARATE MOBILE WEB APP
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
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
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
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