Mobile html5 today
•
3 likes•1,763 views
What are some of the important features we can use today on mobile web browsers? How HTML5 can help our users to be more productive? Some of the answers are in these slides.
Recommended
More Related Content
What's hot
What's hot (17)
Viewers also liked
Viewers also liked (20)
Similar to Mobile html5 today
Similar to Mobile html5 today (20)
More from Ido Green
More from Ido Green (20)
Recently uploaded
Recently uploaded (20)
Mobile html5 today
- 1. Mobile HTML5 Today! Ido Green Developer Advocate Google 2014
- 3. Who has a smartphone?
- 4. Who loves typing on a phone?
- 5. Who uses their phone as a desktop?
- 6. ● The screens are smaller ● Users are mobile ● Input. is. harder. ● Unique hardware capabilities ● Everything is slower Mobile is different
- 7. The screens are smaller. What can I do?
- 8. A LOT!
- 9. The critical element for mobile! Device width: <meta name="viewport" content="width=device-width" /> Initial scale: <meta name="viewport" content="initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> Video And Demo: goo.gl/j9KLT Viewport
- 10. Adaptive to screen size @media screen and (min-width: 800px) { ... } @media screen and (device-aspect-ratio: 16/9) { ... } @media screen and (resolution: 2dppx) { ... } ● Logically group your styling rules. ● Dynamically responsive. Media Queries
- 11. Mobile devices can usually be rotated @media screen and (orientation: portrait) {} @media screen and (orientation: landscape) {} Video And Demo: goo.gl/SgMEo Orientation
- 12. Sizing relatively to the viewport #visible-square { width: 20vmin; height: 20vmin; } ● Four new units: vw(idth), vh(eight), vmin and vmax. ● Relative to the size of the viewport (!) Value is 1% of width/height of the viewport 1vw = 1% of the viewport width 1vh = 1% of viewport height Video And Demo: goo.gl/J5tna Viewport units
- 13. Users Are Mobile
- 14. Request the current position once var success = function(position) { var lat = position.coords.latitude; var long = position.coords.longitude; }; navigator.geolocation.getCurrentPosition(success); Or keep track when they're on the move! var watchId = navigator.geolocation.watchPosition( function (position) { ... }); // Stop watching when you're done. clearWatch(watchId); Geolocation
- 15. Events when the device's orientation changes window.onorientationchange = function(event) { var yaw = event.alpha; var pitch = event.beta; var roll = event.gamma; // You could make a compass! } Video And Demo: goo.gl/zNvp3 Device Orientation
- 16. Determine the network state window.navigator.onLine window.addEventListener("online", function() { console.log("Visitor *might* be online."); }); window.addEventListener("offline", function() { console.log("Visitor is definitely offline."); }); ● Very hard to know for sure whether the visitor is online. ● Check my demo: picturesque-app.appspot.com Video And Demo: goo.gl/Bgmcp Offline Events
- 17. <html manifest="website.manifest"> CACHE MANIFEST #version 1.2013.5.16 css/bootstrap.min.css #Images img/logo.png ● Will also be used when the user is online. ● Allows you to define fallback pages. ● Don't cache the manifest! Video And Demo: goo.gl/3fO2I Application Cache
- 18. Use abstractions: ● Lawn Chair - brian.io/lawnchair/ ● asyncStorage - https://github.com/WebReflection/db ● IndexedDBShim - nparashuram.com/IndexedDBShim/ Storage APIs
- 19. Input. Is. Harder! What can I do?
- 20. Specialized on-screen keyboards <input type="email" /> <input type="search" /> <input type="url" /> <input type="tel" /> <input type="number" /> <input type="date" /> <input type="week" /> <input type="month" /> <input type="datetime-local" /> Video And Demo: goo.gl/CNMp6 Semantic input types
- 21. Touch Events Handle the visitor's touches [element].ontouchstart = function(ev){}; [element].ontouchmove = function(ev){}; [element].ontouchend = function(ev){}; (!) Warning: 300 millisecond click delay → Use FastClick Docs: goo.gl/8ybb5 Video And Demo: goo.gl/ZwOzk
- 23. Camera - Media Capture Take photos <input type="file" capture accepts="image/*" id=" cam"> var cam = document.getElementById("cam"); cam.onchange = function(event) { // An image has been captured. if(event.target.files.length == 1 && event.target.files[0].type.indexOf("image/") == 0) { // We have an image - Let’s go wild... } } Video And Demo: picturesque-app.appspot.com
- 24. getUserMedia Inline camera and mic access navigator.getUserMedia({audio:true, video: true}, function(stream) { // An image has been captured. video.src = URL.createObjectURL(stream); video.play(); }); Demo: ido-green.appspot.com/getUserMedia-hello-world.html and a short Video.
- 25. Android Intents Interacting with native apps intent: HOST/URI-path // Optional host #Intent; package=[string]; action=[ string]; category=[ string]; component=[ string]; scheme=[ string]; end; <a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;end" > Take a QR code </a> More information:developers.google.com/chrome/mobile/docs/intents Video And Demo: goo.gl/Kpk0C
- 26. Well... What can I do?
- 27. What We Can Do Today? ● Adapt to screen sizes ● Accommodate users on the move ● Speed up input ● Integrate with device features ● Measure performance across all devices ● Look forward to WebRTC, Web Audio and WebGL
- 28. Q & A Thank you! plus.google.com/greenido greenido.wordpress.com