如何快速打造慾望牆？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