Designing Great UIs for Progressive Web Apps

The keys to great Progressive Web App UX

Always be testing on real world hardware

Take UX inspiration from native apps

Use a checklist

-webkit-tap-highlight-color: rgba(0,0,0,0);
user-select: none;
Each platform has a recommended font. Using it in your PWA can make the app feel more at home.
/* iOS */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* Android */
font-family: 'RobotoRegular', 'Droid Sans', sans-serif;

/* Windows Phone */
font-family: 'Segoe UI', Segoe, Tahoma, Geneva, sans-serif;
A bottom navigation bar doesn’t suggest the user is able to swipe left and right to move between sections

We can build amazing user experiences in Progressive Web Apps

--

--

@owencm. Googler | Computer Scientist | JavaScript-er?

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store