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.

96270e4c3e5e9806cf7245475c00b275?s=128

Addy Osmani

November 17, 2013
Tweet

Transcript

  1. 3.

    "More people have access to mobile than to running water

    and toothbrushes" http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets
  2. 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/
  3. 5.

    "57% will abandon a site after waiting 3 seconds for

    a page to load" http://www.strangeloopnetworks.com/web-performance-infographics/
  4. 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
  5. 19.
  6. 21.
  7. 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
  8. 26.
  9. 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
  10. 30.
  11. 31.

    Emmet LiveStyle [+] Free! [+] Works with Chrome, Safari and

    Sublime Text [+] Cross-platform [-] Requires you to install a package or extension livestyle.emmet.io
  12. 33.
  13. 36.
  14. 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
  15. 54.
  16. 57.
  17. 58.

    Aardwolf Remote JavaScript debugger for Android / iOS / Windows

    Phone 7 / BlackBerry OS 6 bit.ly/aardwolfapp
  18. 61.
  19. 69.
  20. 77.
  21. 78.

    grunt-browserstack Useful BrowserStack task for Grunt launchpad You can launch

    browsers! From NodeJS! Local ones! Remote ones! Browserstack ones!
  22. 80.
  23. 81.

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

    and Jasmine tests node-saucelabs Node wrapper around BrowserStack API
  24. 93.
  25. 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
  26. 96.
  27. 103.

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

    timings from WebPageTest using default browsers in iOS/Android/BB MobiTest
  28. 104.
  29. 107.
  30. 114.

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

    | perl -pe 's/\x0D\x0A/\x0A/g' > screen.png Using ADB:
  31. 116.
  32. 118.
  33. 122.
  34. 123.
  35. 124.