Web fundamental 4 developers

Oct 2014

Updates

+Ido [email protected]

Mobile Vs Desktop - Global Trends

India in terms of mobile usage

A unique country in terms of mobile usage

A unique country in terms of mobile usage

Multi Device

● Setup Environment

● Develop Your Site

● Type Of Testing

Multi-Device Tools

Setup Environment

Editor

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.

Web Starter Kit

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

Web Starter Kit

Build Your Site

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.

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.

Type Of Testing

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.

Cloud Testing

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.

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

How To?● Web Fundamentals

● Web Starter Kit

● html5rocks.com

● Page speed insights

● webpagetest.org

+Ido Green@greenido

Thank you!