GAINING CONTROL IN
THE GREAT UNKNOWN
MobileTechCon Munich - March
2014
Slide 2
Slide 2 text
Servus
Slide 3
Slide 3 text
@ddprrt
Slide 4
Slide 4 text
Netural
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Lafers grill recipes
The need precise control
I need to put meat on fire
Slide 8
Slide 8 text
Weber-Kit
Slide 9
Slide 9 text
Controlled
Environments
Slide 10
Slide 10 text
Controllable
Environments
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Uncontrollable
Environments
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
UC Browser
Slide 21
Slide 21 text
UC Browser
400 million users
32% market-share in China
Slide 22
Slide 22 text
... to be honest ...
only few of them come with their own engine
Slide 23
Slide 23 text
Under the top-most used
browsers on iOS and Android
Slide 24
Slide 24 text
Fragmentation
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
iOS screen fragmentation
Slide 30
Slide 30 text
Android screen fragmentation
Slide 31
Slide 31 text
Holy fragmentation, Batman
This is friggin' scary
Slide 32
Slide 32 text
And that is just Android
...
Slide 33
Slide 33 text
What are people really
using?
Slide 34
Slide 34 text
Holiday season in
Austria
pseudonymized target audience of a B2C website
male or female
age 0 to 99
Slide 35
Slide 35 text
The stats
different device types: 723
different browser families: 68
Slide 36
Slide 36 text
Top 5 browser families
1. Safari
2. Chrome
3. Firefox
4. Android Stock Browser
5. Internet Explorer
Slide 37
Slide 37 text
Viewport is one thing...
Features?
Implementation quality?
Memory?
Resolution?
Browser Speed?
Connection speed?
Slide 38
Slide 38 text
Parallax Scrolling?
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
There sure is a mobile
version?
... oh yeah, there is...
Slide 42
Slide 42 text
85.9 MB
Slide 43
Slide 43 text
Costs
Roaming in Switzerland for EU clients is 1€ per MB
Slide 44
Slide 44 text
Costs
vodafone UK charges 1£ per 25 MB
Slide 45
Slide 45 text
Assumptions
Features: Scrolling
Implementation quality: Tried, trusted and Robust
Memory: A shitload
Resolution: Of course Retina!
Browser Speed: iPad-near JS execution time
Connection speed: Harddrive
Slide 46
Slide 46 text
Features
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
overflow: scroll
Slide 50
Slide 50 text
-webkit-overflow-scrolling: touch
Slide 51
Slide 51 text
Feature detection
Test for overflow-scrolling, otherwise use iScroll
Slide 52
Slide 52 text
var has3d = 'WebKitCSSMatrix' in window && 'm11' in new
WebKitCSSMatrix()
Slide 53
Slide 53 text
The good:
We did feature detects, and polyfilled in case
Slide 54
Slide 54 text
The bad:
We assumed iScroll will fix all our problems
iScroll assumed hardware acceleration is a good idea overall
Slide 55
Slide 55 text
The ugly:
We broke IE10 on Windows Phone 8
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
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
Slide 58
Slide 58 text
A classic
$('a').on('click', function()) {
window.location.href = $(this).attr('href');
}
For what it's worth, the current trend inside Mozilla is
exactly what you say: avoiding vendor prefixes by
either turning things off before shipping or shipping
them unprefixed if they're stable enough.
W3C List
http://lists.w3.org/Archives/Public/public-webapps/2012OctDec/0731.html
Slide 78
Slide 78 text
In short: we won't use vendor prefixes for new
features. Instead, we’ll expose a single setting to
enable experimental DOM/CSS features for you to
see what's coming, play around, and provide
feedback [...] Only when we're ready to see these
features ship to stable will they be enabled by
default in the dev/canary channels.
Blink Developer FAQ
http://www.chromium.org/blink/developer-faq
Slide 79
Slide 79 text
Vendor prefixes
for experimental features
experimental means: not stable, not final
not stable: not ready for production
Lanyrd
User Agent Detection ... done right!
Got a slow JS engine? Don't get any JS.
Slide 90
Slide 90 text
Instagram on iOS5
2/13 - 7/13 and since 12/13
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
Browsers other than Chrome don't priorize JS over IMG assets
They take everything in order, to ensure nothing is missing on
execution
Slide 94
Slide 94 text
Use JavaScript to load content that's only available with
JavaScript
Slide 95
Slide 95 text
13s > 1.4s
Slide 96
Slide 96 text
sighjavascript.tumblr.com
Slide 97
Slide 97 text
Connection speed
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
A though one ... but rule of thumb is to reduce requests
Load content that is necessary for the first impression
Slide 100
Slide 100 text
Reduce everything!
Slide 101
Slide 101 text
What does not kill me
makes me smaller
Slide 102
Slide 102 text
RESS
Responsive & Server-Side
Slide 103
Slide 103 text
if ($(document).width() > 640) {
$.get('path/to/html', function(data){
$('[role="complementary"]').append(data);
});
}
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
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!
Progressive Enhancement
Provide a solid (HTML) base, something you trust and know
Enhance your presentation by applying new styles
Enhance further by applying behaviour with JavaScript