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. The perfect Steak
    Digital Visions 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. ... to be honest ...
    only few of them come with their own engine

    View full-size slide

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

    View full-size slide

  8. Fragmentation

    View full-size slide

  9. iOS screen fragmentation

    View full-size slide

  10. Android screen fragmentation

    View full-size slide

  11. Holy fragmentation, Batman
    This is friggin' scary

    View full-size slide

  12. And that is just Android ...

    View full-size slide

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

    View full-size slide

  14. You can't control everything

    View full-size slide

  15. Parallax Scrolling?

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  19. Costs
    vodafone UK charges 1£ per 25 MB

    View full-size slide

  20. 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 full-size slide

  21. overflow: scroll

    View full-size slide

  22. -webkit-overflow-scrolling: touch

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  30. Implementation qualitiy

    View full-size slide

  31. -webkit-something: something

    View full-size slide

  32. meta-Viewport

    View full-size slide

  33. meta-Viewport

    View full-size slide


  34. ... not that it does anything ...

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. Browser speed

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. Where is JavaScript
    necessary?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  46. sighjavascript.tumblr.com

    View full-size slide

  47. Memory
    Resolution

    View full-size slide

  48. Connection speed

    View full-size slide

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

    View full-size slide

  50. RESS
    Responsive & Server-Side

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

  55. Embrace Progressive
    Enhancement

    View full-size slide

  56. 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 full-size slide

  57. Help yourself with tooling

    View full-size slide

  58. Detect Code Smells

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. Why Progressive
    Enhancement

    View full-size slide

  62. Not only for the old things we know

    View full-size slide

  63. But also for the uncertainty of the
    future!

    View full-size slide

  64. workingdraft.de/135

    View full-size slide

  65. workingdraft.de/137

    View full-size slide

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

    View full-size slide

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

    View full-size slide