Bottle - Mobile UI Library

664 views

Published on

The Mobile UI Library - Bottle is a mobile HTML5 framework javascript library, provides a lot of Mobile UI components.

The slides contains a lot of animations which can not proper displayed on slideshare, please download the original file, or watch it on youtube: http://www.youtube.com/watch?v=GnqJXqarnW0

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
664
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Bottle - Mobile UI Library

  1. 1. Montie TsaiZordius Chen
  2. 2. WHO WE AREMONTIE TSAI ZORDIUS CHEN• Yahoo APAC E- • Yahoo APAC E- Commerce Mobile Team Commerce Mobile Team• 4 years in Yahoo • 9 years in Yahoo
  3. 3. MOBILE WEB UI TRENDMobile App PC Web
  4. 4. DESIGN CONCEPTApp-Like Finger-Friendly Tools  Page  Carousel  Loader  Shortcut  Slide Tab Multi-Device  Pushpop  HTML Viewer  Overlay  PhotoGrid
  5. 5. TO FIT CONTENT IN SMALL SCREEN HEADER HEADER 2 1
  6. 6. PAGE WIDGET• Basic page unit Header• Auto fit screen size list• Header/Footer list  Fixed setting list list list list Footer list list list Yahoo! 7 Footer Presentation2/8/2013 , Confidential
  7. 7. SHORTCUT & OVERLAYWIDGET• Unveil (Hidden menu)• Overlay (Action dialog)• Push (shortcut) 1 2 2/8/2013 8
  8. 8. PUSH/POP EXTENSION• Native app behavior Back• Available for page, List L1 List L2 overlay, and shortcut list list list list list list list list list list list list2/8/2013 9
  9. 9. USE EVERY AREA IN THE SMALL SCREEN
  10. 10. SLIDE TAB WIDGET• Fully utilize every area in the screen• Touch friendly module Tab1 Tab2 Tab3 switch 3 4 2 1 2/8/2013 11
  11. 11. CAROUSEL WIDGET• Module display• Photos display• H/V lock• Momentum support2/8/2013 12
  12. 12. LOADER WIDGET• Light weight AJAX List 1• Load more List 2 List 3 List 4 List 5 List 6 List 10 7 List 11 8 List 12 13 List 9Yahoo! Presentation, Confidential 2/8/2013 13 Load more
  13. 13. PHOTO GRID WIDGET• Vertical• Horizontal (TBD)• Square (TBD)• Modern UI for photo display• Append supported2/8/2013 14
  14. 14. MULTI-DEVICE CONCEPT I
  15. 15. MULTI-DEVICE CONCEPT IIPut UGC in mobileversion• Special treatment for images• Seamless experience
  16. 16. HTML VIEWER WIDGET• Zoom in/out for Header images• ScollView height sync 172/8/2013
  17. 17. LIVE DEMO IN OUR PROJECT
  18. 18. MOBILE DESIGNCONCEPT
  19. 19. MOBILE DESIGN CONCEPTDesktop HeaderVersion Side Footer
  20. 20. MOBILE DESIGN CONCEPTDesktop HeaderVersion Side Footer
  21. 21. MOBILE DESIGN CONCEPTKeep HeaderMajorContent Side Secondary Major Footer
  22. 22. MOBILE DESIGN CONCEPTMobile HeaderVersion Footer
  23. 23. MOBILE DESIGN CONCEPTMobile HeaderVersion Viewport Footer
  24. 24. MOBILE DESIGN CONCEPTPROS • Simple • FastCONS • Weak navigation • Long gesture distance • Few ChoiceThe Idea  Provide more choice
  25. 25. MOBILE DESIGN CONCEPTPersistent HeaderHeader Viewport Footer
  26. 26. MOBILE DESIGN CONCEPTPersistent HeaderHeader Viewport Footer
  27. 27. MOBILE DESIGN CONCEPTPersistent HeaderHeader Shortcut Shortcut Footer
  28. 28. MOBILE DESIGN CONCEPTPersistent HeaderHeader Navigation Login Main Menu Personalize Pop Function Related Footer
  29. 29. MOBILE DESIGN CONCEPTCommon Design Patterns 1. Persistent Header 2. Shortcut Menu
  30. 30. MOBILE DESIGN CONCEPT2 Dimension Header Viewport Footer
  31. 31. MOBILE DESIGN CONCEPT2 Dimension: HeaderCarousel Viewport Footer
  32. 32. MOBILE DESIGN CONCEPT2 Dimension: Header HeaderpushView Viewport Footer Footer
  33. 33. MOBILE DESIGN CONCEPTCommon Design Patterns 1. Persistent Header 2. Shortcut Menu 3. PushView 4. Carousel
  34. 34. MOBILE DESIGN CONCEPTShortcut: Push Shortcut: Unveil Header HeaderShortcut Shortcut Viewport Viewport Page Page
  35. 35. MOBILE DESIGN CONCEPTCommon Design Patterns 1. Persistent Header 2. Shortcut Menu 3. PushView 4. CarouselMajor requirements • Position fixed Widget • Move major content (Push/Pop/Shortcut) • Push/Pop view • Easy to use and reuse
  36. 36. MOBILE DESIGN CONCEPTEasy to use and reuse • YUI based
  37. 37. MOBILE DESIGN CONCEPTEasy to use and reuse • Initialize Widgets with data-role • Customized behaviors with data-attribute • Customize look and feel with CSS
  38. 38. DESIGNCHALLENGES
  39. 39. DESIGN CHALLENGESiOS5 supports Headerposition: fixed Viewport Footer
  40. 40. DESIGN CHALLENGESSome devices Headernot support Viewportposition: fixed Footer
  41. 41. DESIGN CHALLENGESSome devices Headerpartial support Viewportposition: fixed Header Footer
  42. 42. DESIGN CHALLENGESPosition Fixed Support • CSS position: fixed not 100% work on all devicesNone native scroll solution • Simulate scroll behavior by touch events • iScroll • yui3 scrollView • PROS • Work on all devices • CONS • Performance • Break native scroll
  43. 43. DESIGN CHALLENGESscrollView Headersolution Viewport scrollView Footer
  44. 44. DESIGN CHALLENGESCustomization options Header Header Viewport scrollView scrollView scrollView FooterheaderFixed: true/falsefooterFixed: true/false
  45. 45. DESIGN CHALLENGESAlign with YUI widget-stdmod • Header • Body • FooterWidgets with fixed header/footer support • Page • Shortcut • Overlay•These widgets should also support push/pop
  46. 46. DESIGN CHALLENGESThese widgets should also support push/popShortcut Header HeaderPage HeaderOverlay Shortcut Shortcut Viewport
  47. 47. DESIGN CHALLENGESWhen Device Orientation ChangesPage: H + W HeaderShortcut: H Header Header HeaderOverlay: Center Shortcut Shortcut Header Shortcut
  48. 48. DESIGN CHALLENGESFunction Analyze Page Shortcut OverlayFixed header/Footer Fixed header/Footer Fixed header/FooterPush/Pop Push/Pop Push/PopPositioning (cowork with Positioning (cowork with Positioning (standalone,shortcut) page) keep center)Sizing (full) Sizing (height) Sizing (full/original)
  49. 49. DESIGN CHALLENGESFunction Analyze Page Shortcut OverlayFixed header/Footer Fixed header/Footer Fixed header/FooterPush/Pop Push/Pop Push/PopPositioning (cowork with Positioning (cowork with Positioning (standalone,shortcut) page) keep center)Sizing (full) Sizing (height) Sizing (full/original)
  50. 50. DESIGN CHALLENGES A Parent ClassFunction Analyze Fixed header/Footer Push/Pop Page Shortcut OverlayPositioning (cowork with Positioning (cowork with Positioning (standalone,shortcut) page) keep center)Sizing (full) Sizing (height) Sizing (full/original)
  51. 51. DESIGN CHALLENGES A Parent Class YUI: widgetFunction Analyze Fixed header/Footer Push/Pop Page Shortcut OverlayPositioning (cowork with Positioning (cowork with Positioning (standalone,shortcut) page) keep center)Sizing (full) Sizing (height) Sizing (full/original)
  52. 52. DESIGN CHALLENGES A Parent Class YUI: widgetFunction Analyze Fixed header/Footer Push/Pop YUI: widget-position Page Shortcut OverlayPositioning (cowork with Positioning (cowork with Positioning (standalone,shortcut) page) keep center)Sizing (full) Sizing (height) Sizing (full/original)
  53. 53. DESIGN CHALLENGES YUI: widgetTraditionalinheritance YUI: widget-position A Parent Class Fixed header/Footer Push/Pop Page Shortcut Overlay
  54. 54. DESIGN CHALLENGES YUI: widgetTraditionalinheritance YUI: widget-position Fixed Header/Footer PushPop Page Shortcut Overlay
  55. 55. DESIGN CHALLENGESTraditionalinheritance YUI: widget YUI: widget YUI: widget-position YUI: widget-position Fixed Header/Footer PushPop PushPop Fixed Header/Footer
  56. 56. DESIGN CHALLENGESYUI extend() 1 base parent Class + many extensionsYUI plug() An Instance + many plugins
  57. 57. DESIGN CHALLENGESYUI extend() YUI: widget YUI: widget YUI: widget YUI: widget-position PushPop YUI: widget-position Fixed Header/Footer A New Class Fixed Header/Footer PushPop PushPop Page
  58. 58. PERFORMANCECHALLENGES
  59. 59. PERFORMANCE CHALLENGESNone native scroll solution = SLOW Everything based on YUI scrollView Page Shortcut Overlay CarouselMobile Auction homepage 12 scrollViews in one page 1 touch = trigger 12 event handler
  60. 60. PERFORMANCE CHALLENGESMake scroll fast Reduce scrollViews Disable hidden widgets Create scrollView when see it Using native scroll Page: Graceful Downgrade
  61. 61. PERFORMANCE CHALLENGESLong initialize timeMobile Auction homepage 1 page + 1 container 2 shortcut + 2 container 3 overlay + 3 container 2 slidetab 6 carousel 13 scrollView = 33 widgets in 1 page
  62. 62. PERFORMANCE CHALLENGESLong initialize time Delay Widget CreationMobile Auction homepage 1 page + 1 container 2 shortcut + 2 container Lazy load 3 overlay + 3 container 2 slidetab 6 carousel 13 scrollView = 33 widgets in 1 page
  63. 63. PERFORMANCE CHALLENGESLong initialize time Delay Widget CreationMobile Auction homepage 1 page + 1 container 2 shortcut + 2 container Lazy load 3 overlay + 3 container 2 slidetab 6 carousel 13 scrollView = 33 widgets in 1 page
  64. 64. PERFORMANCE CHALLENGESLong initialize time Delay Widget CreationMobile Auction homepage 1 page + 1 container 2 slidetab Lazy load 2 carousel 5 scrollView = initialize 11 widgets in 1 page (66% saved)
  65. 65. PERFORMANCE CHALLENGESLazy load using html comment <!-- ………………… --> All contents inside comment will not rendered All widgets inside comment will not initialized tabView.on(‘tabChange’, doLazyLoad);doLazyLoad() Remove html comment (change innerHTML) initialize all widgets in the Node
  66. 66. DEVICE ORIENTATIONCHALLENGES
  67. 67. DEVICE ORIENTATION CHALLENGESDevice Orientation Handling All widgets listen on the event One event handler do everything  Only Page, Shortcut, Overlay  Only handle visible WidgetsHow about other widgets?
  68. 68. DEVICE ORIENTATION CHALLENGESDevice Orientation One event handlerHandling Page Page Loop all Shortcut Carousel Loop all Carousels Viewer Loop all Viewers Loop all Slidetabs Slidetab Carousel
  69. 69. DEVICE ORIENTATION CHALLENGESDevice Orientation One event handlerHandling Page Page Loop all Shortcut Carousel Loop all Carousels Viewer Loop all Viewers Loop all Slidetabs Slidetab Carousel
  70. 70. DEVICE ORIENTATION CHALLENGESDevice Orientation One event handlerHandling Page Page Loop all Shortcut Carousel Loop all Carousels Viewer Loop all Viewers Loop all Slidetabs Slidetab Carousel
  71. 71. DEVICE ORIENTATION CHALLENGESDevice Orientation One event handlerHandling Page Page Loop all Shortcut Carousel Loop all Carousels Viewer Loop all Viewers Loop all Slidetabs Slidetab Carousel
  72. 72. DEVICE ORIENTATION CHALLENGESDevice Orientation One event handlerHandling Page Page Loop all Shortcut Carousel Loop all Carousels Viewer Loop all Viewers Loop all Slidetabs Slidetab Carousel
  73. 73. DEVICE ORIENTATION CHALLENGESDevice Orientation One event handlerHandling Page Page Shortcut Carousel Overlay Viewer  Listen on parent Slidetab Carousel
  74. 74. DEVICE ORIENTATION CHALLENGESDevice Orientation One event handlerHandling Page Page Shortcut Carousel Overlay Viewer  Listen on parent Slidetab Carousel
  75. 75. DEVICE ORIENTATION CHALLENGESDevice Orientation One event handlerHandling Page Page Shortcut Carousel Overlay Viewer  Listen on parent Slidetab Carousel
  76. 76. DEVICE ORIENTATION CHALLENGESDevice Orientation One event handlerHandling Page Page Shortcut Carousel Overlay Viewer  Listen on parent Can handle any Slidetab Carousel kind of Widget stack
  77. 77. CONCLUSION• Lots challenges for mobile web • Performance • Device orientation • Cross-device support All DONE by BOTTLE TRY IT NOW
  78. 78. HOW TO GET IT Github https://github.com/zordius/yui3- gallery/tree/master/src/gallery-bottle Document http://zordius.github.com/yui3-gallery/gallery-bottle/ Video online http://www.youtube.com/watch?v=ENQBkWwoMpk
  79. 79. THANK YOUQ&A

×