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

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.

187d92c9284160ad908885ab096f5209?s=128

Stefan Baumgartner

November 23, 2013
Tweet

Transcript

  1. GAINING CONTROL IN THE GREAT UNKNOWN Drupalcamp - November 2013

  2. Griass Enk

  3. @ddprrt

  4. Netural

  5. None
  6. Lafers grill recipes The need precise control I need to

    put meat on fire
  7. Weber-Kit

  8. Controlled Environments

  9. Controllable Environments

  10. None
  11. Uncontrollable Environments

  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  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

  24. None
  25. None
  26. None
  27. None
  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

  40. None
  41. -webkit-text-stroke: 4px;

  42. This is madness!

  43. You can't control everything

  44. You can't control anything

  45. Parallax Scrolling?

  46. None
  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

  54. None
  55. None
  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

  63. None
  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'); }

  66. None
  67. Don't recreate browser features

  68. Implementation quality

  69. None
  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

  86. None
  87. None
  88. None
  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

  94. None
  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
  101. None
  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

  105. None
  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

  116. None