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
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 today.
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
20. Remote debugging with Weinre
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
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
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?
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 devices
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.
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
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
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
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
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
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
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
105. Phantomas Metrics Collector
106. Is that really the logo?
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
117. mockuphone.com
119. Lots of tooling options available.
120. Use tools. not rules.
121. @addyosmani +AddyOsmani Thanks!
122. Next up..