What are the main and also often underlooked differences between native app development and web technologies when building a mobile product? What is the current stare of technology in terms of combing both? This talk, made with Iker Ortiz de Arri (@ikertxo), showcases benefits, drawbacks and similarities from an UX point of view. It also features PWA (progressive web apps), Android Instant Apps, React, and more.

1. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
K R U N C H T I M E
I NT E RACT IV E

2. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Native vs web app

3. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Caching / Loading
Native vs web app

4. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Caching / Loading
Native vs web app

5. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Caching / Loading
Native vs web app

6. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Interactions
Native vs web app

7. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Animations /
Transitions
Native vs web app

8. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Native vs web app
Animations /
Transitions

9. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Semantic
animations
Native vs web app

10. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Semantic
animations
Native vs web app

11. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
High Performance Animations
Things a browser can animate cheaply:
• Position transform: translate(npx, npx);
• Scale transform: scale(n);
• Rotation transform: rotate(ndeg);
• Opacity opacity: 0 ... 1;

12. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
High Performance Animations
Rule of thumb:
Animations that doesn’t affect the overall layout
work best.

13. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Native vs web app
Momentum Scrolling /
Rubberbanding

14. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Background video
Native vs web app

15. Native vs web app
Typography

16. Native vs web app
Android iOS / Swift iOS / Obj C CSS
Typography

17. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Native vs web app
Forms & Logins

18. Native vs web app
Forms & Logins

19. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Native vs web app
Forms & Logins

20. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Native vs web app
Forms & Logins

21. P O L L
R
X
U
F
O
U
M

22. R
X
U
F
O
U
M
Are you using AutoFill
to complete forms in mobile browsers?

23. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Native vs web app
Launch context

24. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Native vs web app
Launch context

25. Mobile websites with app-like-experience

26. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Progressive Web Apps
Progressive Web Apps allow developers to use
JavaScript in order to create mobile websites that
enable an app-like-experience and work offline.
(Android only atm)

27. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Progressive Web Apps

28. E P I C O R C H A P T E R
Progressive Web Apps
• Very fast loading times
• Connectivity independent: PWA work offline
• App-like-interactions (GPU accelerated)
• Re-engageable: Can access Push Notifications

29. E P I C O R C H A P T E R
Progressive Web Apps
• Discoverable: Search engines will find them
• Linkable: Zero-friction, zero-install, easy to share
• App install banners
• Takes up less space than a native/hybrid implementation
• Good for phones / networks of emerging markets

30. E P I C O R
C H A P T E R
Service Worker
A service worker is a script that runs in the background, separate from
your web page. It responds to events, including network requests made
from pages it serves and push notices from your server.
A service worker has an intentionally short lifetime. It wakes up when it
gets an event and runs only as long as it needs to process it. Another
cool feature is that Service Workers also support Push Notifications.

31. E P I C O R
C H A P T E R
Accelerated Mobile Pages
AMP is an open source project and service by Google to accelerate content on
mobile devices. It is a way to build web pages for static content that render fast.
AMP in action consists of three different parts:
• AMP HTML
HTML with some restrictions for reliable performance and some
extensions for building rich content beyond basic HTML
• AMP JS
ensures the fast rendering of AMP HTML pages
• Google AMP Cache
can be used to serve cached AMP HTML pages

32. FlipKart

33. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
AirBerlin

34. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Washington Post

35. E P I C O R C H A P T E R
Progressive Web Apps
+ Android only for now +

36. Apps made with web language

37. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
React Native
React Native allows developers to use JavaScript in
order to create mobile apps in both Android and iOS
that look, feel, and are native.

38. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
React Native

39. React Native
• Reusability
• Learn once, write everywhere
• Hot Reloading
• Open Source
• Good for prototyping

40. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Facebook Ads Manager

41. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Facebook Groups

42. P A T E N T S &
I N V E N T I O N S
Apps without installing

43. E P I C O R C H A P T E R
Android Instant Apps
Android Instant Apps enables Android apps to run
instantly, without requiring installation.

44. P A T E N T S &
I N V E N T I O N S
Sub topic 1Android Instant Apps

45. U X / U I D I F F E R E N C E S
B E T W E E N
A P P S & W E B S
Mobile vs desktop

46. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Mobile vs desktop
Task-based design enabling content prioritisation

47. „A P P V S W E B
D I F F E R E N C E S &
T R E N D S
CHOOSE THE FEATURES THAT MATTER MOST
TO ON-THE-GO USERS AND FOCUS ON
MAKING THOSE FEATURES REALLY WORK WELL.
Nick Bonatsakis
Mobile developer at Raizlabs Inc

48. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Mobile vs desktop
Platform UX interactions, tapable vs. clickable

49. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Mobile vs desktop
Contextual rather than global navigation

50. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Mobile vs desktop
Simplicity: fewer graphics and text

51. „A P P V S W E B
D I F F E R E N C E S &
T R E N D S
USERS ON MOBILE ARE MUCH MORE RUSHED, MORE DISTRACTED &
FAR LESS PATIENT THAN DESKTOP USERS.
STRIP OUT EVERY NON-CRITICAL FEATURE AND INTERFACE WHEN
CONVERTING DESKTOP INTERFACES TO MOBILE.
Garrett Perks
Founder & Creative Director at EvenVision

52. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Mobile vs desktop
Integration with phone functions

53. U X / U I D I F F E R E N C E S
B E T W E E N
A P P S & W E B S
Responsive vs Adaptive Design

54. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Responsive vs Adaptive Design
Responsive Design
• One design can serve any device
or screen size
• No need to design separate
websites for mobile, tablet, and
desktop devices
• Allows for one URL and single
content source

55. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Responsive vs Adaptive Design
Responsive design = client-side
• The whole page is delivered to the
device browser (the client), and the
browser then changes how the page
appears in relation to the
dimensions of the browser window

56. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Responsive vs Adaptive Design
Adaptive Design
• Device and device-specific
features detected
• Website served to the user based
on that information
• The result: a website custom-made
for the user’s device

57. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Responsive vs Adaptive Design
Adaptive design = server-side
• The server detects the attributes
of the device, and loads a version
of the site that is optimised for its
dimensions and native features

58. Responsive vs Adaptive
Google recommends using RWD over other design patterns

59. U X / U I D I F F E R E N C E S
B E T W E E N
A P P S & W E B S
Responsive vs Adaptive

60. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Responsive vs Adaptive
Responsive design advantages
• Google recommends it: Good page ranking
• One set of code
• Same URL structure
• Less work for Devs

61. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Responsive vs Adaptive
Adaptive design disadvantages
• Two sets of code
• More code
• Agent detection: Google “Error prone”
• Link dilution: value of web pages goes lower

62. Desktop-like-experiences on mobile

63. HTML5 Canvas
Canvas allows developers to use JavaScript in order
to create mobile websites that enable a rich
desktopweb-like-experience.

64. navigatingresponsibly.dk

65. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
navigatingresponsibly.dk

66. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
HTML5 Canvas
• Very fluid animations / parallax effects
• Reminds of Flash
• Made coding JavaScript
• Or using Adobe Animate CC as an editor
• HTML only shows used text
• Difficult for SEO
• Difficult for mobile bandwidth

67. P A T E N T S &
I N V E N T I O N S
Apps conquering desktop space

68. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Chrome OS
Google Play Store and “over a million apps” will be
headed to Chrome OS.

69. P A T E N T S &
I N V E N T I O N S
Sub topic 1Chrome OS

70. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Microsoft Continuum
Continuum is lets the user interface adapt
automatically depending on the situation.

71. Microsoft Continuum

72. P A T E N T S &
I N V E N T I O N S
Sub topic 1Microsoft Continuum

73. A P P V S W E B
D I F F E R E N C E S &
T R E N D S
Remix OS
Designed to bring simplicity to productivity, Remix OS
2.0 features: multitasking, task bar, notifications,
keyboard, right-click, file manager, Google Play and
more.

74. Remix OS

75. Remix OSRemix OS

76. Q U E S T I O N S ?
R
X
U
F
O
U
M

77. Alexander Meinhardt
krunchtime.org
KRUNCHTI M E I NTE RACTIVE
Iker Ortiz de Arri
COAU THORS