Reaching Everyone, Fast at From the Front, 2015

A9a379f2e92c7ded4564190c5b286b78?s=47 Tim Kadlec
September 17, 2015

Reaching Everyone, Fast at From the Front, 2015

Mobile subscriptions continue to increase at an incredible rate, with most of that growth coming from emerging economies such as Africa and Southeast Asia. These areas are dominated by slow, intermittent connectivity and low-end devices. If companies aren’t already taking steps to ensure they are able to reach these new audiences, they soon will be.

Presented at From the Front, in Bologna, IT on September 17th, 2015.

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

September 17, 2015
Tweet

Transcript

  1. 1.

    Reaching Everyone, Fast September 17, 2015 at From the Front

    Tim Kadlec
 @tkadlec tim@timkadlec.com
  2. 2.
  3. 5.
  4. 6.
  5. 7.
  6. 8.
  7. 11.
  8. 14.

    0 3000 6000 9000 12000 Iran Pakistan Belarus Azerbaijan Armenia

    Bosnia Macedonia Georgia Kazakhstan Serbia Ukraine Russia US Czech Republic
  9. 16.

    0 3000 6000 9000 12000 Iran Pakistan Belarus Azerbaijan Armenia

    Bosnia Macedonia Georgia Kazakhstan Serbia Ukraine Russia US Czech Republic
  10. 17.

    0 3000 6000 9000 12000 Iran Pakistan Belarus Azerbaijan Armenia

    Bosnia Macedonia Georgia Kazakhstan Serbia Ukraine Russia US Czech Republic 9.4x
  11. 18.
  12. 19.
  13. 22.
  14. 24.

    But we were the exception, not the rule. “That was

    a pretty harsh experience for us. We’d been building an app for users like us. But we were the exception, not the rule Ragavan Srinivasan Facebook’s Android project manager
  15. 27.
  16. 29.
  17. 30.
  18. 31.
  19. 32.
  20. 36.
  21. 37.
  22. 38.
  23. 39.
  24. 40.
  25. 41.
  26. 42.
  27. 44.
  28. 45.
  29. 46.
  30. 49.
  31. 50.
  32. 51.
  33. 52.
  34. 53.
  35. 55.
  36. 58.

    imagemin: { png: { options: { optimizationLevel: 7 }, files:

    [ { expand: true, cwd: 'source/images/', src: ['**/*.png'], dest: 'source/images/', ext: '.png' } ] }, jpg: { options: { progressive: true }, files: [ { expand: true, cwd: 'source/images/', src: ['**/*.jpg'], dest: 'source/images/', ext: '.jpg' } ] }
  37. 59.

    options: { progressive: true }, imagemin: { png: { options:

    { optimizationLevel: 7 }, files: [ { expand: true, cwd: 'source/images/', src: ['**/*.png'], dest: 'source/images/', ext: '.png' } ] }, jpg: { options: { progressive: true }, files: [ { expand: true, cwd: 'source/images/', src: ['**/*.jpg'], dest: 'source/images/', ext: '.jpg' } ] }
  38. 63.

    penthouse: { home : { outfile : 'public/css/critical-home.css', css :

    'public/css/style.css', url : ‘http://rfe.dev/public/patterns/04- pages-00-homepage/ 04-pages-00-homepage.html?pl=false', width : 1300, height : 900 }, article : { outfile : 'public/css/critical-article.css', css : 'public/css/style.css', url : ‘http://rfe.dev/public/patterns/04- pages-02-article/04- pages-02-article.html?pl=false', width : 1300, height : 900 }, . . . },
  39. 66.

    Original SVG: 10,379 bytes 1 Decimal Place: 7,990 bytes Total

    savings: 9,062 bytes (87%) Merged Paths: 5,813 bytes SVGO: 4,705 bytes GZip: 1,317 bytes
  40. 67.

    svgmin: { options: { plugins: [ { cleanupNumericValues: { floatPrecision:

    1 } } ] }, dist: { files: [ { expand: true, cwd: 'source/images/', src: ['**/*.svg'], dest: 'source/images/' } ] } }
  41. 68.

    plugins: [ { cleanupNumericValues: { floatPrecision: 1 } } ]

    svgmin: { options: { plugins: [ { cleanupNumericValues: { floatPrecision: 1 } } ] }, dist: { files: [ { expand: true, cwd: 'source/images/', src: ['**/*.svg'], dest: 'source/images/' } ] } }
  42. 70.

    <svg class="svgmap"> <symbol viewBox="0 0 16 17" id="shape- add-to-list"> <title>add-to-list</title>

    <path class=“add-to-list" d="M0 0h12v3H0zm12 7V5H0v3h10V7zm-5 6v-2h3v-1H0v3zm6-1V9h-2v3H8v2h3v3h2v-3h3v-2 z"/> </symbol> .... </svg>
  43. 73.
  44. 74.

    svgstore: { options: { prefix: 'shape-', // this prefixes each

    symbol ID svg: { 'class': 'svgmap' } }, default: { files: { 'public/svg-icons.svg': ['source/images/ svg-icons/*.svg'], } } },
  45. 78.
  46. 79.
  47. 81.
  48. 82.

    <script> var rfe = {}; if ('querySelector' in document &&

    'localStorage' in window && 'addEventListener' in window) { } else {false}; </script> document.documentElement.className += ' mustard’;
  49. 83.

    rfe.cutsMustard = true; document.documentElement.className += ' mustard’; <script> var rfe

    = {}; if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) } else {false}; </script>
  50. 84.

    loadCSS('../../css/fonts.css?1410230753'); loadJS('../../js/main.js?1410230753'); <script> var rfe = {}; if ('querySelector' in

    document && 'localStorage' in window && 'addEventListener' in window) document.documentElement.className += ' mustard’; } else {false}; </script>
  51. 85.
  52. 89.

    http://bit.ly/1slPLVt Site Dynamic Range Smallest Size (KB) Largest Size (KB)

    google.com 40 8 305 facebook.com 34 7 241 youtube.com 21 24 517 yahoo.com 13 34 444 baidu.com 9 8 68 wikipedia.org 1 100 100 live.com 55 5 271 qq.com 5 478 2,271 amazon.com 154 14 2,131 taobao.com 37 40 1,474
  53. 90.

    http://bit.ly/1slPLVt Site Dynamic Range Smallest Size (KB) Largest Size (KB)

    google.com 40 8 305 facebook.com 34 7 241 youtube.com 21 24 517 yahoo.com 13 34 444 baidu.com 9 8 68 wikipedia.org 1 100 100 live.com 55 5 271 qq.com 5 478 2,271 amazon.com 154 14 2,131 taobao.com 37 40 1,474 27.5x
  54. 93.

  55. 94.

    95%

  56. 95.

    We believe that Africa’s internet evolution story will be no

    different from the rest of the world. We listen to music. We watch movies. We play games online. “ https:/ /angani.co/blog/its-not-how-much-fibre-you-have-its-what-you-do-with-it/
  57. 101.

    thank you September 17, 2015 at From the Front Tim

    Kadlec
 @tkadlec tim@timkadlec.com