0
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, Berli...
Content: Technical & Design                          pitfalls to avoidFriday, November 30, 12
= Checklist for your mobile                          projectsFriday, November 30, 12
http://m.moviepilot.comFriday, November 30, 12
Friday, November 30, 12
Friday, November 30, 12
Friday, November 30, 12
Friday, November 30, 12
Friday, November 30, 12
App specsFriday, November 30, 12
App specs                           Minimal Rails app                           Backbone.Events                           ...
swipe.js                    Used for     -like drill-down navigation                          and     -like side-bar menuF...
swipe.js                            Has touch event handlers +                          transform / transition CSSFriday, ...
swipe.js             Remove display: table-row for speed!Friday, November 30, 12
Micro MVC frameworkFriday, November 30, 12
Micro MVC framework                Inspired by iOS UIKit ViewController classesFriday, November 30, 12
Micro MVC framework            UITabBarController + UINavigationControllersFriday, November 30, 12
Technical lessonsFriday, 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        ...
Test every browser / device                     combination.               In our case: iPhone 3G faster than Galaxy S3   ...
→ Dont develop with only one device type.    → You will need to debug directly on your devices                   (see Emma...
iOS                •   Use Safaris Inspector via USB                •   Enable debugging in your phone settings           ...
Loading too many images will            crash your browserFriday, 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...
overflow: scroll                          Avoid more than one top elementFriday, November 30, 12
overflow: scroll                  Use it together with -webkit-overflow-                scrolling: touch to enable native ...
overflow: scroll                          Build a fallback solution if you need to                                   suppo...
scrollTop is broken on Android                                (You can’t set it via JS.)                    https://code.g...
scrollTop is broken on Android            No good solutions available:              Libs like iScroll-4 don’t work reliabl...
scrollTop is broken mkII            = Many Android browsers reset the            scrollTop property to 0 when appending a ...
300ms lag on tap events            Mobile browsers wait for double-tap events.            If you want a native app-like fe...
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 comp...
Expect weird bugs                     Touch events were delivered to wrong                    elements (Android, S III, bu...
Expect weird bugs                  Facebooks new mobile comment widget                 seems not to work on mobile (the de...
About performance…Friday, November 30, 12
About performance…       Dont forget your HTML/JS apps compete with native                             apps.Friday, Novemb...
Requests may be very slowFriday, November 30, 12
Requests may be very slow                     Have HTML content preloaded if possible.                    HTML strings in ...
Add caching on server-sideFriday, November 30, 12
Add caching on server-side                  Make your served content state-independent.                        Use caching...
Make rendering fastFriday, November 30, 12
Make rendering fast     Prefer native scrolling and positioning over transformsFriday, November 30, 12
Make rendering fastFriday, November 30, 12
Make rendering fast                               Avoid z-indexFriday, November 30, 12
Make rendering fastFriday, November 30, 12
Make rendering fast Avoid big <div>s, their content may have to be cached in               graphics memory as bitmapFriday...
Make rendering fastFriday, November 30, 12
Make rendering fast     Avoid jQuery/Zeptos DOM manipulation methods like       append() etc., as they traverse/copy whole...
Make rendering fastFriday, November 30, 12
Make rendering fast     Use exactly sized images for smoother scrolling (might      be much effort if you have to support m...
Make rendering fastFriday, November 30, 12
Make rendering fast    Good news: CSS box-shadows and gradients are fast on                       most devices.Friday, Nov...
Make rendering fastFriday, November 30, 12
Make rendering fast    Good news: CSS box-shadows and gradients are fast on                       most devices.      (...b...
Design for small displaysFriday, November 30, 12
iOS Human Interface                               GuidelinesFriday, November 30, 12
“44 x 44 points is the comfortable minimum size                          of a tappable UI element.”                       ...
Touchable UI areas                            should be bigFriday, November 30, 12
Responsive designFriday, November 30, 12
Responsive design                      background-position: 50% 30%                         background-size: cover        ...
Responsive design        Don’t forget to vary screen height when testing                       CSS media queriesFriday, No...
Responsive design        Don’t forget to vary screen height when testing                       CSS media queries          ...
Responsive design        Don’t forget to vary screen height when testing                       CSS media queries          ...
Responsive design        Don’t forget to vary screen height when testing                       CSS media queries          ...
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, Berli...
Upcoming SlideShare
Loading in...5
×

Sebastian Burkhart — Berlin.apps.js Nov 2012 Talk

1,289

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,289
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Sebastian Burkhart — Berlin.apps.js Nov 2012 Talk"

  1. 1. Copilot Creating a mobile web app in 8 days: What we learned.Friday, November 30, 12
  2. 2. Sebastian Burkhart github: opyh twitter: opyh app.net: hypo working at bitcrowd.net, BerlinFriday, November 30, 12
  3. 3. Content: Technical & Design pitfalls to avoidFriday, November 30, 12
  4. 4. = Checklist for your mobile projectsFriday, November 30, 12
  5. 5. http://m.moviepilot.comFriday, November 30, 12
  6. 6. Friday, November 30, 12
  7. 7. Friday, November 30, 12
  8. 8. Friday, November 30, 12
  9. 9. Friday, November 30, 12
  10. 10. Friday, November 30, 12
  11. 11. App specsFriday, November 30, 12
  12. 12. App specs Minimal Rails app Backbone.Events Backbone.Router ZeptoFriday, November 30, 12
  13. 13. swipe.js Used for -like drill-down navigation and -like side-bar menuFriday, November 30, 12
  14. 14. swipe.js Has touch event handlers + transform / transition CSSFriday, November 30, 12
  15. 15. swipe.js Remove display: table-row for speed!Friday, November 30, 12
  16. 16. Micro MVC frameworkFriday, November 30, 12
  17. 17. Micro MVC framework Inspired by iOS UIKit ViewController classesFriday, November 30, 12
  18. 18. Micro MVC framework UITabBarController + UINavigationControllersFriday, November 30, 12
  19. 19. Technical lessonsFriday, November 30, 12
  20. 20. Your desktop browser lies. :)Friday, November 30, 12
  21. 21. Test every browser / device combination.Friday, November 30, 12
  22. 22. Test every browser / device combination. Chrome/Nexus 4 ≠ Chrome/Galaxy S III ≠ built-in browser/Samsung S IIIFriday, November 30, 12
  23. 23. Test every browser / device combination. In our case: iPhone 3G faster than Galaxy S3 WTFFriday, November 30, 12
  24. 24. → Dont develop with only one device type. → You will need to debug directly on your devices (see Emmas talk).Friday, November 30, 12
  25. 25. iOS • Use Safaris 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 outputFriday, November 30, 12
  26. 26. Loading too many images will crash your browserFriday, November 30, 12
  27. 27. What’s cool: overflow: scroll is working now.Friday, November 30, 12
  28. 28. What’s cool: overflow: scroll is working now (Almost.)Friday, November 30, 12
  29. 29. overflow: scroll Avoid more than one top elementFriday, November 30, 12
  30. 30. overflow: scroll Use it together with -webkit-overflow- scrolling: touch to enable native scrolling with bounce and momentumFriday, November 30, 12
  31. 31. overflow: scroll Build a fallback solution if you need to support older devicesFriday, November 30, 12
  32. 32. scrollTop is broken on Android (You can’t set it via JS.) https://code.google.com/p/android/issues/detail?id=19625Friday, November 30, 12
  33. 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. 34. scrollTop is broken mkII = Many Android browsers reset the scrollTop property to 0 when appending a DOM element.Friday, November 30, 12
  35. 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. 36. Expect weird bugs Some examples following…Friday, November 30, 12
  37. 37. Expect weird bugs Swallowed events (many browsers)Friday, November 30, 12
  38. 38. Expect weird bugs A specific <div> had to wider than 355px to not break performance down completely (iOS)Friday, November 30, 12
  39. 39. Expect weird bugs Touch events were delivered to wrong elements (Android, S III, built-in browser)Friday, November 30, 12
  40. 40. Expect weird bugs Facebooks new mobile comment widget seems not to work on mobile (the desktop version does, though)Friday, November 30, 12
  41. 41. About performance…Friday, November 30, 12
  42. 42. About performance… Dont forget your HTML/JS apps compete with native apps.Friday, November 30, 12
  43. 43. Requests may be very slowFriday, November 30, 12
  44. 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. 45. Add caching on server-sideFriday, November 30, 12
  46. 46. Add caching on server-side Make your served content state-independent. Use caching services, e.g. fastly.Friday, November 30, 12
  47. 47. Make rendering fastFriday, November 30, 12
  48. 48. Make rendering fast Prefer native scrolling and positioning over transformsFriday, November 30, 12
  49. 49. Make rendering fastFriday, November 30, 12
  50. 50. Make rendering fast Avoid z-indexFriday, November 30, 12
  51. 51. Make rendering fastFriday, November 30, 12
  52. 52. Make rendering fast Avoid big <div>s, their content may have to be cached in graphics memory as bitmapFriday, November 30, 12
  53. 53. Make rendering fastFriday, November 30, 12
  54. 54. Make rendering fast Avoid jQuery/Zeptos DOM manipulation methods like append() etc., as they traverse/copy whole DOM structures on JS level.Friday, November 30, 12
  55. 55. Make rendering fastFriday, November 30, 12
  56. 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. 57. Make rendering fastFriday, November 30, 12
  58. 58. Make rendering fast Good news: CSS box-shadows and gradients are fast on most devices.Friday, November 30, 12
  59. 59. Make rendering fastFriday, November 30, 12
  60. 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. 61. Design for small displaysFriday, November 30, 12
  62. 62. iOS Human Interface GuidelinesFriday, November 30, 12
  63. 63. “44 x 44 points is the comfortable minimum size of a tappable UI element.” http://bit.ly/V6OmO9Friday, November 30, 12
  64. 64. Touchable UI areas should be bigFriday, November 30, 12
  65. 65. Responsive designFriday, November 30, 12
  66. 66. Responsive design background-position: 50% 30% background-size: cover …fits landscape and portrait images.Friday, November 30, 12
  67. 67. Responsive design Don’t forget to vary screen height when testing CSS media queriesFriday, November 30, 12
  68. 68. Responsive design Don’t forget to vary screen height when testing CSS media queries very low in landscape modeFriday, November 30, 12
  69. 69. Responsive design Don’t forget to vary screen height when testing CSS media queries very low in Facebook appFriday, November 30, 12
  70. 70. Responsive design Don’t forget to vary screen height when testing CSS media queries low because of toolbars :(Friday, November 30, 12
  71. 71. Responsive design Don’t hide the address bar just because you can.Friday, November 30, 12
  72. 72. Sebastian Burkhart github: opyh twitter: opyh app.net: hypo working at bitcrowd.net, BerlinFriday, November 30, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×