Mobile sites Certification Study Jam 2018

Date : 10th Feb 2018
Hosted by GDG Kisii
Sponsored by Google, GitHub Education &Andela

Transcript

1. Mobile Sites Certification Study Jam. Saturday, 10th February 2018. 0830hrs – 1730hrs Sakagwa SG25, Kisii University. Hosted by GDG Kisii. Proprietary & Confidential
2. MOBILE SITES CERTIFICATION STUDY JAM
3. What is a study jam? Study Jams are community-run study groups for students on Google Developers content, on various product topics. The objective of Study Jams is to raise the technical proficiency of our global community members through the highest possible course completion rate. WiFi SSID : #MobileSitesKisii Pass : studyjam18
4. Why host a study jam? Study Jams are a great opportunity to bring members of the community together to learn something in person. These trainings will give your community members a specific skill they can use for personal development or career advancement. As a complement to large tech talks and viewing party events that you may already be hosting, the Study Jams framework brings together a small group of your members who are interested in learning about the same topic. WiFi SSID : #MobileSitesKisii Pass : studyjam18
5. Mobile Sites Certification This assessment covers basic and advanced concepts, including best practices for creating, managing, measuring, and optimizing mobile websites. Passing this assessment demonstrates a strong knowledge of mobile sites design, and an understanding of best practices and current browser technologies.
6. Checklist STEPS TO GET YOU STARTED Verified your attendance on Meetup Registered on Academy for Ads Connected to WiFi GitHub Student Developer Pack
7. 1. GOOGLE ACADEMY FOR ADS Set up your Academy For Ads profile at https://academy.exceedlms.com/
8. NAVIGATE TO Mobile Mobile Sites Certification Browse
9. 2. GITHUB STUDENT DEVELOPER PACK Apply for GitHub Student Developer Pack https://education.github.com/
10. STEPS TO FOLLOW Fill form & Upload pic. Submit Take picture Of Student ID
11. WEB DEVELOPMENT CONCEPTS AUTHORING Describing content for your web page. Usually done using HTML. STYLING Describing appearance and look of content on your web pages. Done using CSS. PROGRAMMING Making elements do things by giving them behavior and functionality. Can be run on server to process data. •Client side – JS •Server-side – Node.JS, PHP
12. BUILDING FOR ALL DEVICES & USERS. SCREEN REAL-ESTATE Understand users needs, desires and limitations.
13. “ I'm not motivated by the money rather by the work I do and the challenges that come with it.
14. WHAT IS A MOBILE SITE A mobile site, or mSite, is a website designed to be used on a mobile device through the device’s web browser, like Safari or Chrome. This means users can view and browse the website on their mobile devices without downloading or installing a separate app.
15. OUR MAIN FOCUS POINTS WHY MOBILE SITES MATTER CREATING AN EFFECTIVE UX IMPROVING MOBILE SITE SPEED ADVANCED WEB TECHNOLOGIES
16. Let’s review some concepts Win customers with mobile sites Cut load times with Developer Tools Speed up mobile sites rendering Key metrics for testing your site Optimize mobile site transfer size Optimize images and fonts Focus on mobile user experience Deliver user-centered mobile experiences Make mobile sites that drive conversions Test and optimize mobile experiences Create super fast sites with AMP Create Progressive Web Apps Engage users with APIs.
17. Win customers with mobile sites Give users what they want in regards to speed and experience. This in turn translates to conversions. Why Mobile Sites? •High usability •Lower cost to develop •Simple tracking Learn about mobile site user experience frustrations for example a company using high-res imagery hence creates heavy page weight leading to slow page loading.
19. Cut load times with Developer Tools Developer Tools on Chrome Browser (Inspect Element) Tweak around with various variables. •Network •Performance •Memory •Security Render tree The render tree refers to the browser’s process for interpreting the document object model (DOM) and CSS object model (CSSOM) to determine the appearance of a page on screen.
20. Speed up mobile sites rendering Users are impatient. Shorten critical path (trips to server & back) Limit number of critical resources. Steps •Analyze – Chrome DevTools •Minimize – ASYNC & DEFER Javascript files not needed in initial render •Optimize – Compression tools like tinypng.com •ReOrder – load critical files first
21. Key metrics for testing your site •Speed index should be below 5000 •Resource request should range 80-100 •Page weight should be less than 1 MB
22. Optimize mobile site transfer size • Optimize images (tinypng.com). • Remove spaces & line returns in HTML & CSS. • Keep JS to a minimum. • Don’t block rendering. • Don’t block unnecessary assets. • Reduce http requests. • Optimize transfer size with data compression • Smaller files through minification
23. Optimize images and fonts Web fonts and images is essential to web design but they tend to slow down a site. Optimize Images •Minify and compress vector images •Remove unnecessary image metadata •Pick best raster image format •Minify and compress vector images •Remove unnecessary image metadata •Automate, automate, automate Optimize Fonts •Consistent URLs •Cache lifetime
24. Focus on mobile user experience Simplify conversions •Eliminating unnecessary fields •Fewer clicks Mobile site configuration •Responsive web design •Dynamic serving •Separate URLs • Does my URL stay the same? No. • Does my HTML stay the same? No
25. Deliver user-centered mobile experiences Connect users to content they’re looking for. Focusing on building mobile homepage, navigation and search to get users what they need, fast. You don’t need to fit in all desktop site content rather prioritize what’s important first and make them prominent. •Trim menu items. •Make search prominent and easily visible at the top of the page. •Provide relevant search results. •Provide filters to narrow down search results. •Form factor considerations
27. Make mobile sites that drive conversions ISSUES TO FIX •Require registration to browse – customers reluctant to give info unless they see how you deliver them value. Avoid locking out users unfamiliar with your brand by requiring them to register first. •Type dates in a specific format – Make it simple for the user Provide visual calendar/date chooser •Forms must be filled out every time – Don’t let your customers do all the work Label forms clearly to minimize errors. Take advantage of auto-fill.
28. Test and optimize mobile experiences Test mobile experience using Google Analytics and optimize UX. Experiment using A/B Testing TOOLS TO USE FOR TESTING Google Optimize – tool used to manage and measure results in Google Analytics Google Analytics What is A/B Testing – comparing two versions of a webpage to determine which one performs better. Bounce rate – session where a person left the site without interacting with the landing page.
29. Create super fast sites with AMP Accelerated Mobile Pages are streamlined static content pages that appear to load almost instantaneously. Developing with AMP •Build with AMP HTML •Use AMP JavaScript library and AMP Cache How AMP delivers content fast AMP can load the layout of the page without waiting for any resources since size is stated in HTML. Doesn’t allow extension mechanisms block page rendering.
30. Create Progressive Web Apps How to engage users with fast & reliable PWAs. PWAs eliminate the need to install & build native apps. Powering up a PWA UI using App Shell. The application shell is the minimal code and markup powering the user interface. Using service workers to build fast & reliable PWAs. Service Worker API performs background tasks like delivering a push notification or synchronizing the app. Service worker. Registered – Installed – Activated https://gdgkenya.org
31. Engage users with APIs. Simplify online shopping experience using The Payment Request API allows the browser itself to act as the intermediary between merchant and customer. Establish transaction details - the amount to be charged, expected payment currency, and accepted payment methods. Request payment - prompts the customer with the payments UI Make checkout and delivery seamless - Process merchant- specific payments
32. Web Resources CodePen is a social development environment for front-end designers and developers.. It's the best place to build and deploy a website, show off your work, build test cases, and find inspiration. Firebase for all your web issues from free hosting to storage and authentication. FormToFirebase.JS - a JS library to store all your form data on Firebase. ChapChapSQL – Lightweight PHP Library to perform CRUD operations quickly and securely. GitHub – Allows you to contribute, share and learn from an open source community. It’s a great way to also showcase your source code projects.
33. Fun.random( ); const a = { currentVal: 0, valueOf : function(){ return this.currentVal += 1 } }; const equality = (a == 1 && a == 2 && a ==3); console.log(equality);
34. TAKING THE EXAM Keep in mind • You'll need a score of 80% or higher to pass • You'll be able to review or change your answers before submitting the assessment • If you end the assessment early or the timer runs out before you've answered enough questions correctly, you won't pass
35. THANKS! Hosted by GDG Kisii