Designing for PWA (Progressive Web Apps)

Download Designing for PWA (Progressive Web Apps)

Post on 21-Jan-2018




8 download

Embed Size (px)


<ol><li> 1. Designing for PWA (Progressive Web Apps) Tomasz Karwatka, CEO of Divante </li><li> 2. 1eCommerce - whats wrong with you? </li><li> 3. not suited for mobile not stable during peaks not effecitve with poor internet connection eCommerce right now </li><li> 4. not suited for mobile not stable during peaks not effecitve with poor internet connection too many platforms gap between customer needs and companies ability to deliver eCommerce right now GAP Technology Creators (eg. AFGA) Customers Companies (Retailers/Manufacturers) </li><li> 5. 2Progressive Web Apps </li><li> 6. 6 Progressive Web Apps Best features of Mobile App (UX) and Web (Distribution) combined Offline readiness Home Screen No Submission Linkable Re-engageable Alibaba Case Study 76% higher conversions across browsers 14% more monthly active users on iOS; 30% on Android </li><li> 7. 3Design Challenges </li><li> 8. 8 Strategy Multiple native apps vs one website Users expectations change when they consider something to be an app The Team - new skills, new process Front-end engineers - the most constrained resource on retail IT teams. </li><li> 9. 9 Approach UX inspiration from native apps Youre designing a native app Benchmarks - native apps on iOS and Android Mobile components Avoid overly web-like design - e.g. footers </li><li> 10. 10 No Browser = No Safety Net No: address bar, SSL indicator, back button, .. Back button - second most frequently used feature of the browser Own Navigation </li><li> 11. 11 Navigation Back from a detail page - retain scroll position on the previous list page Touch interactions - implemented very well, or not at all Keep simple navigation at the bottom </li><li> 12. 12 Content Placeholders for content while downloading skeleton screens Buttons and non-content shouldnt be selectable Provide an easy way to share content </li><li> 13. 13 Cache Performance VS Freshness PWAs are applications - need to boot </li><li> 14. 14 Payment Mobile abandonment rates exceed 80% when customers are asked to input their credit card details. The payment request API by Google eliminates checkout forms It allows merchants to request and accept any payment in a single API call. </li><li> 15. 15 Touch Tappable areas should give touch feedback Touching an element while scrolling is not clicking We implemented our own virtualized list component; it only renders the content visible within the viewport, incrementally renders items over multiple frames using the requestAnimationFrame API, and preserves scroll position across screens. - Twitter </li><li> 16. 16 Design Use device fonts instead of custom fonts. Images or SVG instead of custom fonts. </li><li> 17. 17 Inputs Ensure inputs arent obscured by keyboard </li><li> 18. 18 Sources u u u u u u u u u </li><li> 19. 4Open Source PWA </li><li> 20. You need a Web, Mobile Web, iOS App, Android App, Windows App, .. eCommerce Websites are not stable during peaks Websites are not effecitve with poor internet connection Long time2market to develop Mobile Apps and Mobile Web Progressive Web Apps Website that can be installed as an App. Best features of Mobile App (UX) and Web (Distribution) combined Storefront can be run without alive web- server there is no such traffic peak that can stop users from making orders Offline readiness - app can be used off-line Out-of-the Box Product, Based on Vue.js, developer-friendly approach, good doc Challenges Solution Vue Storefront </li><li> 21. Bleeding edge, scalable technology Node.js, Vue.js, Elastic Blazing fast It render at no time. Always. 100% offline, Black-Friday ready :) Vue Storefront </li><li> 22. 22 Divante Sp. z o.o. Dmowskiego 17 Street 50-203 Wrocaw +48 516 184 Check the demo! </li></ol>