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. 3.
  2. 8.
  3. 10.
  4. 11.
  5. 12.
  6. 13.
  7. 14.
  8. 15.
  9. 16.
  10. 17.
  11. 20.
  12. 21.
  13. 22.
  14. 30.
  15. 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
  16. 33.
  17. 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
  18. 37.
  19. 38.
  20. 39.
  21. 45.

    The bad: We assumed iScroll will fix all our problems

    iScroll assumed hardware acceleration is a good idea overall
  22. 47.
  23. 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
  24. 50.
  25. 52.
  26. 64.
  27. 67.
  28. 68.
  29. 69.
  30. 70.

    Browsers other than Chrome don't priorize JS over IMG assets

    They take everything in order, to ensure nothing is missing on execution
  31. 75.
  32. 76.

    SVG

  33. 77.
  34. 78.
  35. 80.
  36. 81.

    A though one ... but rule of thumb is to

    reduce requests Load content that is necessary for the first impression
  37. 84.

    Single Pager? Embed CSS and Scripts inline Use sprites and

    fonts Beware of base64 asset embedding
  38. 85.
  39. 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!
  40. 87.

    Solutions Features: Progressive Enhancement Implementation quality: Progressive Enhancement Browser Speed:

    Progressive Enhancement Memory: Progressive Enhancement Resolution: Progressive Enhancement Connection speed: Progressive Enhancement
  41. 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
  42. 93.
  43. 94.

    Grunt Task Runner Automaticall create PNG fallbacks (Grunticon) Insert debug

    CSS files during development Minify, compile, reduce sources Execute ImageOptim and SVGO ...
  44. 102.