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

Mobile Web Development Workflow

Addy Osmani
October 29, 2013

Mobile Web Development Workflow

Tools for keeping you productive during mobile web development. Given at #Frontrend in Tokyo.

Addy Osmani

October 29, 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. 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