Gaining Control in the Great Unknown - The state of mobile browsers and how to handle them

Every heard of the UC browser? Or Ninesky? ExSoul, anyone? Did you know that on Android 4.1 the stock browser is completely different between a Galaxy S3 and a HTC One S?

A web developer's journey leads more and more into the unknown. Instead of having a manageable set of browsers and a good knowledge of their quirks, we now can't prepare for every possible way how a user accesses the web. Features, implementation quality and (connection) speed often rely on guesses and not on facts. A hack might be a good thing on one platform, but results into completely broken experiences on another.

In this talk, Stefan Baumgartner will show how to gain control in the great unknown and how embracing long forgotten development strategies will help you.

Transcript

1. GAINING CONTROL IN THE GREAT UNKNOWN Drupalcamp - November 2013
2. Griass Enk
3. @ddprrt
4. Netural
6. Lafers grill recipes The need precise control I need to put meat on fire
7. Weber-Kit
8. Controlled Environments
9. Controllable Environments
11. Uncontrollable Environments
19. UC Browser
20. UC Browser 400 million users 32% market-share in China
21. ... to be honest ... only few of them come with their own engine
22. Under the top-most used browsers on iOS and Android
23. Fragmentation
28. iOS screen fragmentation
29. Android screen fragmentation
30. Holy fragmentation, Batman This is friggin' scary
31. And that is just Android ...
32. Viewport is one thing... Features? Implementation quality? Memory? Resolution? Browser Speed? Connection speed?
33. What about things we trust?
34. > t r u e + t r u e 2
35. > 0 . 1 + 0 . 2 0 . 3 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4
36. > 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
37. > [ ] = = ! [ ] t r u e
38. > t y p e o f N a N n u m b e r
39. Programming went full retard
41. -webkit-text-stroke: 4px;
42. This is madness!
43. You can't control everything
44. You can't control anything
45. Parallax Scrolling?
47. moto.oakley.com 1. 85.4 MB page weight 2. 471 HTTP Requests 3. 2 minutes 45 seconds until loading screen replaced with content 4. 4 minutes 10 seconds to wait for onLoad event
48. There sure is a mobile version? ... oh yeah, there is...
49. 85.9 MB
50. Costs Roaming in Switzerland for EU clients is 1€ per MB
51. Costs vodafone UK charges 1£ per 25 MB
52. Assumptions Features: Scrolling Implementation quality: Tried, trusted and Robust Memory: A shitload Resolution: Of course Retina! Browser Speed: iPad-near JS execution time Connection speed: Harddrive
53. Features
56. overflow: scroll
57. -webkit-overflow-scrolling: touch
58. Feature detection Test for overflow-scrolling, otherwise use iScroll
59. var has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()
60. The good: We did feature detects, and polyfilled in case
61. The bad: We assumed iScroll will fix all our problems iScroll assumed hardware acceleration is a good idea overall
62. The ugly: We broke IE10 on Windows Phone 8
64. When using skrollr on mobile you don't actually scroll. When detecting a mobile browser skrollr disables native scrolling and instead listens for touch events and moves the content
65. A classic $('a').on('click', function()) { window.location.href = $(this).attr('href'); }
67. Don't recreate browser features
68. Implementation quality
70. -webkit-something: something
71. meta-Viewport <meta name="viewport" content="width=device-width, initial- scale=1.0">
72. meta-Viewport
73. <meta name="viewport" content="width=device-width, initial- scale=1.0, maximum-scale=1.0"> ... not that it does anything ...
74. @media(max-width: 320px) { @ms-viewport { width: 320px } }
75. @-ms-viewport { width: device-width; }
76. Browser Speed Lightspeed
77. Truth is ... JavaScript takes long to execute
78. Pigs of Awesome - iOS
79. Pigs of Awesome - Android
80. $('.item.' + filterCriteria).each(function() { $(this).hide(); });
81. $('.filterArea').addClass('.filterCritera'); .filterCritera .hasCritera { display: none; }
82. Where is JavaScript necessary?
83. Lanyrd
84. Lanyrd User Agent Detection ... done right! Got a slow JS engine? Don't get any JS.
85. Instagram on iOS5 2/13 - 7/13
89. Browsers other than Chrome don't priorize JS over IMG assets They take everything in order, to ensure nothing is missing on execution
90. Use JavaScript to load content that's only available with JavaScript
91. 13s > 1.4s
92. sighjavascript.tumblr.com
93. Connection speed
95. A though one ... but rule of thumb is to reduce requests Load content that is necessary for the first impression
96. Reduce everything!
97. What does not kill me makes me smaller
98. RESS Responsive & Server-Side
99. if ($(document).width() > 640) { $.get('path/to/html', function(data){ $('[role="complementary"]').append(data); }); }
100. Single Pager? Embed CSS and Scripts inline Use sprites and fonts Beware of base64 asset embedding
102. Solutions Features: Use, when certain that it's there! Implementation quality: Modern features should be an add-on Browser Speed: Less JavaScript dependent content Memory: Optimize Images, reduce Image Footprint Resolution: See above, use SVG, use Responsive Images! Connection speed: Fear for worst, reduce requests!
103. Solutions Features: Progressive Enhancement Implementation quality: Progressive Enhancement Browser Speed: Progressive Enhancement Memory: Progressive Enhancement Resolution: Progressive Enhancement Connection speed: Progressive Enhancement
104. Progressive Enhancement
106. Progressive Enhancement Provide a solid (HTML) base, something you trust and know Enhance your presentation by applying new styles Enhance further by applying behaviour with JavaScript
107. Why Progressive Enhancement
108. Not only for the old things we know
109. But also for the uncertainty of the future!
110. workingdraft.de/135
111. workingdraft.de/137
112. workingdraft.de/144
113. workingdraft.de/138 - CMS Special
114. Create the most amazing food... ... by choosing the right ingredients
115. THX @ddprrt • fettblog.eu • workingdraft.de