Explore the design principles for creating exceptional Progressive Web Apps (PWAs) in this informative conference talk. Learn about the unique characteristics of PWAs from a design perspective, including app shell architecture, touch guidelines, responsiveness, and offline experiences. Discover how to implement Material Design components, create visually matching app icons, and optimize user engagement through strategic use of install banners and menu designs. Gain insights on building resilient PWAs by leveraging the app shell model, utilizing device fonts, and providing user control for offline functionality. Address important design considerations such as accessibility, low-end device compatibility, and data cost optimization. Master techniques for creating PWAs that offer a seamless, native-like user experience while maintaining the flexibility and reach of web applications.
Overview
Syllabus
Intro
Designing Great Progressive Web Apps
Use Material Design Components
Your app icon should visually match the native app icons
Engaging
Delay the app install banner until after the user engages with your app
Don't break the user's flow for an update
Don't use fake android native banners
The burger menu might be hurting your UX
Resilient
Use the app shell model
Web fonts are heavy- device fonts are weightless
Give the user control to download for offline use
Inform the user when the app is ready for offline consumption
Give an offline mode color to your theme.
Other design considerations
The app icon on iOS is a screenshot of the app by default
Design for accessibility and low-end devices
Consider high data cost and low-end phones.
Make better color choices with sufficient contrast
Implement techniques for an accessible website.
Taught by
NDC Conferences
