Fast Mobile UIs
Upcoming SlideShare
Loading in...5
×
 

Fast Mobile UIs

on

  • 2,461 views

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

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.

Statistics

Views

Total Views
2,461
Views on SlideShare
2,456
Embed Views
5

Actions

Likes
7
Downloads
38
Comments
0

2 Embeds 5

http://campus.beta.sapo.pt 4
https://twitter.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Fast Mobile UIs Fast Mobile UIs Presentation Transcript

  • Fast Mobile UIs You’re an Edge CaseThursday, 8 March, 12 1
  • Who am I, right? Horia Dragomir UI Developer @ wooga HTML5 Social GamesThursday, 8 March, 12 2
  • Mobile UI != Desktop UIThursday, 8 March, 12 3
  • Mobile UI is Harder • Awesome standard support • No IE6 • Super hardwareThursday, 8 March, 12 4
  • Forget What You KnewThursday, 8 March, 12 5
  • Learn by DoingThursday, 8 March, 12 6
  • Learn by Solving ProblemsThursday, 8 March, 12 7
  • We Used to Have No DebuggingThursday, 8 March, 12 8
  • Thank you, Adobe and Opera!Thursday, 8 March, 12 9
  • ViewportThursday, 8 March, 12 10
  • Viewport • Its actually hard to use the full screen • Use a custom hackThursday, 8 March, 12 11
  • Viewport • Viewporter tries to solve this problem, but fails • You webapp will run in far too many environments to create profiles forThursday, 8 March, 12 12
  • SpeedThursday, 8 March, 12 13
  • iOS versus Android Android is usually half as fast*Thursday, 8 March, 12 14
  • iOS versus Android Android is usually half as fast http://daringfireball.net/linked/2012/03/05/ios-android-html5-benchmarksThursday, 8 March, 12 15
  • Loading Speed • Show first, load later • Loading JS can freeze the UI • Lazy-loading?Thursday, 8 March, 12 16
  • HTTP Hates You Roundtrips are expensive Try pipeliningThursday, 8 March, 12 17
  • applicationCache is a lie • Loads in one gulp • Loads in order • the UI will hate this • Use it with careThursday, 8 March, 12 18
  • Golf Everything! 140byt.esThursday, 8 March, 12 19
  • Golf? • Make you application smaller and smaller and keep it as small as you canThursday, 8 March, 12 20
  • Be Awesome!Thursday, 8 March, 12 21
  • Be Awesome?Thursday, 8 March, 12 22
  • Thursday, 8 March, 12 23
  • You Don’t Need jQuery! • I <3 jQuery, but not on mobile. • jQuery fills in gaps in APIsThursday, 8 March, 12 24
  • HTML5 is Awesome!Thursday, 8 March, 12 25
  • USE IT!Thursday, 8 March, 12 26
  • .querySelectorAll() • [].map.call • super fast!Thursday, 8 March, 12 27
  • .querySelectorAll() [].map.call(node.querySelectorAll(a .super), function (child) { //awesome stuff here });Thursday, 8 March, 12 28
  • .querySelectorAll() http://snook.ca/archives/javascript/going- simple-with-javascriptThursday, 8 March, 12 29
  • getElementsByClassName • blazing fast!Thursday, 8 March, 12 30
  • getElementByIdThursday, 8 March, 12 31
  • Use Event Bubbling!Thursday, 8 March, 12 32
  • Use Event Bubbling! instead of addingEventListeners to every node, just add one to their parent. It’s what the cool kids are doing!Thursday, 8 March, 12 33
  • XMLHttpRequest rocks the boat • req.overrideMimeType(text/plain; charset=x-user-defined);Thursday, 8 March, 12 34
  • req.responseCode < 400Thursday, 8 March, 12 35
  • req.responseCode < 400 An AJAX request to an asset already stored in applicationCache will sometimes yield a responseCode of 0Thursday, 8 March, 12 36
  • pushState for navigation • hashChange if youre afraid of pushStateThursday, 8 March, 12 37
  • requestAnimationFrameThursday, 8 March, 12 38
  • 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/997619Thursday, 8 March, 12 39
  • Redraws Hate You • The feeling will be mutual • Use as little DOM nodes as possible • Make top level changes that cascadeThursday, 8 March, 12 40
  • CSS is your friendThursday, 8 March, 12 41
  • Animations are hard • Think of the poor CPU • Use transitions! • Use CSS3 transformsThursday, 8 March, 12 42
  • Also, cheat and add dummy transforms just to get things HW acceleratedThursday, 8 March, 12 43
  • Android hates multiple transforms You will end up having simplified animations for Android. That’s OK.Thursday, 8 March, 12 44
  • Also, turn off Hardware Acceleration for Android 2.x Thank you, Ben Green!Thursday, 8 March, 12 45
  • node[data-mode=”super”] • set attributes, not just classes • classes are cool for binary switches, thoughThursday, 8 March, 12 46
  • Tread with care • CSS3 does not always follow live DOM eventsThursday, 8 March, 12 47
  • Tread with care • CSS3 does not always follow live DOM events • See this for an example: http://jsbin.com/orolov/12/edit#html,liveThursday, 8 March, 12 48
  • Small hacks go a long wayThursday, 8 March, 12 49
  • onclick is broken for a good reasonThursday, 8 March, 12 50
  • Roll your own “onclick” • use touchstart, touchmove and touchend • enable longtouch listenerThursday, 8 March, 12 51
  • document.addEventListener(touchend, function () {}, false); This enables the :active selector and increases the perceived responsiveness of your appThursday, 8 March, 12 52
  • Perceived Responsiveness Delay JS heavy execution to allow the UI to respond fast.Thursday, 8 March, 12 53
  • Perceived Responsiveness http://alexmaccaw.co.uk/posts/async_uiThursday, 8 March, 12 54
  • Thursday, 8 March, 12 55
  • Thursday, 8 March, 12 56
  • Thursday, 8 March, 12 57
  • format-detection telephone=no This will not always work, so you will need to insert dummy <span>s here and thereThursday, 8 March, 12 58
  • pointer-events: none; user-select: none; user-drag: none;Thursday, 8 March, 12 59
  • name=viewport content="initial-scale=0.5" • Use CSS3 transforms to scale things back to size • Or just use bigger graphicsThursday, 8 March, 12 60
  • Use optimized images • pngnq • spritopia • Android has navigator.connectionThursday, 8 March, 12 61
  • Android was broken, thoughThursday, 8 March, 12 62
  • You should be an edge case this means youre doing something specialThursday, 8 March, 12 63
  • You should be an edge case this means youre doing something special @hdragomir @woogaThursday, 8 March, 12 64