The art of mobile web without optimized frameworks...Getting started with vanilla mobile webSunday, 12 May, 13
JoETC...The frameworksSunday, 12 May, 13
At facebookUser-Defined Footer TextNot that long AGOWhen I’m introspective about the last few years Ithink the biggest mis...
User-Defined Footer TextI’m actually, on long-term, really excited about it. Oneof the things that’s interesting is we act...
User-Defined Footer TextSunday, 12 May, 13
Problems Facebook probably hadUser-Defined Footer Text1. Fixed Toobars2. Scrolling in overflown content (problems coming f...
You won’t solve everything so...Choose your battle!User-Defined Footer TextSunday, 12 May, 13
Getting to know CSSPosition: FixedUser-Defined Footer TextWork perfectly on Android 4.0+, iOS 5+, Windows 8,Blackberry 7.0...
Getting to native feeling withCSS AnimationsUser-Defined Footer Text1. Abuse GPU rendering with 3D transformation transfor...
Getting to native feeling withCSS AnimationsUser-Defined Footer Texthttp://www.html5rocks.com/en/mobile/optimization-and-p...
Crap...infinite ScrollingUser-Defined Footer Text1. Use paging (sorry)2. Be creative3. Watch out for CSS gradients on all ...
HTML5 app at it’s bestLinkedin APPUser-Defined Footer Texthttp://engineering.linkedin.com/linkedin-ipad-5-techniques-smoot...
fuck youAndroid...User-Defined Footer TextAs of december 2012....http://developer.android.com/about/dashboards/index.htmlS...
fuck youAndroid...User-Defined Footer TextAs of december 2012....http://developer.android.com/about/dashboards/index.htmlR...
fuck youAndroid...User-Defined Footer TextTheir lab one year agoSunday, 12 May, 13
Hello Nokia!mapsUser-Defined Footer Text1. Nokia was shown as an alternative for Applemaps screw up2. Unfortunately not th...
Helping you along the wayDebugging ToolsUser-Defined Footer TextSunday, 12 May, 13
A litle help is comingRemote DebugUser-Defined Footer TextYou can debug easily chrome for android connecting viausb to you...
A little help is comingRemote DebugUser-Defined Footer Text* Check your memory usage* Optimize paints* Optimize your anima...
A little help is comingRemote DebugUser-Defined Footer TextFind JS errors you arent even aware of.http://errorception.com/...
DEMO TIME!User-Defined Footer TextSunday, 12 May, 13
Upcoming SlideShare
Loading in …5
×

Unfinished slides, vanilla mobile presenation

14,100 views

Published on

Published in: Technology, Design
1 Comment
7 Likes
Statistics
Notes
  • Hey every1 new here will be looking around gleaning
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
14,100
On SlideShare
0
From Embeds
0
Number of Embeds
11,746
Actions
Shares
0
Downloads
25
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Unfinished slides, vanilla mobile presenation

  1. The art of mobile web without optimized frameworks...Getting started with vanilla mobile webSunday, 12 May, 13
  2. JoETC...The frameworksSunday, 12 May, 13
  3. At facebookUser-Defined Footer TextNot that long AGOWhen I’m introspective about the last few years Ithink the biggest mistake that we made, as acompany, is betting too much on HTML5 asopposed to native… because it just wasn’t there.Sunday, 12 May, 13
  4. User-Defined Footer TextI’m actually, on long-term, really excited about it. Oneof the things that’s interesting is we actually havemore people on a daily basis using mobileWebFacebook than we have using our iOS or Android appscombined. So mobileWeb is a big thing for us.Sunday, 12 May, 13
  5. User-Defined Footer TextSunday, 12 May, 13
  6. Problems Facebook probably hadUser-Defined Footer Text1. Fixed Toobars2. Scrolling in overflown content (problems coming form the fixd position issue)3. Content animations4. Infinite data scrolling (like an never ending page usinf the timeline)5. ajax slow,down connection hickup (interface just freeze), handling offline, etc6. Android compatibility (poor phones, poor hardware)7. maps8. other minor stuffYou probably going to face them too...Sunday, 12 May, 13
  7. You won’t solve everything so...Choose your battle!User-Defined Footer TextSunday, 12 May, 13
  8. Getting to know CSSPosition: FixedUser-Defined Footer TextWork perfectly on Android 4.0+, iOS 5+, Windows 8,Blackberry 7.0.Attempting to make it work on older versions is a hugepain in the ass (not worth it, seriously)Don’t forget your metas!!!<meta name="viewport" content="width=device-width">Sunday, 12 May, 13
  9. Getting to native feeling withCSS AnimationsUser-Defined Footer Text1. Abuse GPU rendering with 3D transformation transform: translateZ(0);2. Do not get carried away about using more battery (native apps use the gpu anyway)3. Sometimes it’s going to jerk a bit (Android text antialiase bug is comming inanimations)http://www.html5rocks.com/en/mobile/optimization-and-performance/2 ways of using itSunday, 12 May, 13
  10. Getting to native feeling withCSS AnimationsUser-Defined Footer Texthttp://www.html5rocks.com/en/mobile/optimization-and-performance/CSS classes (pre-computed) JS animations (not-precomputed)<div id="home-page" class="page"><h1>Home Page</h1></div><div id="products-page" class="page stage-right"><h1>Products Page</h1></div>page.style.WebkitTransition = all .4s ease-out;TweenLite.to($overlay[0], 0.35, {css:{opacity:0.5}});!TweenLite.to($popup[0], 0.45, {css:{scale:1, opacity : 1}, onComplete : function(){! // DO STUFF}});!Enable gpu rendering-webkit-transform: translate3d(0, 0, 0);translateZ(0)Ameliorate performance trick:-webkit-backface-visibility: hidden;-webkit-perspective: 1000;-webkit-transform: rotateZ(360deg);Sunday, 12 May, 13
  11. Crap...infinite ScrollingUser-Defined Footer Text1. Use paging (sorry)2. Be creative3. Watch out for CSS gradients on all rows for a maximum ofperformances4. Watch out for box-shadows5. Unload images and reload them.http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5Sunday, 12 May, 13
  12. HTML5 app at it’s bestLinkedin APPUser-Defined Footer Texthttp://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5Sunday, 12 May, 13
  13. fuck youAndroid...User-Defined Footer TextAs of december 2012....http://developer.android.com/about/dashboards/index.htmlSunday, 12 May, 13
  14. fuck youAndroid...User-Defined Footer TextAs of december 2012....http://developer.android.com/about/dashboards/index.htmlRemember my toolbars friends? yeah about that...Sunday, 12 May, 13
  15. fuck youAndroid...User-Defined Footer TextTheir lab one year agoSunday, 12 May, 13
  16. Hello Nokia!mapsUser-Defined Footer Text1. Nokia was shown as an alternative for Applemaps screw up2. Unfortunately not that good on android.Sunday, 12 May, 13
  17. Helping you along the wayDebugging ToolsUser-Defined Footer TextSunday, 12 May, 13
  18. A litle help is comingRemote DebugUser-Defined Footer TextYou can debug easily chrome for android connecting viausb to your desktop.https://developers.google.com/chrome-developer-tools/docs/remote-debuggingYou can do the same with ios6 and safari.http://moduscreate.com/enable-remote-web-inspector-in-ios-6/Sunday, 12 May, 13
  19. A little help is comingRemote DebugUser-Defined Footer Text* Check your memory usage* Optimize paints* Optimize your animationshttp://www.youtube.com/watch?v=Vp524yo0p44Sunday, 12 May, 13
  20. A little help is comingRemote DebugUser-Defined Footer TextFind JS errors you arent even aware of.http://errorception.com/http://www.muscula.com/Multiple other choices..Sunday, 12 May, 13
  21. DEMO TIME!User-Defined Footer TextSunday, 12 May, 13

×