Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
Tweet

More Decks by Addy Osmani

Other Decks in Programming

Transcript

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

    and toothbrushes" http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets
  2. "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. "57% will abandon a site after waiting 3 seconds for

    a page to load" http://www.strangeloopnetworks.com/web-performance-infographics/
  4. 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. 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
  6. 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
  7. Emmet LiveStyle [+] Free! [+] Works with Chrome, Safari and

    Sublime Text [+] Cross-platform [-] Requires you to install a package or extension livestyle.emmet.io
  8. 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
  9. Aardwolf Remote JavaScript debugger for Android / iOS / Windows

    Phone 7 / BlackBerry OS 6 bit.ly/aardwolfapp
  10. grunt-browserstack Useful BrowserStack task for Grunt launchpad You can launch

    browsers! From NodeJS! Local ones! Remote ones! Browserstack ones!
  11. grunt-saucelabs Grunt task running tests using Sauce Labs. Supports Qunit

    and Jasmine tests node-saucelabs Node wrapper around BrowserStack API
  12. 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
  13. bit.ly/mobitest Returns total page load times, individual request headers and

    timings from WebPageTest using default browsers in iOS/Android/BB MobiTest
  14. Pro-tip: Grab a screenshot from Android adb shell screencap -p

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