Mobile Cross-Platform Development

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@pukhalski Ilya Pukhalski, EPAM Mobile Competency Center, British Higher School of Art & Design

Slide 3

Slide 3 text

What the hell is going on?

Slide 4

Slide 4 text

IN THREE WORDS… KOCIGU

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

" 6 2005

Slide 7

Slide 7 text

" 7 2013

Slide 8

Slide 8 text

F*CTS

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Why should I care?

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Mobile Support Strategies

Slide 17

Slide 17 text

WEB

Slide 18

Slide 18 text

WEB APP vs WEBSITE

Slide 19

Slide 19 text

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

SEPARATE MOBILE WEBSITE

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Separate mobile version should be adaptive as well ! No more m.site.com Please

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Pros — Nice performance — Mobile-optimized IA

Slide 28

Slide 28 text

Cons — Expensive in terms and resources — Poor mobile UX and UI

Slide 29

Slide 29 text

SEPARATE MOBILE WEB APP

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Pros — Look-and-feel close to native* — Mobile-optimized IA — Nice UX

Slide 33

Slide 33 text

Cons — Expensive in terms of time and resources — Diﬀerent design versions for diﬀerent screen resolutions required — Performance optimization «headache»

Slide 34

Slide 34 text

“Truly cross-platform Web App? “Not a big deal for sure!” ! — No one ever

Slide 35

Slide 35 text

CROSS-PLATFORM cross-device WEB APP

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Responsive & Adaptive Web Design

Slide 38

Slide 38 text

“There is no mobile Web, nor “desktop Web. It is just the Web. “Start with the content and meet “people halfway.” ! — Luke Wroblewski

Slide 39

Slide 39 text

One line of CSS, you said. It’ll be fun, you said.

Slide 40

Slide 40 text

• STRATEGY Reﬂow Breakpoints strategy Responsive typography Responsive media Accessibility Cross-browser support i18n and l10n User interaction Responsive ad

Slide 41

Slide 41 text

• COMPONENTS Flexible grid Media-queries Breakpoints Typography Navigation Form elements Carousels Accordions Pagination ! Drop-downs Tables Media elements Icons …

Slide 42

Slide 42 text

Pros — One web philosophy — Doesn’t require additional design versions — Future-friendly

Slide 43

Slide 43 text

Cons — Some old mobile and desktop browsers don’t support media- queries — Slow rendering; downloading non-using content — Reﬂow/restructure problems — UX is not optimised for mobile; it’s optimized for all device types

Slide 44

Slide 44 text

APPS

Slide 45

Slide 45 text

Hybrid

Slide 46

Slide 46 text

Wrapper + Web App

Slide 47

Slide 47 text

Wrapper + Web App

Slide 48

Slide 48 text

Wrapper + Web App

Slide 49

Slide 49 text

Wrapper + Web App

Slide 50

Slide 50 text

Wrapper + Web App

Slide 51

Slide 51 text

Wrapper + Web App

Slide 52

Slide 52 text

Desktop?

Slide 53

Slide 53 text

Desktop?

Slide 54

Slide 54 text

Pros — Access to native mobile features — Simple bugﬁxing and support — Simple content update — Future-friendly

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Native

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

Pros — Native look-and-feel — Nice load speed and performance — Access to native mobile features — Simple bugﬁxing and support

Slide 61

Slide 61 text

Cons — Time-consuming for maintaining — Third-party approval reqiured for app to appear in the app stores — Not all device features are available — Diﬃcult to make a plugin — A lot of bugs in the platform itself

Slide 62

Slide 62 text

Mixed

Slide 63

Slide 63 text

Native + Web = ❤

Slide 64

Slide 64 text

PhoneGap Native Plugins

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

How to pick the right strategy?

Slide 67

Slide 67 text

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