Over-promised & under-delivered

Over-promised & under-delivered

A.K.A. You Ruined My Holiday. Given at Front End London, April 2014.

9d9f17e37b751b9f83081ba3dd44bab4?s=128

Peter Gasston

April 24, 2014
Tweet

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