如何快速打造慾望牆?Yahoo! 前端開發經驗分
享John Wu
Brian Huang
Presenter
Yahoo! Presentation, Confidential 2
John Wu Brian Huang
• F2E• 慾望牆• Bottle• Mobile Auctions• Mobile Wretch
• F2E• 慾望牆• Bottle• EC Search
Origin
Yahoo! Presentation, Confidential 3
Origin
Yahoo! Presentation, Confidential 4
UWW
Yahoo! Presentation, Confidential 5
Challenge
Yahoo! Presentation, Confidential 6
Yahoo! Presentation, Confidential 7
Waterfall design is …
Yahoo! Presentation, Confidential 8
Waterfall design
Yahoo! Presentation, Confidential 9
Waterfall design
Yahoo! Presentation, Confidential 10
Waterfall design
Yahoo! Presentation, Confidential 11
Implement waterfall design
•Quick development•Easy use•Reusability•High performance
Yahoo! Presentation, Confidential 12
Yahoo! Presentation, Confidential 13
http://y.ahoo.it/2fj34
Photogrid
Yahoo! Presentation, Confidential 14
<div data-role="photogrid"> <div data-icon="..."></div> <div data-icon="..."></div> ...</div>
Photogrid
Yahoo! Presentation, Confidential 15
<script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js"></script>
<div data-role="photogrid"> <div data-icon="..."></div> <div data-icon="..."></div> ...</div>
Photogrid
Yahoo! Presentation, Confidential 16
<script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js"></script>
<div data-role="photogrid"> <div data-icon="..."></div> <div data-icon="..."></div> ...</div>
<script>YUI({gallery: 'gallery-2013.02.27-21-03'}).use('gallery-bottle', function (Y) { Y.Bottle.init(true);});</script>
Photogrid
Yahoo! Presentation, Confidential 17
Pinterest vs UWW
Yahoo! Presentation, Confidential 18
Pinterest UWW
core JS YUI3
Dom trigger Class Data attribute
Positioning Position Fixed Column
Flex Height Extra JS Native
Extension JS YUI Gallery
Challenge : Cross Browser
Yahoo! Presentation, Confidential 19
Source : http://www.flickr.com/photos/11319126@N00/8270409318/
Challenge : Multiple Devices (Screen Size)
Yahoo! Presentation, Confidential 20
Source :http://www.flickr.com/photos/adactio/6153558098/
Cross Multiple Devices Browser
•Fast development•One Domain•CSS Reusable• JS Reusable
Yahoo! Presentation, Confidential 21
Yahoo! Presentation, Confidential 22
Source : http://www.flickr.com/photos/adactio/5818096043/
Responsive Design - Challenge
•Flexible width•Reuse CSS•Photogrid Support
Yahoo! Presentation, Confidential 23
Responsive : width
Device width
Small Screen Mobile < 480
Big Screen Mobile 480 ~ 620
Big Screen Mobile + Tablet 620 ~ 750
Tablet 750 ~ 800
Tradition Screen 800 ~ 950
Modern Screen > 950
Yahoo! Presentation, Confidential 24
Responsive : CSS
•@media queries•Using % to replace px•Descending
Yahoo! Presentation, Confidential 25
Responsive : Photogrid
•Ability to set max width•Auto modulate width•Auto modulate column•example
Yahoo! Presentation, Confidential 26
Photogrid
•Waterfall Design• Quick development• Easy use• Reusability• High performance
Yahoo! Presentation, Confidential 27
•Responsive Design• Ability to set
max width
• Auto modulate width
• Auto modulate column
Yahoo! Presentation, Confidential 28
Live Demo
Yahoo! Presentation, Confidential 29
Try it
http://y.ahoo.it/2fj34
Yahoo! Presentation, Confidential 30
Questions?
31