fast mobile uis
DESCRIPTION
I will show you how to use the new features in HTML5 to create mobile games and the hoops you have to jump through to build a sleek and responsive user interface while trying to avoid most of the headaches that come with the job when you are always an edge case.TRANSCRIPT
![Page 1: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/1.jpg)
Fast Mobile UIsYou’re an Edge Case
1Thursday, 8 March, 12
![Page 2: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/2.jpg)
Who am I, right?
Horia Dragomir
UI Developer @ wooga
HTML5 Social Games
2Thursday, 8 March, 12
![Page 3: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/3.jpg)
Mobile UI != Desktop UI
3Thursday, 8 March, 12
![Page 4: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/4.jpg)
Mobile UI is Harder
• Awesome standard support
• No IE6
• Super hardware
4Thursday, 8 March, 12
![Page 5: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/5.jpg)
Forget What You Knew
5Thursday, 8 March, 12
![Page 6: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/6.jpg)
Learn by Doing
6Thursday, 8 March, 12
![Page 7: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/7.jpg)
Learn by Solving Problems
7Thursday, 8 March, 12
![Page 8: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/8.jpg)
We Used to Have No Debugging
8Thursday, 8 March, 12
![Page 9: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/9.jpg)
Thank you, Adobe and Opera!
9Thursday, 8 March, 12
![Page 10: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/10.jpg)
Viewport10Thursday, 8 March, 12
![Page 11: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/11.jpg)
Viewport
• It's actually hard to use the full screen
• Use a custom hack
11Thursday, 8 March, 12
![Page 12: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/12.jpg)
Viewport
• Viewporter tries to solve this problem, but fails
• You webapp will run in far too many environments to create profiles for
12Thursday, 8 March, 12
![Page 13: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/13.jpg)
Speed
13Thursday, 8 March, 12
![Page 14: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/14.jpg)
iOS versus AndroidAndroid is usually half as fast*
14Thursday, 8 March, 12
![Page 15: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/15.jpg)
iOS versus AndroidAndroid is usually half as fast
http://daringfireball.net/linked/2012/03/05/ios-android-html5-benchmarks
15Thursday, 8 March, 12
![Page 16: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/16.jpg)
Loading Speed
• Show first, load later
• Loading JS can freeze the UI
• Lazy-loading?
16Thursday, 8 March, 12
![Page 17: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/17.jpg)
HTTP Hates YouRoundtrips are expensive
Try pipelining
17Thursday, 8 March, 12
![Page 18: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/18.jpg)
applicationCache is a lie
• Loads in one gulp
• Loads in order
• the UI will hate this
• Use it with care
18Thursday, 8 March, 12
![Page 19: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/19.jpg)
Golf Everything!140byt.es
19Thursday, 8 March, 12
![Page 20: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/20.jpg)
Golf?
• Make you application smaller and smaller and keep it as small as you can
20Thursday, 8 March, 12
![Page 21: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/21.jpg)
Be Awesome!
21Thursday, 8 March, 12
![Page 22: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/22.jpg)
Be Awesome?
22Thursday, 8 March, 12
![Page 23: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/23.jpg)
23Thursday, 8 March, 12
![Page 24: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/24.jpg)
You Don’t Need jQuery!
• I <3 jQuery, but not on mobile.
• jQuery fills in gaps in APIs
24Thursday, 8 March, 12
![Page 25: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/25.jpg)
HTML5 is Awesome!
25Thursday, 8 March, 12
![Page 26: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/26.jpg)
USE IT!
26Thursday, 8 March, 12
![Page 27: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/27.jpg)
.querySelectorAll()
• [].map.call
• super fast!
27Thursday, 8 March, 12
![Page 28: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/28.jpg)
.querySelectorAll()
[].map.call(node.querySelectorAll('a .super'), function (child) {
//awesome stuff here
});
28Thursday, 8 March, 12
![Page 29: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/29.jpg)
.querySelectorAll()
http://snook.ca/archives/javascript/going-simple-with-javascript
29Thursday, 8 March, 12
![Page 30: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/30.jpg)
getElementsByClassName
• blazing fast!
30Thursday, 8 March, 12
![Page 31: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/31.jpg)
getElementById
31Thursday, 8 March, 12
![Page 32: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/32.jpg)
Use Event Bubbling!
32Thursday, 8 March, 12
![Page 33: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/33.jpg)
Use Event Bubbling!
instead of addingEventListeners to every node, just add one to their parent.
It’s what the cool kids are doing!
33Thursday, 8 March, 12
![Page 34: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/34.jpg)
XMLHttpRequest rocks the boat
• req.overrideMimeType('text/plain; charset=x-user-defined');
34Thursday, 8 March, 12
![Page 35: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/35.jpg)
req.responseCode < 400
35Thursday, 8 March, 12
![Page 36: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/36.jpg)
req.responseCode < 400
An AJAX request to an asset already stored in applicationCache will sometimes yield a responseCode of 0
36Thursday, 8 March, 12
![Page 37: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/37.jpg)
pushState for navigation
• hashChange if you're afraid of pushState
37Thursday, 8 March, 12
![Page 38: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/38.jpg)
requestAnimationFrame
38Thursday, 8 March, 12
![Page 39: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/39.jpg)
requestAnimationFrame
• function(a,b){while(a--&&!(b=this["oR0msR0mozR0webkitR0r".split(0)[a]+"equestAnimationFrame"]));return b||function(a){setTimeout(a,15)}}(5)
• https://gist.github.com/997619
39Thursday, 8 March, 12
![Page 40: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/40.jpg)
Redraws Hate You
• The feeling will be mutual
• Use as little DOM nodes as possible
• Make top level changes that cascade
40Thursday, 8 March, 12
![Page 41: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/41.jpg)
CSS is your friend
41Thursday, 8 March, 12
![Page 42: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/42.jpg)
Animations are hard
• Think of the poor CPU
• Use transitions!
• Use CSS3 transforms
42Thursday, 8 March, 12
![Page 43: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/43.jpg)
Also, cheat and add dummy transforms just to get things HW accelerated
43Thursday, 8 March, 12
![Page 44: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/44.jpg)
Android hates multiple transforms
You will end up having simplified animations for Android. That’s OK.
44Thursday, 8 March, 12
![Page 45: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/45.jpg)
Also, turn off Hardware Acceleration for Android 2.x
Thank you, Ben Green!
45Thursday, 8 March, 12
![Page 46: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/46.jpg)
node[data-mode=”super”]
• set attributes, not just classes
• classes are cool for binary switches, though
46Thursday, 8 March, 12
![Page 47: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/47.jpg)
Tread with care
• CSS3 does not always follow live DOM events
47Thursday, 8 March, 12
![Page 48: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/48.jpg)
Tread with care
• CSS3 does not always follow live DOM events
• See this for an example: http://jsbin.com/orolov/12/edit#html,live
48Thursday, 8 March, 12
![Page 49: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/49.jpg)
Small hacks go a long way
49Thursday, 8 March, 12
![Page 50: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/50.jpg)
onclick is broken
for a good reason
50Thursday, 8 March, 12
![Page 51: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/51.jpg)
Roll your own “onclick”
• use touchstart, touchmove and touchend
• enable longtouch listener
51Thursday, 8 March, 12
![Page 52: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/52.jpg)
document.addEventListener('touchend', function () {}, false);
This enables the :active selector and increases the perceived responsiveness of your app
52Thursday, 8 March, 12
![Page 53: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/53.jpg)
Perceived ResponsivenessDelay JS heavy execution to allow the UI to
respond fast.
53Thursday, 8 March, 12
![Page 54: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/54.jpg)
Perceived Responsivenesshttp://alexmaccaw.co.uk/posts/async_ui
54Thursday, 8 March, 12
![Page 55: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/55.jpg)
55Thursday, 8 March, 12
![Page 56: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/56.jpg)
56Thursday, 8 March, 12
![Page 57: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/57.jpg)
57Thursday, 8 March, 12
![Page 58: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/58.jpg)
format-detection telephone=no
This will not always work, so you will need to insert dummy <span>s here and there
58Thursday, 8 March, 12
![Page 59: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/59.jpg)
pointer-events: none;user-select: none;user-drag: none;
59Thursday, 8 March, 12
![Page 60: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/60.jpg)
name=viewport content="initial-scale=0.5"
• Use CSS3 transforms to scale things back to size
• Or just use bigger graphics
60Thursday, 8 March, 12
![Page 61: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/61.jpg)
Use optimized images
• pngnq
• spritopia
• Android has navigator.connection
61Thursday, 8 March, 12
![Page 62: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/62.jpg)
Android was broken, though
62Thursday, 8 March, 12
![Page 63: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/63.jpg)
You should be an edge casethis means you're doing something special
63Thursday, 8 March, 12
![Page 64: Fast Mobile UIs](https://reader033.vdocument.in/reader033/viewer/2022052315/554f62e2b4c9058a148b4906/html5/thumbnails/64.jpg)
You should be an edge case
@hdragomir @wooga
this means you're doing something special
64Thursday, 8 March, 12