2016 App vs. Web: Differences & Trends

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.

Transcript

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 1 Android 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 1 Chrome 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 1 Microsoft 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 OS Remix OS
76. Q U E S T I O N S ? R X U F O U M
77. Alexander Meinhardt krunchtime.org KRUN C H T I M E I NT E R ACT I V E Iker Ortiz de Arri COAU T H ORS