web fundamental 4 developers
TRANSCRIPT
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
