Mobile Web Rock
-
Upload
ido-green -
Category
Technology
-
view
318 -
download
0
Transcript of Mobile Web Rock
Google Confidential and Proprietary
+Ido Green@greenido
Responsive web design Dynamic serving Separate mobile site
Does my URL stay the same?
Does my HTML stay the same?
Primary content not in Flash
Viewport must be configured
Readable font size
No fixed-width viewport
Content sized to viewport
Tap targets clickable
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)
Use examples in Webmaster Tools to debug where issues are with your
server configuration
www.google.com/webmasters/tools
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
https://developers.google.com/webmasters/smartphone-sites/
https://www.google.com/webmasters/tools/
Two essential links to remember
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
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.
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
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
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!