Better by Proxy at Smashing Conf NY

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 Smashing Conf, NY in New York, NY on June 16, 2015.

Transcript

1. BETTER BY PROXY Tim Kadlec | @tkadlec
6. “Opera Mini is a s&%##* browser…
7. “Proxy browsers are s&%##* browsers…
12. “
14. • No 3G • No Wi-Fi • Non-touch • 240 x 320 • 64MB internal
15. 0 3000 6000 9000 12000 Kenya Pakistan Iran India Azerbaijan Armenia China Belarus Kazakhstan Bosnia Georgia Macedonia US
16. 0 3000 6000 9000 12000 Kenya Pakistan Iran India Azerbaijan Armenia China Belarus Kazakhstan Bosnia Georgia Macedonia US 10x
19. 0.1% 16.0% 3G Penetration Fixed Broadband
20. Iran 3G connections are “…against human and moral standards.” http://bit.ly/1pKV0gH
21. speed as a weapon
22. Our internet is not their internet.
23. http://flic.kr/p/cfoupQ
25. “…as bandwidth grows, and as processing power grows, and as browsers get better we just keep filling everything up. Jeff Veen Path to Performance Podcast
26. 2099kb
27. 2099kb
30. 100 million daily active users
31. 42.2% market share in India
32. 34.6% market share in China
33. 258 million active users in January
34. 168 billion pages transcoded
35. Top 5 tablet browser in 40 countries
37. Conservative Aggressive
47. Network constrained
48. Bandwidth
 Latency Cost of Data
49. Device constrained
50. Memory CPU
51. Conservative Aggressive
58. High Bandwidth/Low Latency
62. 23%
63. gzip
64. gzip minification
65. gzip minification image compression image transcoding
72. [REMOTE_ADDR] => 90.145.158.4
73. [REMOTE_ADDR] => 66.249.81.203
74. [REMOTE_ADDR] => 66.249.81.203 [HTTP_X_FORWARDED_FOR] => 90.145.158.4
75. [HTTP_X_CONTENT_OPT] => Turbo/4.35.8109
76. [HTTP_VIA] => 1.1 Chrome-Compression-Proxy
77. [HTTP_X_UCBROWSER_UA] => dv(XT1095);pr(UCBrowser/10.3.0.552);ov(Android 5.0);ss(360*592);pi(1080*1776);bt(GJ);pm(1);bv( 1);nm(0);im(0);sr(0);nt(1);dn(8664342047-3f9902 87);ai(720089404747345);
78. POTENTIAL ISSUE #1:
 Minification removes comments in JS/CSS
79. SOLUTION:
 Don’t rely on comments
 Use Cache-Control: no-transform POTENTIAL ISSUE #1:
 Minification removes comments in JS/CSS
80. POTENTIAL ISSUE #2:
 Images may be removed from page
81. SOLUTION:
 Ensure all images have text fallbacks POTENTIAL ISSUE #2:
 Images may be removed from page
82. POTENTIAL ISSUE #3:
 Image transcoding or compression may result
 in blurry images
83. POTENTIAL ISSUE #3:
 Image transcoding or compression may result
 in blurry images SOLUTION:
 Use Cache-Control: no-transform
86. DATA SAVINGS Up to 50% Approximately 58% Up to 60%
87. Conservative Aggressive
89. REMOTE BROWSING
97. var myButton = document.getElementById('#mybutton'); button.addEventListener('click', function(){ //something });
103. Everything requires user interaction. Everything requires a server round-trip.
104. Limit data consumed and limit impact on device.
106. contextmenu dblclick error keydown keypress keyup mousemove mouseenter mouseleave mouseout mousewheel resize scroll touchcancel touchend touchmove touchstart
107. setTimeout ~= 5s setInterval ~= 5s xmlHTTPRequest ~= 5s
108. setTimeout executed immediately setInterval executed once immediately xmlHTTPRequest ~= 3s-4s
111. DIFF
112. Limit data consumed and limit impact on device while providing a nearly equal experience to a typical browser.
113. contextmenu dblclick error keydown keypress keyup mousemove mouseenter mouseleave mouseout mousewheel resize scroll touchcancel touchend touchmove touchstart
115. RENDERING ENGINE Presto Blink (Chrome 30) U2 kernel (based on WebKit) Gecko
116. border-image border-radius gradients transitions animations @keyframes font-face javascript only API’s (ex: localStorage)
118. no icon fonts
119. supportSVG = true
120. supportSVG = true no onerror
121. UCWEB/2.0 (MIDP-2.0; U; Adr 5.0; EN- US; XT1095) U2/1.0.0 UCBrowser/ 9.9.1.554 U2/1.0.0 Mobile
122. UCWEB/2.0 (MIDP-2.0; U; Adr 5.0; EN- US; XT1095) U2/1.0.0 UCBrowser/ 9.9.1.554 U2/1.0.0 Mobile
123. document.write(navigator.userAgent);
124. Mozilla/50 (X11; U; Linux i686; zh- CN; rv: 1.2.3.4) Gecko/ document.write(navigator.userAgent);
126. if('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { // bootstrap the javascript application }
127. if('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { // bootstrap the javascript application } Sure, why not.
128. 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 }
129. var hasStorage = (function() { try { localStorage.setItem("test", "mod" ); localStorage.removeItem("test"); return true; } catch (exception) { if (exception && exception.name=="QuotaExceededError" && localStorage.length == 0) { return true; } else { return false; } return false; } }()); if( 'querySelector' in document && hasStorage && 'addEventListener' in window ){ //cuts the mustard }
130. DISPLAY MODES
131. PUFFIN REQUEST DESKTOP
132. PUFFIN REQUEST DESKTOP
133. SINGLE COLUMN VIEW
135. <link rel="stylesheet" media="screen, handheld" href="stylesheets/screen.css"> <link rel="stylesheet" media="handheld" href="stylesheets/handheld.css">
139. [HTTP_X_UCBROWSER_UA] => dv(XT1095);pr(UCBrowser/10.3.0.552);ov(Android 5.0);ss(360*592);pi(1080*1776);bt(GJ);pm(1);bv( 1);nm(0);im(0);sr(0);nt(1);dn(8664342047-3f9902 87);ai(720089404747345);
141. var hasStorage = (function() { try { localStorage.setItem("test", "mod" ); localStorage.removeItem("test"); return true; } catch (exception) { if (exception && exception.name=="QuotaExceededError" && localStorage.length == 0) { return true; } else { return false; } return false; } }()); if( 'querySelector' in document && hasStorage && 'addEventListener' in window ){ //cuts the mustard }
142. UCWEB/2.0 (MIDP-2.0; U; Adr 5.0; EN- US; XT1095) U2/1.0.0 UCBrowser/ 9.9.1.554 U2/1.0.0 Mobile
143. [HTTP_X_UCBROWSER_UA] => dv(XT1095);pr(UCBrowser/ 10.3.0.552);ov(Android 5.0);ss(360*592);pi(1080*1776);bt(GJ) ;pm(1);bv(1);nm(0);im(0);sr(0);nt(1); dn(8664342047-3f990287);ai(7200894047 47345);
144. DATA SAVINGS Up to 90% Up to 85% Up to 90% Up to 50%
149. Progressive enhancement
150. Progressive enhancement Responsive design
151. Progressive enhancement Responsive design No heavy JS frameworks
152. Progressive enhancement Responsive design No heavy JS frameworks Cut the mustard
153. The journey begins by letting go of control, and becoming flexible. “ John Allsopp Dao of Web Design
155. THANK YOU Tim Kadlec | @tkadlec