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.

Transcript

1. Better by Proxy March 27, 2015 at Mobilism Tim Kadlec | @tkadlec
5. “Opera Mini is a s&%##* browser…
6. “Proxy browers are s&%##* browsers…
11. “
12. https://flic.kr/p/8TzcGG
13. • No 3G • No Wi-Fi • Non-touch • 240 x 320 • 64MB internal
14. 0 3500 7000 10500 14000 Pakistan Iran India Azerbaijan Armenia Belarus China Bosnia Kazakhstan Georgia Macedonia Denmark US Netherlands
15. 0 3500 7000 10500 14000 Pakistan Iran India Azerbaijan Armenia Belarus China Bosnia Kazakhstan Georgia Macedonia Denmark US Netherlands 10x
17. 0.1% 16.0% 3G Penetration Fixed Broadband
18. Iran 3G connections are “…against human and moral standards.” http://bit.ly/1pKV0gH
19. speed as a weapon
20. Our internet is not their internet.
21. http://flic.kr/p/cfoupQ
23. 2008kb
24. 2008kb
27. 100 million daily active users
28. 42.2% market share in India
29. 34.6% market share in China
30. 258 million active users in January
31. 168 billion pages transcoded
32. Top 5 tablet browser in 40 countries
34. Conservative Aggressive
44. Network-constrained
45. Bandwidth
 Latency Cost of Data
46. Device- constrained
47. Memory CPU
48. Conservative Aggressive
58. High Bandwidth/Low Latency
60. 23%
63. gzip ! !
64. gzip minification !
65. gzip minification image compression image transcoding
71. [REMOTE_ADDR] => 90.145.158.4
72. [REMOTE_ADDR] => 66.249.81.203
73. [HTTP_X_FORWARDED_FOR] => 90.145.158.4
74. [HTTP_X_CONTENT_OPT] => Turbo/4.35.8109
75. [HTTP_VIA] => 1.1 Chrome-Compression-Proxy
76. [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(720089404747345);
77. Potential Issue #1:
 Minification removes comments in JS/CSS
78. Potential Issue #1:
 Minification removes comments in JS/CSS Solution:
 Don’t rely on comments
 Use Cache-Control: no-transform
79. Potential Issue #2:
 Images may be removed from page
80. Solution:
 Ensure all images have text fallbacks Potential Issue #2:
 Images may be removed from page
81. Potential Issue #3:
 Image transcoding or compression may result
 in blurry images
82. Potential Issue #3:
 Image transcoding or compression may result
 in blurry images Solution:
 Use Cache-Control: no-transform
84. Data Savings Up to 50% Up to 50% Up to 60%
85. Conservative Aggressive
87. Remote browsing
94. var myButton = document.getElementById('#mybutton');! ! button.addEventListener('click', function(){ ! !//something! });!
100. Everything requires user interaction. ! Everything requires a server round-trip.
101. Limit data consumed and limit impact on device.
103. contextmenu dblclick error keydown keypress keyup mousemove mouseenter mouseleave mouseout mousewheel resize scroll touchcancel touchend touchmove touchstart
104. setTimeout ~= 5s setInterval ~= 5s xmlHTTPRequest ~= 5s
105. setTimeout executed immediately setInterval executed once immediately xmlHTTPRequest ~= 3s-4s
109. DIFF
110. Limit data consumed and limit impact on device while providing a nearly equal experience to a typical browser.
111. contextmenu dblclick error keydown keypress keyup mousemove mouseenter mouseleave mouseout mousewheel resize scroll touchcancel touchend touchmove touchstart
113. Rendering Engine Presto Blink (Chrome 30) U2 kernel (based on WebKit) Gecko
114. border-image border-radius gradients transitions animations @keyframes font-face javascript only API’s (ex: localStorage)
116. no icon fonts
117. supportSVG = true
118. supportSVG = true no onerror
119. 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!
120. 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!
121. document.write(navigator.userAgent);
122. Mozilla/50 (X11; U; Linux i686; zh-CN; rv: 1.2.3.4) Gecko/ document.write(navigator.userAgent);
124. if('querySelector' in document! !&& 'localStorage' in window! !&& 'addEventListener' in window) {! !! // bootstrap the javascript application! }!
125. if('querySelector' in document! !&& 'localStorage' in window! !&& 'addEventListener' in window) {! !! // bootstrap the javascript application! }! Sure, why not.
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! }!
127. Display modes
128. Puffin request desktop
129. Puffin request desktop
130. Single column view
132. <link rel="stylesheet" media="screen, handheld" href="stylesheets/screen.css">! ! ! <link rel="stylesheet" media="handheld" href="stylesheets/handheld.css">
136. [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(720089404747345);
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! }!
139. 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!
140. [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(720089404747345);
141. Data Savings Up to 90% Up to 85% Up to 90% Up to 50%
146. Progressive enhancement ! ! !
147. Progressive enhancement Responsive design ! !
148. Progressive enhancement Responsive design No heavy JS frameworks !
149. Progressive enhancement Responsive design No heavy JS frameworks Cut the mustard
151. “The journey begins by letting go of control, and becoming flexible. John Allsopp Dao of Web Design
152. thank you March 27, 2015 at Mobilism ! Tim Kadlec
 @tkadlec tim@timkadlec.com