March 2015

Mobile Web Rock

Google Confidential and Proprietary

+Ido Green@greenido

1. Why?

2. Distribution

3. How

Google Confidential and Proprietary

Why?

Mobile Vs Desktop - Global Trends

India - mobile usage

Primary Channel For Commercial

Google Confidential and Proprietary

Distribution

Configurations for mobile sites

Responsive web design

Separate mobile siteDynamic Serving

Google Confidential and Proprietary

Responsive web design Dynamic serving Separate mobile site

Does my URL stay the same?

Does my HTML stay the same?

How Google identifies mobile-friendly sites?

Primary content not in Flash

Viewport must be configured

Readable font size

No fixed-width viewport

Content sized to viewport

Tap targets clickable

Primary content without horizontal swiping

Mobile misconfigurations: Big mistakes on small devices

Blocked contentBlocked content

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.

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)

Misdirected contentMisdirected content

www.nationalworldwide.com/news 404 Not Foundm.nationalworldwide.com/news

Mobile-specific 404s

Use examples in Webmaster Tools to debug where issues are with your

server configuration

www.google.com/webmasters/tools

The ‘Mobile SEO’ checklist

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

Resources

https://developers.google.com/webmasters/smartphone-sites/

https://www.google.com/webmasters/tools/

Two essential links to remember

Google Confidential and Proprietary

How?

Google Confidential and Proprietary

● Setup

● Develop

● Testing

Multi-Device Tools

Setup Environment

Google Confidential and Proprietary

Editor

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.

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

Google Confidential and Proprietary

Web Starter Kit

Build Your Site

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.

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.

Testing

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.

Google Confidential and Proprietary

Cloud Testing

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.

Google Confidential and Proprietary

Real Device Testing● Test on real devices.

● Testing - A click away.

● Testing solution - live

reloading.

● Synchronized testing

GOOD PSI >= 80 OK PSI >= 65 < 80 POOR PSI < 65

https://www.ssllabs.com/ssltest/

Google Confidential and Proprietary

Resources● Web Fundamentals

● Web Starter Kit

● html5rocks.com

● Page speed insights

● webpagetest.org

Google Confidential and Proprietary

+Ido Green@greenido

Thank you!