ݺߣ

ݺߣShare a Scribd company logo
Copilot
                Creating a mobile web app in 8 days: What we learned.




Friday, November 30, 12
Sebastian Burkhart

         github: opyh
         twitter: opyh
         app.net: hypo

         working at bitcrowd.net, Berlin




Friday, November 30, 12
Content: Technical & Design
                          pitfalls to avoid




Friday, November 30, 12
= Checklist for your mobile
                          projects




Friday, November 30, 12
http://m.moviepilot.com




Friday, November 30, 12
Friday, November 30, 12
Friday, November 30, 12
Friday, November 30, 12
Friday, November 30, 12
Friday, November 30, 12
App specs




Friday, November 30, 12
App specs
                           Minimal Rails app
                           Backbone.Events
                           Backbone.Router
                                Zepto




Friday, November 30, 12
swipe.js
                    Used for     -like drill-down navigation

                          and     -like side-bar menu




Friday, November 30, 12
swipe.js
                            Has touch event handlers +
                          transform / transition CSS




Friday, November 30, 12
swipe.js
             Remove display: table-row for speed!




Friday, November 30, 12
Micro MVC framework




Friday, November 30, 12
Micro MVC framework
                Inspired by iOS UIKit ViewController classes




Friday, November 30, 12
Micro MVC framework
            UITabBarController + UINavigationControllers




Friday, November 30, 12
Technical lessons




Friday, November 30, 12
Your desktop browser lies. :)




Friday, November 30, 12
Test every browser / device
                     combination.




Friday, November 30, 12
Test every browser / device
                     combination.
       Chrome/Nexus 4 ≠ Chrome/Galaxy S III ≠ built-in
                 browser/Samsung S III




Friday, November 30, 12
Test every browser / device
                     combination.
               In our case: iPhone 3G faster than Galaxy S3


                                          WTF




Friday, November 30, 12
→ Don't develop with only one device type.
    → You will need to debug directly on your devices
                   (see Emma's talk).




Friday, November 30, 12
iOS
                •   Use Safari's Inspector via USB
                •   Enable debugging in your phone settings
                •   Enable Develop menu in desktop Safari preferences
                •   Connect phone via USB
                •   Open inspector via Develop menu item


                Android
                •   Download Android SDK
                •   Enable USB web debugging on phone (Settings > Advanced > Developer tools)
                •   Connect phone via USB
                •   Use adb forward tcp:9222 localabstract:chrome_devtools_remote on the
                    command line to start a debugging server
                • Get a remote inspector running inside your desktop browser by navigating to
                    localhost:9222

                • Often proposed on the web, but: adb   logcat is not reliable for seeing
                    console.log   output

Friday, November 30, 12
Loading too many images will
            crash your browser




Friday, November 30, 12
What’s cool:
                          overflow: scroll
                            is working now.




Friday, November 30, 12
What’s cool:
                            overflow: scroll
                          is working now (Almost.)




Friday, November 30, 12
overflow: scroll
                          Avoid more than one top element




Friday, November 30, 12
overflow: scroll
                  Use it together with -webkit-overflow-
                scrolling: touch to enable native scrolling
                       with bounce and momentum




Friday, November 30, 12
overflow: scroll
                          Build a fallback solution if you need to
                                   support older devices




Friday, November 30, 12
scrollTop is broken on Android
                                (You can’t set it via JS.)
                    https://code.google.com/p/android/issues/detail?id=19625




Friday, November 30, 12
scrollTop is broken on Android
            No good solutions available:
              Libs like iScroll-4 don’t work reliably
              Fallback to a non-single-page app?
              Ignore and wait for browser updates?
              Use transforms instead?




Friday, November 30, 12
scrollTop is broken mkII
            = Many Android browsers reset the
            scrollTop property to 0 when appending a
            DOM element.




Friday, November 30, 12
300ms lag on tap events
            Mobile browsers wait for double-tap events.
            If you want a native app-like feeling: create
            your own tap event handling.




Friday, November 30, 12
Expect weird bugs
                          Some examples following…




Friday, November 30, 12
Expect weird bugs
                          Swallowed events (many browsers)




Friday, November 30, 12
Expect weird bugs
               A specific <div> had to wider than 355px to
                not break performance down completely
                                  (iOS)




Friday, November 30, 12
Expect weird bugs
                     Touch events were delivered to wrong
                    elements (Android, S III, built-in browser)




Friday, November 30, 12
Expect weird bugs
                  Facebooks new mobile comment widget
                 seems not to work on mobile (the desktop
                          version does, though)




Friday, November 30, 12
About performance…




Friday, November 30, 12
About performance…
       Don't forget your HTML/JS apps compete with native
                             apps.




Friday, November 30, 12
Requests may be very slow




Friday, November 30, 12
Requests may be very slow
                     Have HTML content preloaded if possible.
                    HTML strings in a JS map worked well for us.




Friday, November 30, 12
Add caching on server-side




Friday, November 30, 12
Add caching on server-side
                  Make your served content state-independent.
                        Use caching services, e.g. fastly.




Friday, November 30, 12
Make rendering fast




Friday, November 30, 12
Make rendering fast
     Prefer native scrolling and positioning over transforms




Friday, November 30, 12
Make rendering fast




Friday, November 30, 12
Make rendering fast
                               Avoid z-index




Friday, November 30, 12
Make rendering fast




Friday, November 30, 12
Make rendering fast
 Avoid big <div>s, their content may have to be cached in
               graphics memory as bitmap




Friday, November 30, 12
Make rendering fast




Friday, November 30, 12
Make rendering fast
     Avoid jQuery/Zepto's DOM manipulation methods like
       append() etc., as they traverse/copy whole DOM
                    structures on JS level.




Friday, November 30, 12
Make rendering fast




Friday, November 30, 12
Make rendering fast
     Use exactly sized images for smoother scrolling (might
      be much effort if you have to support many display
                            sizes…)




Friday, November 30, 12
Make rendering fast




Friday, November 30, 12
Make rendering fast
    Good news: CSS box-shadows and gradients are fast on
                       most devices.




Friday, November 30, 12
Make rendering fast




Friday, November 30, 12
Make rendering fast
    Good news: CSS box-shadows and gradients are fast on
                       most devices.

      (...but make them <10px wide. And use inset shadows
                 sparingly, and not over images.)




Friday, November 30, 12
Design for small displays




Friday, November 30, 12
iOS Human Interface
                               Guidelines




Friday, November 30, 12
“44 x 44 points is the comfortable minimum size
                          of a tappable UI element.”


                             http://bit.ly/V6OmO9




Friday, November 30, 12
Touchable UI areas
                            should be big




Friday, November 30, 12
Responsive design




Friday, November 30, 12
Responsive design
                      background-position: 50% 30%
                         background-size: cover
                          …fits landscape and portrait images.




Friday, November 30, 12
Responsive design
        Don’t forget to vary screen height when testing
                       CSS media queries




Friday, November 30, 12
Responsive design
        Don’t forget to vary screen height when testing
                       CSS media queries

                                 very low in landscape mode




Friday, November 30, 12
Responsive design
        Don’t forget to vary screen height when testing
                       CSS media queries

                                  very low in Facebook app




Friday, November 30, 12
Responsive design
        Don’t forget to vary screen height when testing
                       CSS media queries

                                  low because of toolbars :(




Friday, November 30, 12
Responsive design
       Don’t hide the address bar just because you can.




Friday, November 30, 12
Sebastian Burkhart

         github: opyh
         twitter: opyh
         app.net: hypo

         working at bitcrowd.net, Berlin




Friday, November 30, 12

More Related Content

Sebastian Burkhart — Berlin.apps.js Nov 2012 Talk

  • 1. Copilot Creating a mobile web app in 8 days: What we learned. Friday, November 30, 12
  • 2. Sebastian Burkhart github: opyh twitter: opyh app.net: hypo working at bitcrowd.net, Berlin Friday, November 30, 12
  • 3. Content: Technical & Design pitfalls to avoid Friday, November 30, 12
  • 4. = Checklist for your mobile projects Friday, November 30, 12
  • 12. App specs Minimal Rails app Backbone.Events Backbone.Router Zepto Friday, November 30, 12
  • 13. swipe.js Used for -like drill-down navigation and -like side-bar menu Friday, November 30, 12
  • 14. swipe.js Has touch event handlers + transform / transition CSS Friday, November 30, 12
  • 15. swipe.js Remove display: table-row for speed! Friday, November 30, 12
  • 16. Micro MVC framework Friday, November 30, 12
  • 17. Micro MVC framework Inspired by iOS UIKit ViewController classes Friday, November 30, 12
  • 18. Micro MVC framework UITabBarController + UINavigationControllers Friday, November 30, 12
  • 20. Your desktop browser lies. :) Friday, November 30, 12
  • 21. Test every browser / device combination. Friday, November 30, 12
  • 22. Test every browser / device combination. Chrome/Nexus 4 ≠ Chrome/Galaxy S III ≠ built-in browser/Samsung S III Friday, November 30, 12
  • 23. Test every browser / device combination. In our case: iPhone 3G faster than Galaxy S3 WTF Friday, November 30, 12
  • 24. → Don't develop with only one device type. → You will need to debug directly on your devices (see Emma's talk). Friday, November 30, 12
  • 25. iOS • Use Safari's Inspector via USB • Enable debugging in your phone settings • Enable Develop menu in desktop Safari preferences • Connect phone via USB • Open inspector via Develop menu item Android • Download Android SDK • Enable USB web debugging on phone (Settings > Advanced > Developer tools) • Connect phone via USB • Use adb forward tcp:9222 localabstract:chrome_devtools_remote on the command line to start a debugging server • Get a remote inspector running inside your desktop browser by navigating to localhost:9222 • Often proposed on the web, but: adb logcat is not reliable for seeing console.log output Friday, November 30, 12
  • 26. Loading too many images will crash your browser Friday, November 30, 12
  • 27. What’s cool: overflow: scroll is working now. Friday, November 30, 12
  • 28. What’s cool: overflow: scroll is working now (Almost.) Friday, November 30, 12
  • 29. overflow: scroll Avoid more than one top element Friday, November 30, 12
  • 30. overflow: scroll Use it together with -webkit-overflow- scrolling: touch to enable native scrolling with bounce and momentum Friday, November 30, 12
  • 31. overflow: scroll Build a fallback solution if you need to support older devices Friday, November 30, 12
  • 32. scrollTop is broken on Android (You can’t set it via JS.) https://code.google.com/p/android/issues/detail?id=19625 Friday, November 30, 12
  • 33. scrollTop is broken on Android No good solutions available: Libs like iScroll-4 don’t work reliably Fallback to a non-single-page app? Ignore and wait for browser updates? Use transforms instead? Friday, November 30, 12
  • 34. scrollTop is broken mkII = Many Android browsers reset the scrollTop property to 0 when appending a DOM element. Friday, November 30, 12
  • 35. 300ms lag on tap events Mobile browsers wait for double-tap events. If you want a native app-like feeling: create your own tap event handling. Friday, November 30, 12
  • 36. Expect weird bugs Some examples following… Friday, November 30, 12
  • 37. Expect weird bugs Swallowed events (many browsers) Friday, November 30, 12
  • 38. Expect weird bugs A specific <div> had to wider than 355px to not break performance down completely (iOS) Friday, November 30, 12
  • 39. Expect weird bugs Touch events were delivered to wrong elements (Android, S III, built-in browser) Friday, November 30, 12
  • 40. Expect weird bugs Facebooks new mobile comment widget seems not to work on mobile (the desktop version does, though) Friday, November 30, 12
  • 42. About performance… Don't forget your HTML/JS apps compete with native apps. Friday, November 30, 12
  • 43. Requests may be very slow Friday, November 30, 12
  • 44. Requests may be very slow Have HTML content preloaded if possible. HTML strings in a JS map worked well for us. Friday, November 30, 12
  • 45. Add caching on server-side Friday, November 30, 12
  • 46. Add caching on server-side Make your served content state-independent. Use caching services, e.g. fastly. Friday, November 30, 12
  • 47. Make rendering fast Friday, November 30, 12
  • 48. Make rendering fast Prefer native scrolling and positioning over transforms Friday, November 30, 12
  • 49. Make rendering fast Friday, November 30, 12
  • 50. Make rendering fast Avoid z-index Friday, November 30, 12
  • 51. Make rendering fast Friday, November 30, 12
  • 52. Make rendering fast Avoid big <div>s, their content may have to be cached in graphics memory as bitmap Friday, November 30, 12
  • 53. Make rendering fast Friday, November 30, 12
  • 54. Make rendering fast Avoid jQuery/Zepto's DOM manipulation methods like append() etc., as they traverse/copy whole DOM structures on JS level. Friday, November 30, 12
  • 55. Make rendering fast Friday, November 30, 12
  • 56. Make rendering fast Use exactly sized images for smoother scrolling (might be much effort if you have to support many display sizes…) Friday, November 30, 12
  • 57. Make rendering fast Friday, November 30, 12
  • 58. Make rendering fast Good news: CSS box-shadows and gradients are fast on most devices. Friday, November 30, 12
  • 59. Make rendering fast Friday, November 30, 12
  • 60. Make rendering fast Good news: CSS box-shadows and gradients are fast on most devices. (...but make them <10px wide. And use inset shadows sparingly, and not over images.) Friday, November 30, 12
  • 61. Design for small displays Friday, November 30, 12
  • 62. iOS Human Interface Guidelines Friday, November 30, 12
  • 63. “44 x 44 points is the comfortable minimum size of a tappable UI element.” http://bit.ly/V6OmO9 Friday, November 30, 12
  • 64. Touchable UI areas should be big Friday, November 30, 12
  • 66. Responsive design background-position: 50% 30% background-size: cover …fits landscape and portrait images. Friday, November 30, 12
  • 67. Responsive design Don’t forget to vary screen height when testing CSS media queries Friday, November 30, 12
  • 68. Responsive design Don’t forget to vary screen height when testing CSS media queries very low in landscape mode Friday, November 30, 12
  • 69. Responsive design Don’t forget to vary screen height when testing CSS media queries very low in Facebook app Friday, November 30, 12
  • 70. Responsive design Don’t forget to vary screen height when testing CSS media queries low because of toolbars :( Friday, November 30, 12
  • 71. Responsive design Don’t hide the address bar just because you can. Friday, November 30, 12
  • 72. Sebastian Burkhart github: opyh twitter: opyh app.net: hypo working at bitcrowd.net, Berlin Friday, November 30, 12