We all agree that it's a mobile only world out there. You wish your site (and mobile web app) to be 'mobile first' and make sure they are giving your users an amazing experience. These slides will focus on how you can build search friendly mobile sites, and what type of tools and resources, you should leverage. From Zero to Hero - in 45min!

1. March 2015
Mobile Web Rock

2. Google Confidential and Proprietary
+Ido Green
@greenido

3. 1. Why?
2. Distribution
3. How

4. Google Confidential and Proprietary
Why?

5. Mobile Vs Desktop - Global Trends

6. India - mobile usage

7. Primary Channel For Commercial

8. Google Confidential and Proprietary
Distribution

10. Configurations for
mobile sites

11. Responsive web design
Separate mobile siteDynamic Serving

12. Google Confidential and Proprietary

13. Responsive web design Dynamic serving Separate mobile site
Does my URL stay
the same?
Does my HTML
stay the same?

14. How Google identifies
mobile-friendly sites?

15. Primary content not in Flash
Viewport must be configured
Readable font size
No fixed-width viewport
Content sized to viewport
Tap targets clickable

16. Primary content without horizontal swiping

17. Mobile misconfigurations:
Big mistakes on small devices

18. Blocked contentBlocked content

19. We can't render your
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 as a
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. Misdirected contentMisdirected content

22. www.nationalworldwide.com/news
404 Not Found
m.nationalworldwide.com/news
Mobile-specific 404s

23. Use examples in Webmaster Tools to
debug where issues are with your
server configuration
www.google.com/webmasters/tools

24. The ‘Mobile SEO’ checklist

25. Have a mobile-friendly site
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. Resources

27. https://developers.google.com/webmasters/smartphone-sites/
https://www.google.com/webmasters/tools/
Two essential links to remember

28. Google Confidential and Proprietary
How?

29. Google Confidential and Proprietary
● Setup
● Develop
● Testing
Multi-Device Tools

30. Setup Environment

31. Google Confidential and Proprietary
Editor

32. Google Confidential and Proprietary
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 and Proprietary
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 and Proprietary
Web Starter Kit

35. Build Your Site

36. Google Confidential and Proprietary
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 and Proprietary
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. Testing

39. Google Confidential and Proprietary
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 and Proprietary
Cloud Testing

41. Google Confidential and Proprietary
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 and Proprietary
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 and Proprietary
Resources
● Web Fundamentals
● Web Starter Kit
● html5rocks.com
● Page speed insights
● webpagetest.org

48. Google Confidential and Proprietary
+Ido Green
@greenido
Thank you!