Better By Proxy at Mobilism, 2015

Better By Proxy at Mobilism, 2015

Proxy browsers get a bad rep. “They’re antiques.” “They behave in weird ways.” “They’re crappy browsers.” But a deeper understanding of what they accomplish, and what they do behind the scenes, reveals that they’re actually quite ingenious. And far from becoming outdated, they’re uniquely positioned to bring the web to the next wave of people and devices around the world.

We’ll look some of the more popular proxy browsers today, what they do, how to ensure your site works well on them, and why that’s so important.

Presented at Mobilism 2015 in Amsterdam, NL on March 27, 2015.

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

March 27, 2015
Tweet

Transcript

  1. 2.
  2. 3.
  3. 4.
  4. 7.
  5. 8.
  6. 9.
  7. 10.
  8. 11.

  9. 13.
  10. 14.

    0 3500 7000 10500 14000 Pakistan Iran India Azerbaijan Armenia

    Belarus China Bosnia Kazakhstan Georgia Macedonia Denmark US Netherlands
  11. 15.

    0 3500 7000 10500 14000 Pakistan Iran India Azerbaijan Armenia

    Belarus China Bosnia Kazakhstan Georgia Macedonia Denmark US Netherlands 10x
  12. 16.
  13. 22.
  14. 23.
  15. 24.
  16. 25.
  17. 26.
  18. 33.
  19. 35.
  20. 36.
  21. 37.
  22. 38.
  23. 39.
  24. 40.
  25. 41.
  26. 42.
  27. 43.
  28. 49.
  29. 50.
  30. 51.
  31. 52.
  32. 53.
  33. 54.
  34. 55.
  35. 56.
  36. 57.
  37. 59.
  38. 60.

    23%

  39. 61.
  40. 62.
  41. 63.
  42. 66.
  43. 67.
  44. 68.
  45. 69.
  46. 70.
  47. 78.
  48. 82.

    Potential Issue #3:
 Image transcoding or compression may result
 in

    blurry images Solution:
 Use Cache-Control: no-transform
  49. 83.
  50. 86.
  51. 88.
  52. 89.
  53. 90.
  54. 91.
  55. 92.
  56. 93.
  57. 95.
  58. 96.
  59. 97.
  60. 98.
  61. 99.
  62. 102.
  63. 103.

    contextmenu dblclick error keydown keypress keyup mousemove mouseenter mouseleave mouseout

    mousewheel resize scroll touchcancel touchend touchmove touchstart
  64. 106.
  65. 107.
  66. 108.
  67. 109.
  68. 110.

    Limit data consumed and limit impact on device while providing

    a nearly equal experience to a typical browser.
  69. 111.

    contextmenu dblclick error keydown keypress keyup mousemove mouseenter mouseleave mouseout

    mousewheel resize scroll touchcancel touchend touchmove touchstart
  70. 112.
  71. 115.
  72. 123.
  73. 124.

    if('querySelector' in document! !&& 'localStorage' in window! !&& 'addEventListener' in

    window) {! !! // bootstrap the javascript application! }!
  74. 125.

    if('querySelector' in document! !&& 'localStorage' in window! !&& 'addEventListener' in

    window) {! !! // bootstrap the javascript application! }! Sure, why not.
  75. 126.

    var hasStorage = (function() {! try {! localStorage.setItem(mod, mod);! localStorage.removeItem(mod);!

    return true;! } catch (exception) {! return false;! }! }());! if( 'querySelector' in document! !!! && hasStorage! !!! && 'addEventListener' in window ){! !! // bootstrap the javascript application! }!
  76. 131.
  77. 133.
  78. 134.
  79. 135.
  80. 137.
  81. 138.

    var hasStorage = (function() {! try {! localStorage.setItem(mod, mod);! localStorage.removeItem(mod);!

    return true;! } catch (exception) {! return false;! }! }());! if( 'querySelector' in document! !!! && hasStorage! !!! && 'addEventListener' in window ){! !! // bootstrap the javascript application! }!
  82. 142.
  83. 143.
  84. 144.
  85. 145.
  86. 150.
  87. 151.

    “The journey begins by letting go of control, and becoming

    flexible. John Allsopp Dao of Web Design