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

187d92c9284160ad908885ab096f5209?s=128

Stefan Baumgartner

October 04, 2013
Tweet

Transcript

  1. Griass enk!

  2. The perfect Steak Digital Visions 2013

  3. None
  4. Lafers grill recipes The need precise control I need to

    put meat on fire
  5. Weber-Kit

  6. Controlled Environments

  7. Controllable Environments

  8. None
  9. Uncontrollable Environments

  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. ... to be honest ... only few of them come

    with their own engine
  18. Under the top-most used browsers on iOS and Android

  19. Fragmentation

  20. None
  21. None
  22. None
  23. iOS screen fragmentation

  24. Android screen fragmentation

  25. Holy fragmentation, Batman This is friggin' scary

  26. And that is just Android ...

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

    Speed? Connection speed?
  28. You can't control everything

  29. Parallax Scrolling?

  30. None
  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
  32. There sure is a mobile version? ... oh yeah, there

    is...
  33. 85.9 MB

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

    MB
  35. Costs vodafone UK charges 1£ per 25 MB

  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
  37. Features

  38. None
  39. None
  40. overflow: scroll

  41. -webkit-overflow-scrolling: touch

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

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

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

  45. The bad: We assumed iScroll will fix all our problems

    iScroll assumed hardware acceleration is a good idea overall
  46. The ugly: We broke IE10 on Windows Phone 8

  47. None
  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
  49. A classic $('a').on('click', function()) { window.location.href = $(this).attr('href'); }

  50. None
  51. Implementation qualitiy

  52. None
  53. -webkit-something: something

  54. meta-Viewport <meta name="viewport" content="width=device-width, initial- scale=1.0">

  55. meta-Viewport

  56. <meta name="viewport" content="width=device-width, initial- scale=1.0, maximum-scale=1.0"> ... not that it

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

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

  59. Browser speed

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

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

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

  63. Where is JavaScript necessary?

  64. Lanyrd

  65. Lanyrd User Agent Detection ... done right! Got a slow

    JS engine? Don't get any JS.
  66. Instagram on iOS5 2/13 - 7/13

  67. None
  68. None
  69. None
  70. Browsers other than Chrome don't priorize JS over IMG assets

    They take everything in order, to ensure nothing is missing on execution
  71. Use JavaScript to load content that's only available with JavaScript

  72. 13s > 1.4s

  73. sighjavascript.tumblr.com

  74. Memory Resolution

  75. None
  76. SVG

  77. None
  78. None
  79. Connection speed

  80. None
  81. A though one ... but rule of thumb is to

    reduce requests Load content that is necessary for the first impression
  82. RESS Responsive & Server-Side

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

  84. Single Pager? Embed CSS and Scripts inline Use sprites and

    fonts Beware of base64 asset embedding
  85. None
  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!
  87. Solutions Features: Progressive Enhancement Implementation quality: Progressive Enhancement Browser Speed:

    Progressive Enhancement Memory: Progressive Enhancement Resolution: Progressive Enhancement Connection speed: Progressive Enhancement
  88. Embrace Progressive Enhancement

  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
  90. Help yourself with tooling

  91. Detect Code Smells

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

  93. None
  94. Grunt Task Runner Automaticall create PNG fallbacks (Grunticon) Insert debug

    CSS files during development Minify, compile, reduce sources Execute ImageOptim and SVGO ...
  95. Why Progressive Enhancement

  96. Not only for the old things we know

  97. But also for the uncertainty of the future!

  98. workingdraft.de/135

  99. workingdraft.de/137

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

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

  102. None