Mobile Workflow

Tools and tips for improving your mobile web development workflow.

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

Transcript

1. MOBILE WORKFLOW
   IMPROVING YOUR MOBILE WEB DEVELOPMENT PRODUCTIVITY
   @addyosmani
   

   View Slide

2. This is the web today.
   

   View Slide

3. "More people have access
   to mobile than to running
   water and toothbrushes"
   http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets
   

   View Slide

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/
   

   View Slide

5. "57% will abandon a site
   after waiting 3 seconds for
   a page to load"
   http://www.strangeloopnetworks.com/web-performance-infographics/
   

   View Slide

6. This is most of us today.
   This is most developers today.
   

   View Slide

7. Let’s change that.
   

   View Slide

8. Developing mobile-first
   should now be assumed.
   

   View Slide

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

   View Slide

10. How do you test across
    multiple devices?
    

    View Slide

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

    View Slide

12. Luckily tools can help us test more efficiently
    

    View Slide

13. Navigate all devices to the
    same URL
    

    View Slide

14. Remote Preview
    

    View Slide

15. A lo-fi, free option
    Remote Preview
    

    View Slide

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
    

    View Slide

17. Synchronize navigation &
    get screenshots.
    

    View Slide

18. Adobe Edge Inspect CC
    

    View Slide

19. View Slide

20. Remote debugging with Weinre
    

    View Slide

21. View Slide

22. Get device screenshots
    

    View Slide

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
    

    View Slide

24. Refresh all devices on edit
    

    View Slide

25. Grunt + LiveReload
    

    View Slide

26. View Slide

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
    

    View Slide

28. Synchronize cross-device
    edits without saving
    

    View Slide

29. Emmet LiveStyle
    

    View Slide

30. View Slide

31. Emmet LiveStyle
    [+] Free!
    [+] Works with Chrome, Safari and Sublime Text
    [+] Cross-platform
    [-] Requires you to install a package or extension
    livestyle.emmet.io
    

    View Slide

32. Synchronize scrolls, clicks,
    interactions as well as navigation
    

    View Slide

33. GhostLab
    

    View Slide

34. Sync desktop & mobile navigation
    

    View Slide

35. Sync everything?
    

    View Slide

36. View Slide

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

    View Slide

38. Remote debugging
    Also done through Weinre
    

    View Slide

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
    

    View Slide

40. Mobile Debugging
    

    View Slide

41. DevTools Remote Debugging
    Many improvements over the past year
    

    View Slide

42. RAW USB Debugging!
    USB debugging without a plugin
    

    View Slide

43. Firefox for Android + ADB
    

    View Slide

44. Remote debugging Safari
    

    View Slide

45. Debug iOS WebView
    

    View Slide

46. iOS WebKit Debug Proxy
    bit.ly/webkitdebug
    

    View Slide

47. Debug WebView/PhoneGap
    on Android
    

    View Slide

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

    View Slide

49. jshyDebugger Live Editing
    

    View Slide

50. jshyDebugger Timeline
    

    View Slide

51. jshyDebugger ADB plugin support
    

    View Slide

52. Debug directly on iOS
    

    View Slide

53. MIHTool
    bit.ly/mihtool
    

    View Slide

54. MIHTool
    

    View Slide

55. Remote JavaScript consoles
    

    View Slide

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

    View Slide

57. View Slide

58. Aardwolf
    Remote JavaScript debugger for Android / iOS / Windows Phone 7 / BlackBerry OS 6
    bit.ly/aardwolfapp
    

    View Slide

59. Simulate real-network
    conditions
    

    View Slide

60. charlesproxy.com
    

    View Slide

61. View Slide

62. Network Link Conditioner
    

    View Slide

63. slowyapp.com
    

    View Slide

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

    View Slide

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

    View Slide

66. Captures all traffic
    Playback recorded
    traffic sessions
    

    View Slide

67. Visual regression testing
    

    View Slide

68. Wraith
    bit.ly/wraithapp
    

    View Slide

69. View Slide

70. Huxley
    bit.ly/huxleyapp
    

    View Slide

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

    View Slide

72. Device Testing
    

    View Slide

73. It’s tough.
    

    View Slide

74. Get real devices.
    

    View Slide

75. Screenshots or live testing?
    

    View Slide

76. BrowserStack + local tunneling
    

    View Slide

77. View Slide

78. grunt-browserstack
    Useful BrowserStack task for Grunt
    launchpad
    You can launch browsers! From NodeJS! Local ones!
    Remote ones! Browserstack ones!
    

    View Slide

79. Sauce Labs
    Screenshots & Recordings
    

    View Slide

80. View Slide

81. grunt-saucelabs
    Grunt task running tests using Sauce Labs.
    Supports Qunit and Jasmine tests
    node-saucelabs
    Node wrapper around BrowserStack API
    

    View Slide

82. Device Anywhere
    

    View Slide

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

    View Slide

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

    View Slide

85. Emulate Viewport
    Chrome DevTools Emulation
    

    View Slide

86. Emulate Touch Events
    Chrome DevTools Emulation
    

    View Slide

87. Emulate Orientation
    Chrome DevTools Emulation
    

    View Slide

88. Emulate User Agent
    Chrome DevTools Emulation
    

    View Slide

89. Emulate Geolocation
    Chrome DevTools Emulation
    

    View Slide

90. Build tooling
    

    View Slide

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

    View Slide

92. Grunt
    PageSpeed
    

    View Slide

93. View Slide

94. Yeoman + Mobile
    

    View Slide

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
    

    View Slide

96. View Slide

97. Performance Insights
    

    View Slide

98. Remote debugging + DevTools Timeline
    

    View Slide

99. Rendering Performance Tooling
    

    View Slide

100. PageSpeed Insights For Mobile
     

     View Slide

101. PageSpeed Insights
     bit.ly/pagespeedi
     

     View Slide

102. mod_pagespeed
     bit.ly/modpagespeed
     

     View Slide

103. bit.ly/mobitest
     Returns total page load times, individual request headers and timings from WebPageTest
     using default browsers in iOS/Android/BB
     MobiTest
     

     View Slide

104. View Slide

105. Phantomas Metrics Collector
     

     View Slide

106. Is that really the logo?
     

     View Slide

107. View Slide

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

     View Slide

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

     View Slide

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

     View Slide

111. Generate Device Art
     

     View Slide

112. Android Device
     Art Generator
     

     View Slide

113. bit.ly/deviceart
     

     View Slide

114. Pro-tip: Grab a screenshot from
     Android
     adb shell screencap -p | perl -pe 's/\x0D\x0A/\x0A/g' > screen.png
     Using ADB:
     

     View Slide

115. placeit.net
     

     View Slide

116. View Slide

117. mockuphone.com
     

     View Slide

118. View Slide

119. Lots of tooling options available.
     

     View Slide

120. Use tools. not rules.
     

     View Slide

121. @addyosmani
     +AddyOsmani
     Thanks!
     

     View Slide

122. Next up..
     

     View Slide

123. View Slide

124. View Slide