$30 off During Our Annual Pro Sale. View Details »

Mobile Workflow

Mobile Workflow

Tools and tips for improving your mobile web development workflow.

With thanks to LukeW and Brad Frost for their device imagery.

Addy Osmani

November 17, 2013

More Decks by Addy Osmani

Other Decks in Programming



  2. This is the web today.

  3. "More people have access to mobile than to running water

    and toothbrushes" http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets
  4. "87% of mobile users expect sites to load at least

    as fast, or faster than on their desktop." http://www.strangeloopnetworks.com/web-performance-infographics/
  5. "57% will abandon a site after waiting 3 seconds for

    a page to load" http://www.strangeloopnetworks.com/web-performance-infographics/
  6. This is most of us today. This is most developers

  7. Let’s change that.

  8. Developing mobile-first should now be assumed.

  9. Tools can help us find and fix mobile regressions earlier.

  10. How do you test across multiple devices?

  11. Re-checking your site on mobile is a pain

  12. Luckily tools can help us test more efficiently

  13. Navigate all devices to the same URL

  14. Remote Preview

  15. A lo-fi, free option Remote Preview

  16. Remote Preview [+] Free! [-] Loads page into iframe [-]

    Requires user to type url in page [+] Central place to change url to load into iframe after initial set-up bit.ly/remotepreview
  17. Synchronize navigation & get screenshots.

  18. Adobe Edge Inspect CC

  19. None
  20. Remote debugging with Weinre

  21. None
  22. Get device screenshots

  23. Adobe Edge Inspect [-] Displays site in a WebView [+]

    Supports live reload [+] Extension to load any page you view in Chrome [-] Can’t account for localhost (i.e. switch to ip addr. of machine on local network) [+] Remote Inspect via Weinre bit.ly/edgeinspect
  24. Refresh all devices on edit

  25. Grunt + LiveReload

  26. None
  27. Grunt + LiveReload [+] Free! [+] Easily see how each

    change you save looks across devices [+] Works with any modern mobile browser [-] Requires you to use Grunt for your build process bit.ly/gruntsync
  28. Synchronize cross-device edits without saving

  29. Emmet LiveStyle

  30. None
  31. Emmet LiveStyle [+] Free! [+] Works with Chrome, Safari and

    Sublime Text [+] Cross-platform [-] Requires you to install a package or extension livestyle.emmet.io
  32. Synchronize scrolls, clicks, interactions as well as navigation

  33. GhostLab

  34. Sync desktop & mobile navigation

  35. Sync everything?

  36. None
  37. Even syncs forms, scroll, clicks and supports LiveReload.

  38. Remote debugging Also done through Weinre

  39. Ghostlab [+] Creates server to folder contents [+] Syncs scrolls,

    clicks and reloads [-] Needs typing into browser on each device [+] Allows to match up scrolling and input [-] OS X Only [+] Debugging via Weinre bit.ly/ghostapp
  40. Mobile Debugging

  41. DevTools Remote Debugging Many improvements over the past year

  42. RAW USB Debugging! USB debugging without a plugin

  43. Firefox for Android + ADB

  44. Remote debugging Safari

  45. Debug iOS WebView

  46. iOS WebKit Debug Proxy bit.ly/webkitdebug

  47. Debug WebView/PhoneGap on Android

  48. jshyDebugger Debug mobile web applications and hybrid/WebView/PhoneGap apps on Android

  49. jshyDebugger Live Editing

  50. jshyDebugger Timeline

  51. jshyDebugger ADB plugin support

  52. Debug directly on iOS

  53. MIHTool bit.ly/mihtool

  54. MIHTool

  55. Remote JavaScript consoles

  56. jsConsole bit.ly/jsconsole Remotely inject code into and debug any browser

    window or device.
  57. None
  58. Aardwolf Remote JavaScript debugger for Android / iOS / Windows

    Phone 7 / BlackBerry OS 6 bit.ly/aardwolfapp
  59. Simulate real-network conditions

  60. charlesproxy.com

  61. None
  62. Network Link Conditioner

  63. slowyapp.com

  64. Netem, WANEm (Linux) bit.ly/linuxnetem

  65. Fiddler (Win/Mac/Linux) fiddler2.com

  66. Captures all traffic Playback recorded traffic sessions

  67. Visual regression testing

  68. Wraith bit.ly/wraithapp

  69. None
  70. Huxley bit.ly/huxleyapp

  71. PhantomCSS bit.ly/phantomcss A CasperJS module for visual regression testing

  72. Device Testing

  73. It’s tough.

  74. Get real devices.

  75. Screenshots or live testing?

  76. BrowserStack + local tunneling

  77. None
  78. grunt-browserstack Useful BrowserStack task for Grunt launchpad You can launch

    browsers! From NodeJS! Local ones! Remote ones! Browserstack ones!
  79. Sauce Labs Screenshots & Recordings

  80. None
  81. grunt-saucelabs Grunt task running tests using Sauce Labs. Supports Qunit

    and Jasmine tests node-saucelabs Node wrapper around BrowserStack API
  82. Device Anywhere

  83. Simulators & Emulators bit.ly/simulatorlist Massive, well-maintained list of options available

  84. Do I even need an emulator? Chrome DevTools Emulation

  85. Emulate Viewport Chrome DevTools Emulation

  86. Emulate Touch Events Chrome DevTools Emulation

  87. Emulate Orientation Chrome DevTools Emulation

  88. Emulate User Agent Chrome DevTools Emulation

  89. Emulate Geolocation Chrome DevTools Emulation

  90. Build tooling

  91. grunt-responsive-images grunt-contrib-imagemin grunt-autoshot

  92. Grunt PageSpeed

  93. None
  94. Yeoman + Mobile

  95. generator-mobile • Scaffold support for Bootstrap 3, TopCoat, Zurb Foundation

    and Pure • Generates responsive images for srcset • Generates screenshots of your site at different viewport sizes • Uses BrowserStack for cloud device testing • Includes FastClick to avoid iOS touch delays • Includes boilerplate for FullScreen API • Includes only the Modernizr feature detects your projects uses • Converts images to WebP • Includes a polyfill for async. localStorage
  96. None
  97. Performance Insights

  98. Remote debugging + DevTools Timeline

  99. Rendering Performance Tooling

  100. PageSpeed Insights For Mobile

  101. PageSpeed Insights bit.ly/pagespeedi

  102. mod_pagespeed bit.ly/modpagespeed

  103. bit.ly/mobitest Returns total page load times, individual request headers and

    timings from WebPageTest using default browsers in iOS/Android/BB MobiTest
  104. None
  105. Phantomas Metrics Collector

  106. Is that really the logo?

  107. None
  108. 92 predefined metrics Export to JSON bit.ly/phantoma

  109. Need more insights? Chrome Graphics team have you covered.

  110. Telemetry Python wrapper around RDB. bit.ly/telemetrych

  111. Generate Device Art

  112. Android Device Art Generator

  113. bit.ly/deviceart

  114. Pro-tip: Grab a screenshot from Android adb shell screencap -p

    | perl -pe 's/\x0D\x0A/\x0A/g' > screen.png Using ADB:
  115. placeit.net

  116. None
  117. mockuphone.com

  118. None
  119. Lots of tooling options available.

  120. Use tools. not rules.

  121. @addyosmani +AddyOsmani Thanks!

  122. Next up..

  123. None
  124. None