1.
Updates
Oct 2014

2.
+Ido Green
@greenido
ido-green.appspot.com

3.
Mobile Vs Desktop - Global Trends

4.
India in terms of mobile usage

5.
A unique country in terms of mobile usage

6.
A unique country in terms of mobile usage

7.
Multi Device

8.
Multi-Device Tools
● Setup Environment
● Develop Your Site
● Type Of Testing

9.
Setup Environment

10.
Editor

11.
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.

12.
Web Starter Kit

13.
Setup WSK
● Decide how much UX to inherit from the Web Starter Kit.
● The Web Starter Kit tools are optional
● Bonus: Once you've successfully set up the build tools, the site
automatically loads in the browser.
$ git clone https://github.com/google/web-starter-kit.git

14.
Web Starter Kit

15.
Build Your Site

16.
Build Your Site - The Process
● Build
○ Should be cyclical and automatic.
○ Tools - optimize for performance
● Automate as much as you can your tests!
● Integrate build tools with debugging tools so you
can iterate.

17.
Debug with Chrome DevTools
● Development workflow with DevTools mobile emulation
panel.
● Debug your site on real and emulated devices with one-click.
● Profile - Users won't stay on any page that performs
badly in normal network conditions.
● Check your site's responsive layouts on a range of
devices using the Chrome DevTools Screen pane within
the Emulation panel.

18.
Type Of Testing

19.
Cloud Testing
● Cloud testing - test on browsers, platforms, and devices
in the cloud.
● Emulators mimic the mobile device hardware and
operating systems
● If you don't have access to a real device, use an
emulator rather than a simulator.
● iOS testing - Use iOS simulator + Real devices.

20.
Cloud Testing

21.
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.

22.
Real Device Testing
● You must test on real devices.
● Testing your site on real devices
need only be a click away.
● Choose a testing solution that
has live reloading.
● Synchronized testing

23.
How To?
● Web Fundamentals
● Web Starter Kit
● html5rocks.com
● Page speed insights
● webpagetest.org

24.
Thank you!
+Ido Green
@greenido