Over-promised & under-delivered

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

Transcript

1. Peter Gasston @stopsatgreen broken-links.com
2. Technologist & Front-end Lead rehabstudio.com
3. Over-promised & Under-delivered
7. You Ruined My Holiday
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/
16. MOBILE WEB
23. http://brokenmobile.tumblr.com http://wtfmobileweb.com
25. We Have A Problem
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
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>
43. https://developer.android.com/design/ https://developer.apple.com/library/ios/design/ http://dev.windowsphone.com/design
46. Doing It Right
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