Over-promised & under-delivered

Transcript

1. Peter Gasston @stopsatgreen broken-links.com

2. Technologist & Front-end Lead rehabstudio.com

3. Over-promised & Under-delivered

4. None
5. None
6. None

7. You Ruined My Holiday

8. None
9. None
10. None

11. http://brandperfect.org/index.php/knowledge/reports/597-fortune-global-100-mobile-web-review

12. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

13. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

14. None
15. None

16. MOBILE WEB

17. None
18. None
19. None
20. None
21. None
22. None

23. http://brokenmobile.tumblr.com http://wtfmobileweb.com

24. None

25. We Have A Problem

26. None
27. None
28. None

29. http://www.slideshare.net/yiibu/the-emerging-global-web

30. We Need To Pull Our Fingers Out

31. What We Can Do 1. Performance

32. “Over a mobile connection, it may take 2 seconds to

    download the initial page of HTML, but it can be immediately rendered.

33. “Even as the rest of the JavaScript application is being

    downloaded, the user can interact with the page. It feels 5x faster.” http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product

34. “By rendering our page content on the server and deferring

    all JavaScript execution… we’ve dropped the time to first Tweet to one-fifth of what it was.” https://blog.twitter.com/2012/improving-performance-on-twittercom

35. var foo = window.matchMedia('(min-width: 800px)').matches; if (foo) { // Load

    functions } yepnope({ test : foo, yep : 'bigscreen.js', nope : 'smallscreen.js' });

36. I don’t care about: 1. ‘Retina’ photos 2. Typefaces

37. What We Can Do 2. Experience

38. None
39. None

40. <meta name="viewport" content="width=device-width, minimal-ui"> <meta name="viewport" content="width=device-width, user-scalable=no"> ✓ ✗

41. <input type="number"> <input type="datetime"> <input type="number" id="foo"> <label for="foo">Number</label>

42. None

43. https://developer.android.com/design/ https://developer.apple.com/library/ios/design/ http://dev.windowsphone.com/design

44. None
45. None

46. Doing It Right

47. None
48. None
49. None

50. Help Is On Its Way

51. <picture> <source media="(min-width: 45em)" srcset="large-1.jpg, large-2.jpg 2x"> <source media="(min-width: 18em)"

    srcset="med-1.jpg, med-2.jpg 2x"> <source srcset="small-1.jpg, small-2.jpg 2x"> <img src="small-1.jpg" alt="Alt text”> </picture> http://picture.responsiveimages.org/

52. Preserve my battery life Don’t wreck my data plan https://plus.google.com/+NazmulIdris/posts/SYwhyUkHnfz

53. http://offlinefirst.org/

54. navigator.serviceWorker.register('/foo.js').then( function(serviceWorker) { serviceWorker.postMessage('Hello world!'); } }); this.addEventListener('install', function(e) {

    // Do your thing }); https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md

55. I’m not telling you what to think. I’m just asking

    you to think.

56. Peter Gasston @stopsatgreen broken-links.com