Your SlideShare is downloading. ×
0
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Unfinished slides, vanilla mobile presenation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Unfinished slides, vanilla mobile presenation

13,149

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
13,149
On Slideshare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
24
Comments
1
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×