1. Montie TsaiZordius Chen

2. WHO WE AREMONTIE TSAIZORDIUS CHEN Yahoo APAC E- Yahoo APAC E-Commerce Mobile Team Commerce Mobile Team 4 years in Yahoo 9 years in Yahoo 3. MOBILE WEB UI TRENDMobile AppPC Web 4. DESIGN CONCEPTApp-Like Finger-Friendly Tools Page Carousel Loader Shortcut Slide Tab Multi-Device Pushpop HTML Viewer Overlay PhotoGrid 5. TO FIT CONTENT IN SMALL SCREEN HEADERHEADER 21 6. PAGE WIDGET Basic page unitHeader Auto fit screen size list Header/Footerlist Fixed setting list list list listFooter list list list Yahoo! 7Footer Presentation2/8/2013 , Confidential 7. SHORTCUT & OVERLAYWIDGET Unveil (Hidden menu) Overlay (Action dialog) Push (shortcut)12 2/8/2013 8 8. PUSH/POP EXTENSION Native app behavior Back Available for page, List L1 List L2overlay, and shortcutlistlistlistlistlistlistlistlistlistlistlistlist2/8/20139 9. USE EVERY AREA IN THE SMALL SCREEN 10. SLIDE TAB WIDGET Fully utilize everyarea in the screen Touch friendly module Tab1 Tab2 Tab3switch3421 2/8/201311 11. CAROUSEL WIDGETModule displayPhotos displayH/V lockMomentum support2/8/201312 12. LOADER WIDGET Light weight AJAX List 1 Load moreList 2List 3List 4List 5List 6List 10 7List 11 8List 12 13List 9Yahoo! Presentation, Confidential 2/8/201313 Load more 13. PHOTO GRID WIDGET Vertical Horizontal (TBD) Square (TBD) Modern UI forphoto display Appendsupported2/8/2013 14 14. MULTI-DEVICE CONCEPT I 15. MULTI-DEVICE CONCEPT IIPut UGC in mobileversion Special treatment for images Seamless experience 16. HTML VIEWER WIDGET Zoom in/out forHeaderimages ScollView height sync 172/8/2013 17. LIVE DEMO IN OUR PROJECT 18. MOBILE DESIGNCONCEPT 19. MOBILE DESIGN CONCEPTDesktop HeaderVersion SideFooter 20. MOBILE DESIGN CONCEPTDesktop HeaderVersion SideFooter 21. MOBILE DESIGN CONCEPTKeepHeaderMajorContent Side Secondary MajorFooter 22. MOBILE DESIGN CONCEPTMobile HeaderVersionFooter 23. MOBILE DESIGN CONCEPTMobile HeaderVersion ViewportFooter 24. MOBILE DESIGN CONCEPTPROS Simple FastCONS Weak navigation Long gesture distance Few ChoiceThe Idea Provide more choice 25. MOBILE DESIGN CONCEPTPersistent HeaderHeader ViewportFooter 26. MOBILE DESIGN CONCEPTPersistent HeaderHeader ViewportFooter 27. MOBILE DESIGN CONCEPTPersistentHeaderHeader ShortcutShortcutFooter 28. MOBILE DESIGN CONCEPTPersistentHeaderHeaderNavigationLoginMain MenuPersonalize Pop FunctionRelatedFooter 29. MOBILE DESIGN CONCEPTCommon Design Patterns1. Persistent Header2. Shortcut Menu 30. MOBILE DESIGN CONCEPT2 DimensionHeader ViewportFooter 31. MOBILE DESIGN CONCEPT2 Dimension: HeaderCarousel ViewportFooter 32. MOBILE DESIGN CONCEPT2 Dimension: Header HeaderpushView ViewportFooterFooter 33. MOBILE DESIGN CONCEPTCommon Design Patterns1. Persistent Header2. Shortcut Menu3. PushView4. Carousel 34. MOBILE DESIGN CONCEPTShortcut: PushShortcut: Unveil Header HeaderShortcutShortcut ViewportViewportPage Page 35. MOBILE DESIGN CONCEPTCommon Design Patterns1. Persistent Header2. Shortcut Menu3. PushView4. CarouselMajor requirementsPosition fixed WidgetMove major content (Push/Pop/Shortcut)Push/Pop viewEasy to use and reuse 36. MOBILE DESIGN CONCEPTEasy to use and reuse YUI based 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. DESIGNCHALLENGES 39. DESIGN CHALLENGESiOS5 supports Headerposition: fixedViewport Footer 40. DESIGN CHALLENGESSome devicesHeadernot supportViewportposition: fixed Footer 41. DESIGN CHALLENGESSome devicesHeaderpartial supportViewportposition: fixedHeader Footer 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. DESIGN CHALLENGESscrollViewHeadersolution ViewportscrollView Footer 44. DESIGN CHALLENGESCustomization optionsHeader HeaderViewportscrollViewscrollView scrollView FooterheaderFixed: true/falsefooterFixed: true/false 45. DESIGN CHALLENGESAlign with YUI widget-stdmod Header Body FooterWidgets with fixed header/footer support Page Shortcut OverlayThese widgets should also support push/pop 46. DESIGN CHALLENGESThese widgets should also support push/popShortcut HeaderHeaderPageHeaderOverlay Shortcut ShortcutViewport 47. DESIGN CHALLENGESWhen Device Orientation ChangesPage: H + W HeaderShortcut: HHeaderHeaderHeaderOverlay: CenterShortcutShortcut HeaderShortcut 48. DESIGN CHALLENGESFunction AnalyzePage Shortcut OverlayFixed header/FooterFixed header/FooterFixed 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. DESIGN CHALLENGESFunction AnalyzePage Shortcut OverlayFixed header/FooterFixed header/FooterFixed 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. DESIGN CHALLENGESA Parent ClassFunction Analyze Fixed header/Footer Push/PopPage Shortcut OverlayPositioning (cowork with Positioning (cowork with Positioning (standalone,shortcut)page)keep center)Sizing (full)Sizing (height)Sizing (full/original) 51. DESIGN CHALLENGESA Parent Class YUI: widgetFunction Analyze Fixed header/Footer Push/PopPage Shortcut OverlayPositioning (cowork with Positioning (cowork with Positioning (standalone,shortcut)page)keep center)Sizing (full)Sizing (height)Sizing (full/original) 52. DESIGN CHALLENGESA Parent Class YUI: widgetFunction Analyze Fixed header/Footer Push/Pop YUI: widget-positionPage Shortcut OverlayPositioning (cowork with Positioning (cowork with Positioning (standalone,shortcut)page)keep center)Sizing (full)Sizing (height)Sizing (full/original) 53. DESIGN CHALLENGESYUI: widgetTraditionalinheritance YUI: widget-position A Parent ClassFixed header/FooterPush/PopPage ShortcutOverlay 54. DESIGN CHALLENGESYUI: widgetTraditionalinheritance YUI: widget-positionFixed Header/Footer PushPopPage ShortcutOverlay 55. DESIGN CHALLENGESTraditionalinheritanceYUI: widgetYUI: widgetYUI: widget-position YUI: widget-positionFixed Header/Footer PushPop PushPop Fixed Header/Footer 56. DESIGN CHALLENGESYUI extend()1 base parent Class+ many extensionsYUI plug()An Instance+ many plugins 57. DESIGN CHALLENGESYUI extend() YUI: widgetYUI: widget YUI: widget YUI: widget-positionPushPopYUI: widget-position Fixed Header/FooterA New Class Fixed Header/FooterPushPop PushPopPage 58. PERFORMANCECHALLENGES 59. PERFORMANCE CHALLENGESNone native scroll solution = SLOWEverything based on YUI scrollView Page Shortcut Overlay CarouselMobile Auction homepage12 scrollViews in one page1 touch = trigger 12 event handler 60. PERFORMANCE CHALLENGESMake scroll fastReduce scrollViewsDisable hidden widgetsCreate scrollView when see itUsing native scrollPage: Graceful Downgrade 61. PERFORMANCE CHALLENGESLong initialize timeMobile Auction homepage1 page + 1 container2 shortcut + 2 container3 overlay + 3 container2 slidetab6 carousel13 scrollView= 33 widgets in 1 page 62. PERFORMANCE CHALLENGESLong initialize time Delay Widget CreationMobile Auction homepage1 page + 1 container2 shortcut + 2 container Lazy load3 overlay + 3 container2 slidetab6 carousel13 scrollView= 33 widgets in 1 page 63. PERFORMANCE CHALLENGESLong initialize time Delay Widget CreationMobile Auction homepage1 page + 1 container2 shortcut + 2 container Lazy load3 overlay + 3 container2 slidetab6 carousel13 scrollView= 33 widgets in 1 page 64. PERFORMANCE CHALLENGESLong initialize timeDelay Widget CreationMobile Auction homepage1 page + 1 container2 slidetabLazy load2 carousel5 scrollView= initialize 11 widgets in 1 page(66% saved) 65. PERFORMANCE CHALLENGESLazy loadusing html commentAll contents inside comment will not renderedAll widgets inside comment will not initializedtabView.on(tabChange, doLazyLoad);doLazyLoad()Remove html comment (change innerHTML)initialize all widgets in the Node 66. DEVICE ORIENTATIONCHALLENGES 67. DEVICE ORIENTATION CHALLENGESDevice Orientation HandlingAll widgets listen on the eventOne event handler do everything Only Page, Shortcut, Overlay Only handle visible WidgetsHow about other widgets? 68. DEVICE ORIENTATION CHALLENGESDevice Orientation One event handlerHandling PagePage Loop all ShortcutCarousel Loop all Carousels Viewer Loop all Viewers Loop all Slidetabs SlidetabCarousel 69. DEVICE ORIENTATION CHALLENGESDevice Orientation One event handlerHandling PagePage Loop all ShortcutCarousel Loop all Carousels Viewer Loop all Viewers Loop all Slidetabs SlidetabCarousel 70. DEVICE ORIENTATION CHALLENGESDevice Orientation One event handlerHandling PagePage Loop all ShortcutCarousel Loop all Carousels Viewer Loop all Viewers Loop all Slidetabs SlidetabCarousel 71. DEVICE ORIENTATION CHALLENGESDevice Orientation One event handlerHandling PagePage Loop all ShortcutCarousel Loop all Carousels Viewer Loop all Viewers Loop all Slidetabs SlidetabCarousel 72. DEVICE ORIENTATION CHALLENGESDevice Orientation One event handlerHandling Page PageLoop all Shortcut Carousel Loop all CarouselsViewer Loop all Viewers Loop all SlidetabsSlidetabCarousel 73. DEVICE ORIENTATION CHALLENGESDevice Orientation One event handlerHandling PagePage ShortcutCarousel Overlay Viewer Listen on parent SlidetabCarousel 74. DEVICE ORIENTATION CHALLENGESDevice Orientation One event handlerHandling PagePage ShortcutCarousel Overlay Viewer Listen on parent SlidetabCarousel 75. DEVICE ORIENTATION CHALLENGESDevice OrientationOne event handlerHandlingPage Page Shortcut CarouselOverlay Viewer Listen on parentSlidetabCarousel 76. DEVICE ORIENTATION CHALLENGESDevice Orientation One event handlerHandling PagePage ShortcutCarousel OverlayViewer Listen on parent Can handle anySlidetabCarousel kind of Widget stack 77. CONCLUSION Lots challenges for mobile web Performance Device orientation Cross-device supportAll DONE by BOTTLE TRY IT NOW 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. THANK YOUQ&A