Tips for delivering better experiences for mobile users

A presentation given at the GDG Federal University of Agriculture Abeokuta , Ogun, Nigeria Mobile sites certification study jam on some tips to deilver better experiences for website visitors on mobile

Transcript

1. GOOGLE DEVELOPER GROUP FUNAAB Study Jam (Web): Mobile Sites Certification 10th February 2018
2. Sayo_Paul
   
3. Deliver User-centered mobile experiences 1. You don’t need to fit everything in. Your goal is to prioritize what’s most important and make that most prominent. 2. You should trim your navigation bar to the fewest menu items possible . 3. Be consistent, link your logo at the top of every page to the homepage .
4. Deliver User-centered mobile experiences (cont’d) , Case study - JUMIA 4. Search is keyyyyy.
5. Search Tips 1. Make site search visible . 2. Provide relevant results . 3. Offer filters . 4. Guide users to better results .
6. Search Tips ( cont’d ) . Case study - Jumia
7. Other tips 1. Optimize every web page on the site for mobile. 2. Offer the right zoom . 3. Stay in the same window. 4. Avoid “full site”. 5. Be clear about location.
8. Make mobile sites that drive conversions 1. Forcing users to register . 2. Forcing users to type dates in a specific format. 3. Forcing users to fill out forms every time. 4. Create usable accessible forms.
9. Form Tips Case study - Jumia
10. Test and optimize mobile experiences 1. Experiment on your site with A/B testing . Link to succesful A/B tests. https://blog.hubspot.com/marketing/a-b-te sting-experiments-examples 2. Run your test with Google Optimize . 3. Measure performance with Google Analytics.
11. Accelerated Mobile Pages Accelerated Mobile Pages (AMP) are streamlined static content pages that appear to load almost instantaneously. Features ; 1. Build with AMP HTML . 2. Use the AMP JavaScript library and AMP Cache . 3. AMP is particular about loading JS scripts asynchronously . 4. Images are only downloaded if they are likely to be seen by the user, above the fold, or if the user is likely to quickly scroll to them. 5. AMP pages using third party JS are restricted to sandboxed iframes hence in a sense they’re separate from the page
12. AMP Case study - Bible Diary blog
13. Progressive Web Apps ( PWA ) Progressive Web Apps offer many of the features of regular mobile apps, such as push notifications, but can be installed directly from the browser, bypassing app stores. A Progressive Web App (PWA) offers the benefits of a natively installed app, minus the app store. Features ; 1. Works offline because service workers act as a proxy, precaching critical parts of your website so that it can be used offlline. 2. They sit like an app on your home screen and even have push notifications . KEY CONCEPTS ; App shell - The application shell is the minimal code and markup powering the user interface . An app shell should contain only what needs to be on-screen when the PWA is loaded. Service Worker - The Service Worker API empowers us to design PWAs that perform tasks apart from a user’s interaction with a webpage, such as delivering a push notification or synchronizing the app in the background.
14. PWA Case study - Twitter Lite
15. Conclusion. We can see that there are a lot of things we as web devs can do to improve the user experience of our users on mobile and create faster sites . Goodluck in your exams . Sayo_Paul ♥