Pinkoi 採用的 Responsive web design 策略，用的是 RESS （Responsive design + Server Side component）。在手機版網頁上考慮使用情境，針對觸控介面做優化，提升效能與使用性。

1. Pinkoi & RWD
Adam Wang
Front-end engineer, Pinkoi
2015.1.11 @RGBA
pic credit flickr.com/toomore

2. pinkoi.com

4. Pinkoi 是亞洲最大設計商品購物網站，擁有為數眾多的優質設計師群，堅持只賣好品味、客製化的優
質設計，讓美感生活隨手可得，也讓每個送禮時刻都更加獨一無二。
Pinkoi.com

5. ~ 50%
Pinkoi 的流量來自移動裝置

6. mobile web, iOS, Android
http://farm4.staticflickr.com/3768/10412439655_2d80b32105_o.jpg

7. 逛、買、問
對使用者來說，Pinkoi 上最重要的三件事

8. 都能提供良好的使用體驗
在任何時候、任何裝置

9. 在任何時候、任何裝置
http://www.dailymail.co.uk/news/article-2375282/Motoring-nut-transforms-
shopping-cart-jet-powered-mean-machine-breaks-45mph-speed-record.html
都要快、都要順暢

10. https://developers.google.
com/speed/pagespeed/insights/?url=http%
3A%2F%2Fpinkoi.com

11. 就能提供良好的使用體驗?
Responsive Web Design

12. 針對不同瀏覽器寬度、
裝置解析度的設計
Responsive Web Design
這裡的寬度 指的是 viewport

13. pic credit: http://www.iqtv.com/mobile-first-website-
design/
Responsive Web Design

14. Be water,
my friend.
http://www.wallconvert.com/wallpapers/male-
celebrities/bruce-lee-16283.html

15. RWD
FTW!
在台灣似乎
不是很流行(?)

16. mobile web app or
mobile web page?
互動為主還是內容為主？
資訊架構也不同
資訊架構 information architecture

17. 逛、買、問
對使用者來說，Pinkoi 上最重要的三件事

18. Pinkoi mobile web
針對觸控螢幕設計、針對使用情境設計

19. 手機螢幕不夠大
這大家都知道

20. 漢堡選單
你有想過為何會被廣泛使用嗎？

21. :hover
觸控螢幕 :(

22. 開新 tab 瀏覽
手機瀏覽器切換 tab :(

23. 下載太多圖片
3G 網路頻寬 :(
手機效能 :((

24. animation &
janky scrolling
60 fps :(
repaint hell :(

25. 不是只要 media query
調整排版嗎？ :(
Responsive Web Design

26. pic credit: http://www.iqtv.com/mobile-first-website-
design/
沒那麼簡單

27. m.pinkoi.com
redirect :(
複製網址分享 :(

28. ASAP 閃電購物網
蘋果日報
m dot 使用者經驗 :(

29. m.appledaily.com/… (on desktop) m.asap.com.tw
asap.com.tw (on mobile)

30. RESS
Responsive Design + Server Side Components
@lukew
http://www.lukew.com/ff/entry.asp?1392

31. 同一個網址，
針對不同條件
提供不同的HTML/CSS/JS
（白話文）

32. 寫兩套程式？
前端工程師 :(

33. 良好的使用體驗
為了在任何時候、任何裝置
使用者 :D

34. jQuery vs. zepto
考慮手機網路情境，使用輕量工具
或是 pure JavaScript
http://www.123rf.com/photo_19897635_speed-limit-traffic-sign-with-snail-symbol-clipping-path-included.html

35. HTML5 支援度佳
手機瀏覽器 = 現代瀏覽器
漸進增強 Progressive enhancement

36. new input type
輸入數字更方便

38. localStorage
使用者瀏覽記錄

40. history.pushState
實作 PJAX：減少頻寬浪費、感知速度更快

41. loading bar
loading icon

42. 相同網址
省去 redirect、DNS lookup

43. lazy load everywhere
看得到才下載

44. Modernizr.touch
如果瀏覽器支援觸控，
伺服器給使用者手機版網站

45. ontouchstart in window
還是會誤判？
Shit happens. :(

46. fluid layout
手機、平板都適用

47. 逛櫥窗
320px 480px 768px

48. 一次性的活動頁面
pure RWD
Not RESS

50. 內容重複性高
互動性較低
省時省工，少寫一點 code 早下班

51. 一些 RWD 實作心得
我們用 stylus，但幾乎純手刻

52. Think Fluid
用 % 處理長度，保持等比例
5% 5%
1% 1%
20% 20% 20% 20%2.67%2.67%2.67%

53. Think Retina
用 media query + background-image
目前 <img srcset>、<picture> 支援度差
Chrome, Opera Chrome, Opera
pic credit: http://flavorwire.com/457624/famous-paintings-
recreated-with-lego-blocks

54. @media (min-device-pixel-ratio: 2)
for devices support retina

55. Q: 等比例縮放背景？
假設一個空的 <div>，你如何設定高度？
還要隨著螢幕大小維持等比例？

56. padding-bottom
background-size:cover/contain
magic!

57. 1000x440
.banner {
width: 100%;
background-size: cover;
padding-bottom: 44%;
}
1:0.44 (forever)
(demo link)

58. vw, vh
viewport width, viewport height

59. font-size: calc(50px - 5vw);
http://codepen.io/adamp33/pen/ByyPrP
字體大小隨螢幕變大而變小

60. Think Prototype
不要用 Photoshop 排版（或是任何靜態圖片）

61. Our Designer makes
*Prototype*
https://dl.dropboxusercontent.com/u/228389790/pinkoi-about-RWD/index.html
http://pinkoi.com/about

62. Responsive Email?
It’s a HELL.

64. Takeaways
responsive design ≠ mobile-friendly design
手機版網頁效能很重要 #perfmatters
think fluid 做彈性的設計
優化再優化

65. We are hiring! :)
pinkoi.com/about/pinkoist

66. Thank you!
adam.wang@pinkoi.com
最近出了一本書，跟前端無關 ...
http://goo.gl/QGgsRl