Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Pinkoi 與 RWD @RGBA 構思

11.228 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Ingenieurwesen
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

Pinkoi 與 RWD @RGBA 構思

  1. 1. Pinkoi & RWD Adam Wang Front-end engineer, Pinkoi 2015.1.11 @RGBA pic credit flickr.com/toomore
  2. 2. pinkoi.com
  3. 3. Pinkoi 是亞洲最大設計商品購物網站,擁有為數眾多的優質設計師群,堅持只賣好品味、客製化的優 質設計,讓美感生活隨手可得,也讓每個送禮時刻都更加獨一無二。 Pinkoi.com
  4. 4. ~ 50% Pinkoi 的流量來自移動裝置
  5. 5. mobile web, iOS, Android http://farm4.staticflickr.com/3768/10412439655_2d80b32105_o.jpg
  6. 6. 逛、買、問 對使用者來說,Pinkoi 上最重要的三件事
  7. 7. 都能提供良好的使用體驗 在任何時候、任何裝置
  8. 8. 在任何時候、任何裝置 http://www.dailymail.co.uk/news/article-2375282/Motoring-nut-transforms- shopping-cart-jet-powered-mean-machine-breaks-45mph-speed-record.html 都要快、都要順暢
  9. 9. https://developers.google. com/speed/pagespeed/insights/?url=http% 3A%2F%2Fpinkoi.com
  10. 10. 就能提供良好的使用體驗? Responsive Web Design
  11. 11. 針對不同瀏覽器寬度、 裝置解析度的設計 Responsive Web Design 這裡的寬度 指的是 viewport
  12. 12. pic credit: http://www.iqtv.com/mobile-first-website- design/ Responsive Web Design
  13. 13. Be water, my friend. http://www.wallconvert.com/wallpapers/male- celebrities/bruce-lee-16283.html
  14. 14. RWD FTW! 在台灣似乎 不是很流行(?)
  15. 15. mobile web app or mobile web page? 互動為主還是內容為主? 資訊架構也不同 資訊架構 information architecture
  16. 16. 逛、買、問 對使用者來說,Pinkoi 上最重要的三件事
  17. 17. Pinkoi mobile web 針對觸控螢幕設計、針對使用情境設計
  18. 18. 手機螢幕不夠大 這大家都知道
  19. 19. 漢堡選單 你有想過為何會被廣泛使用嗎?
  20. 20. :hover 觸控螢幕 :(
  21. 21. 開新 tab 瀏覽 手機瀏覽器切換 tab :(
  22. 22. 下載太多圖片 3G 網路頻寬 :( 手機效能 :((
  23. 23. animation & janky scrolling 60 fps :( repaint hell :(
  24. 24. 不是只要 media query 調整排版嗎? :( Responsive Web Design
  25. 25. pic credit: http://www.iqtv.com/mobile-first-website- design/ 沒那麼簡單
  26. 26. m.pinkoi.com redirect :( 複製網址分享 :(
  27. 27. ASAP 閃電購物網 蘋果日報 m dot 使用者經驗 :(
  28. 28. m.appledaily.com/… (on desktop) m.asap.com.tw asap.com.tw (on mobile)
  29. 29. RESS Responsive Design + Server Side Components @lukew http://www.lukew.com/ff/entry.asp?1392
  30. 30. 同一個網址, 針對不同條件 提供不同的HTML/CSS/JS (白話文)
  31. 31. 寫兩套程式? 前端工程師 :(
  32. 32. 良好的使用體驗 為了在任何時候、任何裝置 使用者 :D
  33. 33. jQuery vs. zepto 考慮手機網路情境,使用輕量工具 或是 pure JavaScript http://www.123rf.com/photo_19897635_speed-limit-traffic-sign-with-snail-symbol-clipping-path-included.html
  34. 34. HTML5 支援度佳 手機瀏覽器 = 現代瀏覽器 漸進增強 Progressive enhancement
  35. 35. new input type 輸入數字更方便
  36. 36. localStorage 使用者瀏覽記錄
  37. 37. history.pushState 實作 PJAX:減少頻寬浪費、感知速度更快
  38. 38. loading bar loading icon
  39. 39. 相同網址 省去 redirect、DNS lookup
  40. 40. lazy load everywhere 看得到才下載
  41. 41. Modernizr.touch 如果瀏覽器支援觸控, 伺服器給使用者手機版網站
  42. 42. ontouchstart in window 還是會誤判? Shit happens. :(
  43. 43. fluid layout 手機、平板都適用
  44. 44. 逛櫥窗 320px 480px 768px
  45. 45. 一次性的活動頁面 pure RWD Not RESS
  46. 46. 內容重複性高 互動性較低 省時省工,少寫一點 code 早下班
  47. 47. 一些 RWD 實作心得 我們用 stylus,但幾乎純手刻
  48. 48. Think Fluid 用 % 處理長度,保持等比例 5% 5% 1% 1% 20% 20% 20% 20%2.67%2.67%2.67%
  49. 49. 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
  50. 50. @media (min-device-pixel-ratio: 2) for devices support retina
  51. 51. Q: 等比例縮放背景? 假設一個空的 <div>,你如何設定高度? 還要隨著螢幕大小維持等比例?
  52. 52. padding-bottom background-size:cover/contain magic!
  53. 53. 1000x440 .banner { width: 100%; background-size: cover; padding-bottom: 44%; } 1:0.44 (forever) (demo link)
  54. 54. vw, vh viewport width, viewport height
  55. 55. font-size: calc(50px - 5vw); http://codepen.io/adamp33/pen/ByyPrP 字體大小隨螢幕變大而變小
  56. 56. Think Prototype 不要用 Photoshop 排版(或是任何靜態圖片)
  57. 57. Our Designer makes *Prototype* https://dl.dropboxusercontent.com/u/228389790/pinkoi-about-RWD/index.html http://pinkoi.com/about
  58. 58. Responsive Email? It’s a HELL.
  59. 59. Takeaways responsive design ≠ mobile-friendly design 手機版網頁效能很重要 #perfmatters think fluid 做彈性的設計 優化再優化
  60. 60. We are hiring! :) pinkoi.com/about/pinkoist
  61. 61. Thank you! adam.wang@pinkoi.com 最近出了一本書,跟前端無關 ... http://goo.gl/QGgsRl

×