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!
2. The perfect Steak Digital Visions 2013
4. Lafers grill recipes The need precise control I need to put meat on fire
5. Weber-Kit
6. Controlled Environments
7. Controllable Environments
9. Uncontrollable Environments
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
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?
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
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
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'); }
51. Implementation qualitiy
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
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
76. SVG
79. Connection speed
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
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
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