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

Digital Visions 2013 - The perfect Steak

Digital Visions 2013 - The perfect Steak

Talk on 2013's Digital Visions on mobile browsers, progressive enhancements, steaks and ... *cough* horoscopes

Stefan Baumgartner

October 04, 2013
Tweet

More Decks by Stefan Baumgartner

Other Decks in Technology

Transcript

  1. Griass enk!

    View Slide

  2. The perfect Steak
    Digital Visions 2013

    View Slide

  3. View Slide

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

    View Slide

  5. Weber-Kit

    View Slide

  6. Controlled
    Environments

    View Slide

  7. Controllable
    Environments

    View Slide

  8. View Slide

  9. Uncontrollable
    Environments

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

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

    View Slide

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

    View Slide

  19. Fragmentation

    View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. iOS screen fragmentation

    View Slide

  24. Android screen fragmentation

    View Slide

  25. Holy fragmentation, Batman
    This is friggin' scary

    View Slide

  26. And that is just Android ...

    View Slide

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

    View Slide

  28. You can't control everything

    View Slide

  29. Parallax Scrolling?

    View Slide

  30. View Slide

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

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

    View Slide

  33. 85.9 MB

    View Slide

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

    View Slide

  35. Costs
    vodafone UK charges 1£ per 25 MB

    View Slide

  36. Assumptions
    Features: Scrolling
    Implementation quality: Tried, trusted and Robust
    Browser Speed: iPad-near JS execution time
    Memory: A shitload
    Resolution: Of course Retina!
    Connection speed: Harddrive

    View Slide

  37. Features

    View Slide

  38. View Slide

  39. View Slide

  40. overflow: scroll

    View Slide

  41. -webkit-overflow-scrolling: touch

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  47. View Slide

  48. 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 Slide

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

    View Slide

  50. View Slide

  51. Implementation qualitiy

    View Slide

  52. View Slide

  53. -webkit-something: something

    View Slide

  54. meta-Viewport

    View Slide

  55. meta-Viewport

    View Slide


  56. ... not that it does anything ...

    View Slide

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

    View Slide

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

    View Slide

  59. Browser speed

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  63. Where is JavaScript
    necessary?

    View Slide

  64. Lanyrd

    View Slide

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

    View Slide

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

    View Slide

  67. View Slide

  68. View Slide

  69. View Slide

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

    View Slide

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

    View Slide

  72. 13s > 1.4s

    View Slide

  73. sighjavascript.tumblr.com

    View Slide

  74. Memory
    Resolution

    View Slide

  75. View Slide

  76. SVG

    View Slide

  77. View Slide

  78. View Slide

  79. Connection speed

    View Slide

  80. View Slide

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

    View Slide

  82. RESS
    Responsive & Server-Side

    View Slide

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

    View Slide

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

    View Slide

  85. View Slide

  86. 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 Slide

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

    View Slide

  88. Embrace Progressive
    Enhancement

    View Slide

  89. Progressive Enhancement
    Take care of your content - Provide a solid HTML base
    Present your content - Add robust and future friendly CSS
    Enhance behaviour by adding JavaScript

    View Slide

  90. Help yourself with tooling

    View Slide

  91. Detect Code Smells

    View Slide

  92. HTML Code Smells
    DiagnostiCSS
    Revenge.css
    Troll.css

    View Slide

  93. View Slide

  94. Grunt Task Runner
    Automaticall create PNG fallbacks (Grunticon)
    Insert debug CSS files during development
    Minify, compile, reduce sources
    Execute ImageOptim and SVGO
    ...

    View Slide

  95. Why Progressive
    Enhancement

    View Slide

  96. Not only for the old things we know

    View Slide

  97. But also for the uncertainty of the
    future!

    View Slide

  98. workingdraft.de/135

    View Slide

  99. workingdraft.de/137

    View Slide

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

    View Slide

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

    View Slide

  102. View Slide