Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Secret Super Powers of Mobile Browsers

52 views

Published on

Do you dream of pushing notifications directly to the mobile browser of your users? Geolocation in the browser? Of a browser-based chatting system with video and audio directly available without needing to download a single mobile application or plugin? Of transforming your website into a fully functional web app with a launch icon and a cache system? Let's check out what HTML5 APIs and Progressive Web Apps (PWAs) can achieve to enhance the experience of your mobile users in the browser.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Secret Super Powers of Mobile Browsers

  1. 1. Secret Super Powers of Mobile Browsers Stéphanie Walter - UX & UI Designer – Techfest Bucharest, September 2018
  2. 2. UX & UI Designer Mobile expert. Pixel & CSS Lover. stephaniewalter.design @WalterStephanie 🦊
  3. 3. Why would you build a native app today?
  4. 4. Visibility on “the store” and user’s phone
  5. 5. I want to engage with users
  6. 6. I want easy authentification and payment
  7. 7. I need access to device capabilities and sensors
  8. 8. Okay, what if you could do most of that in the browser?
  9. 9. Accessing and streaming medias
  10. 10. Access camera and files <input type="file" accept=“image/*"> <input type="file" accept=”video/*”>
  11. 11. Open the camera directly from browser <input type="file” capture accept=”…/*">
  12. 12. Accept attribute support
  13. 13. <input type="file" id="take- picture" accept="image/*" capture> Instagram directly in the browser? + CSS filters.
  14. 14. Video + audio chat in the browser
  15. 15. WebRTC Opens a direct real time communication channel between two clients. You can share sound, video and any other data.
  16. 16. WebRTC Support WebRTC getUserMedia/Stream API
  17. 17. Guitar tuner in the browser guitar-tuner.appspot.com
  18. 18. Accessing device capabilities and sensors
  19. 19. Accessing user’s geolocation
  20. 20. Geolocation API – support
  21. 21. Push notifications integrated in the operating system
  22. 22. Push API + Service Workers
  23. 23. Push API + Service Workers support
  24. 24. Play time: notification testing tool tests.peter.sh/notification-generator
  25. 25. Having fun with gyroscope and accelerometer 
 (and full screen) paperplanes.world
  26. 26. Gyroscope + Accelerometer support
  27. 27. Offline access anywhere, anytime
  28. 28. Service Workers intercept the request & provide cached files
  29. 29. Network type detection
  30. 30. Network API – support
  31. 31. Adapting the content to ambient light
  32. 32. Ambient light API and CSS Media queries lvl 5 Ambient Light API Environment Media Features : @media (light-level: dim | normal | washed) { // adaptation } (no support yet)
  33. 33. Let’s propose less battery consuming resources when the battery is low! Adapting the content to battery level
  34. 34. Battery Status API
  35. 35. Making transactions and authentification easy
  36. 36. <input 
 name="cardNumber" 
 id="cardNumber-CC" 
 type="text"
 autocomplete="cc-number"
 pattern=“[0-9]*"> iOS credit card scan & autocomplete
  37. 37. iOS credit card autofill
  38. 38. Google Pay API (W3C Payment API)
  39. 39. Payment Request API – support
  40. 40. Webauth - an API that allows for the use of biometric-based authentication, as well as smart cards and USB tokens, for authentication Fingerprint authentication
  41. 41. Web Authentication API – support
  42. 42. Bluetooth: connecting to objects and more…
  43. 43. Beacons that can broadcast URLs A Bluetooth Low Energy (BLE) beacon can broadcast and push URLs to users’s phones. Browsers can detect those URLs and open the webpage.
  44. 44. https://www.youtube.com/watch?v=1LV1Fk5ZXwA
  45. 45. Enterprise iOT potential is HUGE Collecting and monitoring data monitoring, controlling connected objects, etc.
  46. 46. Web Bluetooth API support
  47. 47. Progressive Web Apps, building native like web apps and websites
  48. 48. Add to Home screen from browser menu
  49. 49. Favicon on Home screen
  50. 50. realfavicongenerator.net
  51. 51. Service Workers Manifest.json
  52. 52. Android Mini Footer Bar 1.
  53. 53. Add to Home screen dialog 2.
  54. 54. Application installation 3.
  55. 55. Launch icon on Home screen and App Drawer 4.
  56. 56. Display mode
 (in manifest file) "display": "browser" "display": “standalone"
  57. 57. Native like features on Android
  58. 58. Changing the color of the URL bar <meta name="theme-color" content="#db5945">
  59. 59. “theme_color": “#133742" A global theme color via the manifest.json
  60. 60. Automatic Splashscreen Automagically generated based on ๏ background_color ๏ theme_color ๏ Application Name ๏ App icon
  61. 61. So, why should I build a Progressive Web App?
  62. 62. Free from the stores diktat
  63. 63. Fast UI, better user experience in the browser
  64. 64. UI tip: avoid platform specific design Nope
  65. 65. Bringing the experience offline
  66. 66. Keeping user engaged with notifications
  67. 67. ๏ Need good timing ๏ Are actionable ๏ Are personal Good Notifications Nope
  68. 68. Nope ๏ Need good timing ๏ Are actionable ๏ Are personal Good Notifications
  69. 69. 😠 Nope ๏ Need good timing ๏ Are actionable ๏ Are personal Good Notifications
  70. 70. Yeah, I just met you, And this is crazy, But here’s my request for permissions, So let me notify you maybe? 🎵 😠 😓
  71. 71. Ask for permissions in context What do I gain from letting you access this?
  72. 72. DO 👏 NOT 👏 DEMAND 👏 PERMISSIONS 👏 ON PAGE LOAD 👏 This is the slide you need to take a picture of
  73. 73. Give user control Please don’t spam me, let me choose!
  74. 74. Because you will only get one chance to ask for permissions! Asking users to reset permissions is a tedious task
  75. 75. Provide fallbacks Geolocation OR manual address
  76. 76. Letting (Android) users share the content from the PWA
  77. 77. Web Share (unofficial) API – support
  78. 78. PWAs are not only for Android Chrome users
  79. 79. Firefox gets a nice banner
 (but not real installation)
  80. 80. ๏ No notifications integrated in system ๏ No installation banner ๏ No parameter access ๏ Can only store 50Mb offline ๏ A few “glitches” iOS partially supports PWAs
  81. 81. We can install PWA as Chrome Desktop apps chrome://flags/#enable-desktop-pwas 
  82. 82. ๏ Microsoft manually published some selected PWAs in their store ๏ Bing is indexing PWAs ๏ Showing PWAs in Bing search results ๏ PWAs getting available in Microsoft store Microsoft 😍 PWA
  83. 83. pwa.rocks
  84. 84. ๏ Widgets on the phone ๏ Access to contact & calendar ๏ Notification badges ๏ UI control for keyboard trigger ๏ Performance (list view, scroll) So, what’s missing in mobile browsers?
  85. 85. UX & UI Designer Mobile expert. Pixel & CSS Lover. stephaniewalter.design @WalterStephanie 🦊 Attribution-NonCommercial-NoDerivs 3.0 France (CC BY-NC-ND 3.0 FR) inpx.it/tf2018-mobile

×