11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
1/29localhost:8000/Presentations/MobileToolBelt/#26
chrome
slides at goo.gl/kIfUe
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
2/29localhost:8000/Presentations/MobileToolBelt/#26
The Mobile Web Developer's Tool BeltPete LePageDeveloper Advocate, Google
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
3/29localhost:8000/Presentations/MobileToolBelt/#26
Tooling In The Web Dev Lifecycle
Check out Paul Irish's presentation on Tooling and the Web AppDevelopment Stack
Development EnvironmentsAuthoring AbstractionsFrameworks & LibrariesTesting & Iteration FlowPerformance TuningBuild OptimizationDeployment
·······
3/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
4/29localhost:8000/Presentations/MobileToolBelt/#26
Development EnvironmentCode, Compile, Build, & Reload
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
5/29localhost:8000/Presentations/MobileToolBelt/#26
Sublime Text 2
5/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
6/29localhost:8000/Presentations/MobileToolBelt/#26
CodeKitIt's like steriods for web developers
For more information, see incident57.com/codekit/
Compiles nearly everythingLive browser reloadsCombines and minifiesOptimizes imagesJSHint and JSLintTeam collaborationEasy frameworks
·······
6/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
7/29localhost:8000/Presentations/MobileToolBelt/#26
Development Tools
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
8/29localhost:8000/Presentations/MobileToolBelt/#26
A More Lickable WebDon't let mobile, enterprise or web be an excuse for ugly, beautysells!
Inspiration
Human Interface Guidelines*
* Use caution: following only one will look weird on another.
www.mobile-patterns.compttrns.com
··
Android's Human Interface GuidelinesiOS Human Interface GuidelinesDeveloping Web Content for SafariUser Experience Guidelines for Windows Phone
····
8/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
9/29localhost:8000/Presentations/MobileToolBelt/#26
Boiler Plates
jQuery Mobile Bootstrap
9/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
10/29localhost:8000/Presentations/MobileToolBelt/#26
Helpful Libraries: FT Fast ClickProblem: 300ms delay between a tap and the click event firing onmobile browsers.
Solution: Track TouchStart events and fire a click event as soonas it receives a TouchEnd event.
github.com/ftlabs/fastclick
window.addEventListener('load', function() { new FastClick(document.body);}, false);
JAVASCRIPT
10/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
11/29localhost:8000/Presentations/MobileToolBelt/#26
Helpful Libraries: JSConsoleProblem: No debug console on mobile devices without using aremote debugger.
Solution: Send console.log events to a separate server that youconnect to from your desktop.
1. Open http://jsconsole.com/ on the desktop computer andtype :listen
2. Paste output into the source for your mobile app3. ????4. Profit. Okay, not quite yet.
jsconsole.com/
11/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
12/29localhost:8000/Presentations/MobileToolBelt/#26
Helpful Libraries: HammerJSProblem: Makes handling multi-touch gestures hella easy!
Solution: A 2k library that handles tap, double tap, swipe, hold,transform and drag.
eightmedia.github.com/hammer.js/
var hammer = new Hammer(document.getElementById("container"));hammer.ondragstart = function(ev) { };hammer.ondrag = function(ev) { };hammer.ondragend = function(ev) { };hammer.onswipe = function(ev) { };
JAVASCRIPT
12/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
13/29localhost:8000/Presentations/MobileToolBelt/#26
Helpful Libraries: Lawn ChairProblem: IndexedDB, WebSQL or LocalStorage, which works best?
Solution: Provides a simple API that abstracts away theimplementation of each service.
brian.io/lawnchair/
var people = lawnchair();people.save({name:"Pete", email:"[email protected]"});
people.all(function(peeps) { peeps.forEach(function(person) { console.log(person); });});
JAVASCRIPT
13/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
14/29localhost:8000/Presentations/MobileToolBelt/#26
High DPI DisplaysThere 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); }}
MEDIA QUERIES
// 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 :(<img alt="my awesome image" src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x"
SOURCE SET
14/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
15/29localhost:8000/Presentations/MobileToolBelt/#26
High DPI DisplaysBest Practices
For more information, see goo.gl/wjaLT
Using image replacement is generally frowned uponUse vector images or CSS styles wherever possibleHeavily compressed 2x images often look better than enlarged1x imagesUse icon fonts like Font Awesome
···
·
15/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
16/29localhost:8000/Presentations/MobileToolBelt/#26
Other Helpful Tips & Stuff To KnowFingers != mouse pointerAvoid: tables, relative positioning, absolute positioning, floatsHeaders and Footers? Use position: fixed;Scroll inside elements? Use overflow: scroll;Inertial scrolling? Use -webkit-overflow-scrolling:touch; (iOS 5+)
·····
16/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
17/29localhost:8000/Presentations/MobileToolBelt/#26
Testing
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
18/29localhost:8000/Presentations/MobileToolBelt/#26
Faking It: Network Link ConditionerTesting locally doesn't simulate real world mobile networks, butthere are tools you can use to simulate them.
Charles Proxy [Mac, PC, Linux]Network Link Conditioner [Mac]
··
18/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
19/29localhost:8000/Presentations/MobileToolBelt/#26
Faking It: Chrome's Dev ToolsChrome's Dev Tools allows you to over-ride some settings orforce certain behaviours like:
User AgentDevice MetricsSimulate Touch EventsComing Soon: Geo LocationComing Soon: Device OrientationComing Eventually: Device Pixel Ratio
······
19/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
20/29localhost:8000/Presentations/MobileToolBelt/#26
Faking it: EmulatorsEmulators are a great place to start, but don't give you a completepicture.
AndroidiOS and without running XCodeBrowser Stack
···
20/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
21/29localhost:8000/Presentations/MobileToolBelt/#26
Real Thing: Chrome Remote Debugger
One Time Setup1. Install the Android SDK2. On the mobile device, enable USB debugging at the OS level3. On the mobile device, launch Chrome. Open Settings >Advanced > Developer tools and check the Enable USBWeb debugging checkbox.
Debugging1. Connect the mobile device to computer via USB2. On the desktop, run adb forward tcp:9222localabstract:chrome_devtools_remote
3. Open the desktop, open Chrome and navigate tolocalhost:9222
See goo.gl/K2Qhj for more information.
21/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
22/29localhost:8000/Presentations/MobileToolBelt/#26
Real Thing: Safari Remote Debugger
One Time Setup1. On the mobile device, enable the Web Inspector underSettings > Safari > Advanced
2. On the desktop, open Safari and open the preference pane,under Advanced, check the Show Develop menu in the menubar checkbox
Debugging1. Connect the mobile device to your computer2. On the desktop, click the Develop menu bar item, and choose
the device you want to debug
See goo.gl/TLmWW for more information.
22/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
23/29localhost:8000/Presentations/MobileToolBelt/#26
Real Thing: Firefox Remote Debugger
One Time Setup1. On the desktop, navigate to about:config, search forremote-en enable it, then restart Firefox.
2. On the mobile device, navigate to about:config, search fordebugger, toggle devtools.debugger.force-local to falseand devtools.debugger.remote-enabled to true, thenrestart Firefox.
Debugging1. On the mobile device, find the IP address2. On the desktop, click the Tools menu bar item, and chooseWeb Developer > Remote Debugger and enter the remoteIP address plus port 6000.
See goo.gl/pQe4z for more information.
23/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
24/29localhost:8000/Presentations/MobileToolBelt/#26
Real Thing: Open Device Labs
source: Viljami Salminen goo.gl/1yu7c
24/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
25/29localhost:8000/Presentations/MobileToolBelt/#26
A Few Favors to Ask!
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
26/29localhost:8000/Presentations/MobileToolBelt/#26
What: Should we create a separate mobile site or create aresponsive experience instead?
Join Brad Frost as he takes apart the Obama and Romneycampaign webites.
When: November 14th, 10:30am ET
Where: goo.gl/r01L6
26/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
27/29localhost:8000/Presentations/MobileToolBelt/#26
We Want Need Your Help!Don't accept the status quo
File any Chrome bugs you find at new.mcrbug.comBuild a mobile web experiment and submit it atm.chromeexperiments.com to show off your skills!Start an open device lab in your areaThe mobile web is what you make of it.
··
··
27/29
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
28/29localhost:8000/Presentations/MobileToolBelt/#26
<Thank You!>Questions?
Pete LePageg+ petelepage.com/plus/twitter @peteleslides goo.gl/kIfUe
11/7/12 The Mobile Web Developer's Tool Belt ‑ Google IO 2012
29/29localhost:8000/Presentations/MobileToolBelt/#26
chrome
Top Related