Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Stefan Baumgartner

November 23, 2013
Tweet

More Decks by Stefan Baumgartner

Other Decks in Technology

Transcript

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

    View full-size slide

  2. Lafers grill recipes
    The need precise control
    I need to put meat on fire

    View full-size slide

  3. Controlled
    Environments

    View full-size slide

  4. Controllable
    Environments

    View full-size slide

  5. Uncontrollable
    Environments

    View full-size slide

  6. UC Browser
    400 million users
    32% market-share in China

    View full-size slide

  7. ... to be honest ...
    only few of them come with their own engine

    View full-size slide

  8. Under the top-most used
    browsers on iOS and Android

    View full-size slide

  9. Fragmentation

    View full-size slide

  10. iOS screen fragmentation

    View full-size slide

  11. Android screen fragmentation

    View full-size slide

  12. Holy fragmentation, Batman
    This is friggin' scary

    View full-size slide

  13. And that is just Android
    ...

    View full-size slide

  14. Viewport is one thing...
    Features?
    Implementation quality?
    Memory?
    Resolution?
    Browser Speed?
    Connection speed?

    View full-size slide

  15. What about things we
    trust?

    View full-size slide

  16. > t
    r
    u
    e + t
    r
    u
    e
    2

    View full-size slide

  17. > 0
    .
    1 + 0
    .
    2
    0
    .
    3
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    4

    View full-size slide

  18. > 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

    View full-size slide

  19. > [
    ] =
    = !
    [
    ]
    t
    r
    u
    e

    View full-size slide

  20. > t
    y
    p
    e
    o
    f N
    a
    N
    n
    u
    m
    b
    e
    r

    View full-size slide

  21. Programming went full retard

    View full-size slide

  22. -webkit-text-stroke:
    4px;

    View full-size slide

  23. This is madness!

    View full-size slide

  24. You can't control everything

    View full-size slide

  25. You can't control anything

    View full-size slide

  26. Parallax Scrolling?

    View full-size slide

  27. 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

    View full-size slide

  28. There sure is a mobile
    version?
    ... oh yeah, there is...

    View full-size slide

  29. Costs
    Roaming in Switzerland for EU clients is 1€ per MB

    View full-size slide

  30. Costs
    vodafone UK charges 1£ per 25 MB

    View full-size slide

  31. 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

    View full-size slide

  32. overflow: scroll

    View full-size slide

  33. -webkit-overflow-scrolling: touch

    View full-size slide

  34. Feature detection
    Test for overflow-scrolling, otherwise use iScroll

    View full-size slide

  35. var has3d = 'WebKitCSSMatrix' in window && 'm11' in new
    WebKitCSSMatrix()

    View full-size slide

  36. The good:
    We did feature detects, and polyfilled in case

    View full-size slide

  37. The bad:
    We assumed iScroll will fix all our problems
    iScroll assumed hardware acceleration is a good idea overall

    View full-size slide

  38. The ugly:
    We broke IE10 on Windows Phone 8

    View full-size slide

  39. 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

    View full-size slide

  40. A classic
    $('a').on('click', function()) {
    window.location.href = $(this).attr('href');
    }

    View full-size slide

  41. Don't recreate browser
    features

    View full-size slide

  42. Implementation quality

    View full-size slide

  43. -webkit-something: something

    View full-size slide

  44. meta-Viewport

    View full-size slide

  45. meta-Viewport

    View full-size slide


  46. ... not that it does anything ...

    View full-size slide

  47. @media(max-width: 320px) {
    @ms-viewport { width: 320px }
    }

    View full-size slide

  48. @-ms-viewport {
    width: device-width;
    }

    View full-size slide

  49. Browser Speed
    Lightspeed

    View full-size slide

  50. Truth is ...
    JavaScript takes long to
    execute

    View full-size slide

  51. Pigs of Awesome - iOS

    View full-size slide

  52. Pigs of Awesome -
    Android

    View full-size slide

  53. $('.item.' + filterCriteria).each(function() {
    $(this).hide();
    });

    View full-size slide

  54. $('.filterArea').addClass('.filterCritera');
    .filterCritera .hasCritera {
    display: none;
    }

    View full-size slide

  55. Where is JavaScript
    necessary?

    View full-size slide

  56. Lanyrd
    User Agent Detection ... done right!
    Got a slow JS engine? Don't get any JS.

    View full-size slide

  57. Instagram on iOS5
    2/13 - 7/13

    View full-size slide

  58. Browsers other than Chrome don't priorize JS over IMG assets
    They take everything in order, to ensure nothing is missing on
    execution

    View full-size slide

  59. Use JavaScript to load content that's only available with
    JavaScript

    View full-size slide

  60. sighjavascript.tumblr.com

    View full-size slide

  61. Connection speed

    View full-size slide

  62. A though one ... but rule of thumb is to reduce requests
    Load content that is necessary for the first impression

    View full-size slide

  63. Reduce everything!

    View full-size slide

  64. What does not kill me
    makes me smaller

    View full-size slide

  65. RESS
    Responsive & Server-Side

    View full-size slide

  66. if ($(document).width() > 640) {
    $.get('path/to/html', function(data){
    $('[role="complementary"]').append(data);
    });
    }

    View full-size slide

  67. Single Pager?
    Embed CSS and Scripts inline
    Use sprites and fonts
    Beware of base64 asset embedding

    View full-size slide

  68. 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!

    View full-size slide

  69. Solutions
    Features: Progressive Enhancement
    Implementation quality: Progressive Enhancement
    Browser Speed: Progressive Enhancement
    Memory: Progressive Enhancement
    Resolution: Progressive Enhancement
    Connection speed: Progressive Enhancement

    View full-size slide

  70. Progressive Enhancement

    View full-size slide

  71. 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

    View full-size slide

  72. Why Progressive
    Enhancement

    View full-size slide

  73. Not only for the old things we
    know

    View full-size slide

  74. But also for the uncertainty of the
    future!

    View full-size slide

  75. workingdraft.de/135

    View full-size slide

  76. workingdraft.de/137

    View full-size slide

  77. workingdraft.de/144

    View full-size slide

  78. workingdraft.de/138 -
    CMS Special

    View full-size slide

  79. Create the most amazing food...
    ... by choosing the right
    ingredients

    View full-size slide

  80. THX
    @ddprrt • fettblog.eu • workingdraft.de

    View full-size slide