Tools of the Mobile Web

Transcript

1. MOBILE
   Tools of the
   MOBILE
   web
   

   View Slide

2. Native
   Hybrid
   Mobile Web
   Frameworks
   

   View Slide

3. All-in-one frameworks
   Sencha Touch too
   

   View Slide

4. Frameworks allow for quick
   development of mobile apps.
   
   
   Place Puppy Mobile
   
   
   
   Puppies
   Slide
   Slide Up
   
   
   List of Puppies
   Another List of Puppies
   
   
   
   © 2012 Place Puppy
   
   
   No Sencha Touch example could fit in a slide.
   

   View Slide

5. Frameworks are great for
   quick development, but...
   

   View Slide

6. ...framework apps
   just never feel right.
   

   View Slide

7. If an app looks native, it
   should perform natively.
   

   View Slide

8. Framework experiences
   tend to be choppy...
   

   View Slide

9. ...and their scrolling sucks.
   

   View Slide

10. If you’re going with the
    web, embrace the web.
    The good & bad parts.
    http://cri.st/EUli
    

    View Slide

11. It’s possible to use a framework
    while embracing the web.
    http://bagcheck.com
    

    View Slide

12. Hybrid
    Mobile Web
    Frameworks
    à la carte
    

    View Slide

13. 50% of mobile users abandon
    after 6-10 seconds.
    

    View Slide

14. Server Response
    Processing
    +
    Page time
    

    View Slide

15. Every library adds
    processing time.
    

    View Slide

16. Backbone.js
    Sammy.js
    Spine.js
    Javscript MVC
    Agility.js
    Knockout.js
    Angular.js
    Ember.js
    Eyeballs.js
    Client side MVC...
    

    View Slide

17. ... can be overkill.
    Handle with care.
    

    View Slide

18. Micro libraries can ensure you
    only use what you need.
    jQuery Zepto Zest
    http://cri.st/EdMn
    http://zeptojs.com/
    > >
    

    View Slide

19. Ender.js helps too...
    “Build only what you need, when
    you need it.”
    

    View Slide

20. http://microjs.com/
    

    View Slide

21. ~92% of mobile is webkit...
    

    View Slide

22. ...build if it were 0%
    

    View Slide

23. Replace JavaScript
    animations with CSS3...
    

    View Slide

24. ...fall back to Javascript if
    you have to.
    

    View Slide

25. CSS3’s translate3d utilizes
    hardware acceleration.
    .selector {transform: translate3d(0,0,0)}
    

    View Slide

26. Use local storage to cache to
    maximize performance.
    window.localStorage.set(‘something’, variable);
    

    View Slide

27. Cache manifest in HTML5 can
    reduce calls to the server.
    
    ...
    
    CACHE MANIFEST
    puppy.html
    puppy.css
    jquery.min.js
    puppy.js
    puppy.html
    puppy.appcache
    

    View Slide

28. Mobile Web
    Frameworks
    à la carte
    Responsive
    Design
    

    View Slide

29. Great for content
    sites and some apps.
    

    View Slide

30. Doesn’t solve 100% of
    the problem.
    

    View Slide

31. Use responsive principals
    for device targeted sites.
    

    View Slide

32. Frameworks
    à la carte
    Responsive Design
    Fin.
    

    View Slide