slides at goo.gl/kifue

Transcription

1 chrome slides at goo.gl/kifue 1/29

2 The Mobile Web Developer's Tool Belt Pete LePage Developer Advocate, Google 2/29

3 Tooling In The Web Dev Lifecycle Development Environments Authoring Abstractions Frameworks & Libraries Testing & Iteration Flow Performance Tuning Build Optimization Deployment Check out Paul Irish's presentation on Tooling and the Web App Development Stack 3/29 3/29

4 Development Environment Code, Compile, Build, & Reload 4/29

5 Sublime Text 2 5/29 5/29

6 CodeKit It's like steriods for web developers Compiles nearly everything Live browser reloads Combines and minifies Optimizes images JSHint and JSLint Team collaboration Easy frameworks For more information, see incident57.com/codekit/ 6/29 6/29

7 Development Tools 7/29

8 A More Lickable Web Don't let mobile, enterprise or web be an excuse for ugly, beauty sells! Inspiration Human Interface Guidelines* pttrns.com Android's Human Interface Guidelines ios Human Interface Guidelines Developing Web Content for Safari User Experience Guidelines for Windows Phone * Use caution: following only one will look weird on another. 8/29 8/29

9 Boiler Plates jquery Mobile Bootstrap 9/29 9/29

10 Helpful Libraries: FT Fast Click Problem: 300ms delay between a tap and the click event firing on mobile browsers. Solution: Track TouchStartevents and fire a click event as soon as it receives a TouchEndevent. window.addeventlistener('load',function(){ newfastclick(document.body); },false); JAVASCRIPT github.com/ftlabs/fastclick 10/29 10/29

11 Helpful Libraries: JSConsole Problem: No debug console on mobile devices without using a remote debugger. Solution: Send console.logevents to a separate server that you connect to from your desktop. 1. Open on the desktop computer and type :listen 2. Paste output into the source for your mobile app 3.???? 4. Profit. Okay, not quite yet. jsconsole.com/ 11/29 11/29

12 Helpful Libraries: HammerJS Problem: Makes handling multi-touch gestures hella easy! Solution: A 2k library that handles tap, double tap, swipe, hold, transform and drag. var hammer = new Hammer(document.getElementById("container")); JAVASCRIPT hammer.ondragstart = function(ev){}; hammer.ondrag = function(ev){}; hammer.ondragend = function(ev){}; hammer.onswipe = function(ev){}; eightmedia.github.com/hammer.js/ 12/29 12/29

13 Helpful Libraries: Lawn Chair Problem: IndexedDB, WebSQL or LocalStorage, which works best? Solution: Provides a simple API that abstracts away the implementation of each service. var people = lawnchair(); people.save({name:"pete", "[email protected]"}); JAVASCRIPT people.all(function(peeps){ peeps.foreach(function(person){ console.log(person); }); }); brian.io/lawnchair/ 13/29 13/29

14 High DPI Displays There isn't an easy answer yet, but there are options... #my-image{ background:(low.png);} MEDIA only screen and(min-device-pixel-ratio:1.5){ #my-image{ background:(high.png);} } // Only works in Safari& Chrome today. background-image: url(icon1x.jpg); background-image:-webkit-image-set( url(icon1x.jpg) 1x, url(icon2x.jpg) 2x ); IMAGE SET //Not yet implmented by any browser:( SOURCE SET <img alt="my awesome image"src="banner.jpeg" srcset="banner-hd.jpeg 2x,banner-phone.jpeg 640w,banner-phone-HD.jpeg 640w 2x" 14/29 14/29

15 High DPI Displays Best Practices Using image replacement is generally frowned upon Use vector images or CSS styles wherever possible Heavily compressed 2x images often look better than enlarged 1x images Use icon fonts like Font Awesome For more information, see goo.gl/wjalt 15/29 15/29

16 Other Helpful Tips & Stuff To Know Fingers!= mouse pointer Avoid: tables, relative positioning, absolute positioning, floats Headers and Footers? Use position: fixed; Scroll inside elements? Use overflow: scroll; Inertial scrolling? Use -webkit-overflow-scrolling: touch;(ios 5+) 16/29 16/29

17 Testing 17/29

18 Faking It: Network Link Conditioner Testing locally doesn't simulate real world mobile networks, but there are tools you can use to simulate them. Charles Proxy [Mac, PC, Linux] Network Link Conditioner [Mac] 18/29 18/29

19 Faking It: Chrome's Dev Tools Chrome's Dev Tools allows you to over-ride some settings or force certain behaviours like: User Agent Device Metrics Simulate Touch Events Coming Soon: Geo Location Coming Soon: Device Orientation Coming Eventually: Device Pixel Ratio 19/29 19/29

20 Faking it: Emulators Emulators are a great place to start, but don't give you a complete picture. Android ios and without running XCode Browser Stack 20/29 20/29

21 Real Thing: Chrome Remote Debugger One Time Setup 1. Install the Android SDK 2. On the mobile device, enable USB debugging at the OS level 3. On the mobile device, launch Chrome. Open Settings > Advanced > Developer toolsand check the Enable USB Web debuggingcheckbox. Debugging 1. Connect the mobile device to computer via USB 2. On the desktop, run adb forward tcp:9222 localabstract:chrome_devtools_remote 3. Open the desktop, open Chrome and navigate to localhost:9222 See goo.gl/k2qhj for more information. 21/29 21/29

22 Real Thing: Safari Remote Debugger One Time Setup 1. On the mobile device, enable the Web Inspector under Settings > Safari > Advanced 2. On the desktop, open Safari and open the preference pane, under Advanced, check the Show Develop menuin the menu bar checkbox Debugging 1. Connect the mobile device to your computer 2. On the desktop, click the Developmenu bar item, and choose the device you want to debug See goo.gl/tlmww for more information. 22/29 22/29

23 Real Thing: Firefox Remote Debugger One Time Setup 1. On the desktop, navigate to about:config, search for remote-enenable it, then restart Firefox. 2. On the mobile device, navigate to about:config, search for debugger, toggle devtools.debugger.force-localto false and devtools.debugger.remote-enabledto true, then restart Firefox. Debugging 1. On the mobile device, find the IP address 2. On the desktop, click the Toolsmenu bar item, and choose Web Developer > Remote Debuggerand enter the remote IP address plus port See goo.gl/pqe4z for more information. 23/29 23/29

24 Real Thing: Open Device Labs source: Viljami Salminen goo.gl/1yu7c 24/29 24/29

25 A Few Favors to Ask! 25/29

26 What: Should we create a separate mobile site or create a responsive experience instead? Join Brad Frost as he takes apart the Obama and Romney campaign webites. When: November 14th, 10:30am ET Where: goo.gl/r01l6 26/29 26/29

27 We Want Need Your Help! Don't accept the status quo File any Chrome bugs you find at new.mcrbug.com Build a mobile web experiment and submit it at m.chromeexperiments.com to show off your skills! Start an open device lab in your area The mobile web is what you make of it. 27/29 27/29

28 <Thank You!> Questions? Pete LePage g+ petelepage.com/plus/ slides goo.gl/kifue 28/29

29 chrome 29/29