Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UXINDIA16- Progressive Web Applications - What to keep in mind ( Rahul Rout ) by uxindia

uxindia
October 21, 2016

UXINDIA16- Progressive Web Applications - What to keep in mind ( Rahul Rout ) by uxindia

By now, you’ve probably heard that Progressive Web Apps are the future of all mankind. They’ll bring world peace, end hunger, save the rainbows and unicorns, bring balance to the force, and a whole lot more. In the process, they might even push the mobile web forward, bring parity to web and native apps, and help mobile developers reach more users beyond the confines of the app stores. – blog.ionic.io The talk is going to provide an overview of what Progressive Web Apps are, what features do they have and what are the aspects to keep in mind when designing a PWA. Finally show a couple of Demos of PWAs.

uxindia

October 21, 2016
Tweet

More Decks by uxindia

Other Decks in Design

Transcript

  1. 3

  2. They are going to • Be the future of mankind

    • Save the rainbows and unicorns • Bring balance to the “Force” And in the process • Push the mobile web forward • Bring parity to mobile web and native apps 4
  3. 5

  4. 6 A web application using modern web technologies to deliver

    app like user- experience. They evolve from pages in browser tabs to top level items that are available on a user‟s home screen They exhibit reliable performance – Like a native app
  5. 8

  6. 9

  7. This is the time when you‟re giving your user a

    feedback that something is happening 10
  8. 11 Is your App available • Paints of above the

    full content • Headline text • Something that a user can find useful
  9. If the user starts tapping on the page something usable

    is going to happen 13 Is the App actually usable
  10. 14

  11. • Script that runs in the background • Separate from

    the web page • Responds to events, network request made by the page • Has an intentionally short life span 15
  12. • Powerful for offline usage (caching) • Also offers significant

    wins in other forms – Instant loading apps on repeated views 16
  13. 17

  14. Application Shell • Send the most necessary content down the

    network first – Toolbar – Drawer – Few Cards • Then dynamically populate the content with the rest of the data 19
  15. 24 • Angular – 2 : Final release version on

    September 14th 2016 • Angular Mobile Toolkit let‟s you build PWA‟s with minimum code required • Automatic PWA‟s • One developer, many platforms
  16. • Screen transitions shouldn‟t feel slow due to blocking on

    the network • Tappable areas should give touch feedback • Touching an element while scrolling shouldn‟t trigger touch feedback • Content shouldn‟t jump as the page loads • Buttons and „non-content‟ shouldn‟t be selectable • Provide an easy way to share content 25 *Credits : Owen Campbell Moore http://bit.ly/2dVAY3y
  17. • Use system fonts • Avoid overly “web-like” design •

    Touch interactions should be implemented very well, or not at all 26 *Credits : Owen Campbell Moore http://bit.ly/2dVAY3y
  18. • Addy Osmani‟s Talk in Google IO: https://goo.gl/Be5rEz • Developers.google.com:

    https://goo.gl/KdWhwv • Blog.ionic.com: http://blog.ionic.io/what-is-a-progressive-web-app/ 27