Digital Visions 2013 - The perfect Steak

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

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