Download as PDF, PPTX
Uploaded byIdo Green
Mobile Web Rock
The document discusses the importance of mobile web optimization compared to desktop, highlighting mobile usage trends, especially in India. It covers best practices for mobile site configuration, including responsive design and ensuring site accessibility for Googlebot. Additionally, it provides testing tools and resources for debugging mobile sites, emphasizing the need for cloud testing and real device testing.
More Related Content
![Crypto 101 and a bit more [Sep-2022]](https://cdn.slidesharecdn.com/ss_thumbnails/crypto101andabitmore9-2022-220921232434-90615cc8-thumbnail.jpg?width=640&height=640&fit=bounds)
Mobile Web Rock
- 1.
- 2. Google Confidential andProprietary +Ido Green @greenido
- 3.
- 4. Google Confidential andProprietary Why?
- 5. Mobile Vs Desktop- Global Trends
- 6. India - mobileusage
- 7. Primary Channel ForCommercial
- 8. Google Confidential andProprietary Distribution
- 10.
- 11. Responsive web design Separatemobile siteDynamic Serving
- 12. Google Confidential andProprietary
- 13. Responsive web designDynamic serving Separate mobile site Does my URL stay the same? Does my HTML stay the same?
- 14.
- 15. Primary content notin Flash Viewport must be configured Readable font size No fixed-width viewport Content sized to viewport Tap targets clickable
- 16. Primary content withouthorizontal swiping
- 17. Mobile misconfigurations: Big mistakeson small devices
- 18.
- 19. We can't renderyour site and recognize the mobile version! ● Is robots.txt is blocking Googlebot from crawling JavaScript and CSS content? ● Using the fetch as google and render tool can help you hunt down the blocked culprit.
- 20. Treat Googlebot asa regular user (not as a specific user-agent) Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
- 21.
- 22.
- 23. Use examples inWebmaster Tools to debug where issues are with your server configuration www.google.com/webmasters/tools
- 24. The ‘Mobile SEO’checklist
- 25. Have a mobile-friendlysite Allow crawling of all CSS, JS and other resources Use modern technologies like: HTML5, CSS3 Check your redirects Don’t serve errors for smartphone users Treat Googlebot for smartphones like other smartphones
- 26.
- 27.
- 28. Google Confidential andProprietary How?
- 29. Google Confidential andProprietary ● Setup ● Develop ● Testing Multi-Device Tools
- 30.
- 31. Google Confidential andProprietary Editor
- 32. Google Confidential andProprietary Setup DevTools ● CLI (work) 4 you! ● Responsive layouts - a tool to resize and capture screen views. ● Automatically optimize, build, and live reload your testing URL. ● Use device emulation and remote debugging as early as now.
- 33. Google Confidential andProprietary Setup Web Starter Kit ● How much UX to inherit from the Web Starter Kit? ● The Web Starter Kit tools are optional. ● Bonus: Live reload. $ git clone https://github.com/google/web-starter-kit.git
- 34. Google Confidential andProprietary Web Starter Kit
- 35.
- 36. Google Confidential andProprietary Process ● Build should be cyclical and automatic. ● Tools must optimize for performance ● Tests - Automate as much as you can. ● Integrate build tools with debugging tools -> iterate.
- 37. Google Confidential andProprietary Debug ● Chrome DevTools ● Debug your site on real devices with one-click. ● Profile! ● DevTools Screen pane within the Emulation panel let you check your responsive layouts on a range of devices.
- 38.
- 39. Google Confidential andProprietary Cloud Testing ● Cloud testing - test on browsers, platforms, and devices in the cloud. ● Emulators mimic the mobile device hardware and operating systems ● iOS testing - Use iOS simulator + Real devices.
- 40. Google Confidential andProprietary Cloud Testing
- 41. Google Confidential andProprietary DevTools Emulation ● Prototyping on the desktop; then tackle the mobile-specific parts on the devices you intend to support. ● Emulation tool helps you test your site on a range of devices. ○ Responsive ○ User interactions ○ Device location. ● Unreliable connectivity - Emulate network conditions.
- 42. Google Confidential andProprietary Real Device Testing ● Test on real devices. ● Testing - A click away. ● Testing solution - live reloading. ● Synchronized testing
- 44. GOOD PSI >=80 OK PSI >= 65 < 80 POOR PSI < 65
- 47. Google Confidential andProprietary Resources ● Web Fundamentals ● Web Starter Kit ● html5rocks.com ● Page speed insights ● webpagetest.org
- 48. Google Confidential andProprietary +Ido Green @greenido Thank you!