Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive design on drupal

685 views

Published on

Talk at DrupalCamp Taipei 2014

  • Be the first to comment

Responsive design on drupal

  1. 1. Responsive Design on Drupal Chris Wu
  2. 2. F2E / Themer Site Builder
  3. 3. RESPONSIVE DESIGN? Reactive Design Adaptive Design Fluid Design Flexible Design Responsive Web Design
  4. 4. RWD 呼應式網⾴頁設計 響應式網⾴頁設計 ⾃自適應式網⾴頁設計
  5. 5. 隨著載具不同, 提供不同呈現⽅方式的設計
  6. 6. 載具 / Devices
  7. 7. ⾏行動網站 or APP?
  8. 8. APP 截然不同的開發⽅方式 為不同裝置或平台個別開發 開發語⾔言或許不⽌止⼀一種 上稿系統可能不同* 維護更新成本較⾼高
  9. 9. Mobile Experience
  10. 10. Desktop Tablet Mobile
  11. 11. MEDIA QUERIES 嗨!可以看看你的網站嗎? 好啊! 可以讓我知道你的螢幕多⼤大嗎? 我的畫⾯面寬度是 768 px OK,提供你平板的樣式瀏覽網站 Tablet
  12. 12. DRUPAL 可以幫助我開發嗎?
  13. 13. THEME
  14. 14. AdaptiveThemes Zen Bootstrap Zurb Foundation
  15. 15. Tablet Portrait Mobile Landscape Mobile Portrait
  16. 16. LAYOUT
  17. 17. Tablet Landscape Tablet Portrait Mobile Wide Desktop
  18. 18. <img> img{ max-width: 100%; }
  19. 19. <form> input, select{ max-width: 100%; }
  20. 20. HTML5 type=“tel” type=“number” type=“email”
  21. 21. For Developer ! Elements https://www.drupal.org/project/elements
  22. 22. FOR USER ! ! ! HTML5 Tools https://www.drupal.org/project/html5_tools
  23. 23. IMAGE
  24. 24. 螢幕尺⼨寸 VS 圖⽚片尺⼨寸
  25. 25. 視網膜螢幕 RETINA DISPLAY
  26. 26. 三合⼀一解決⽅方案
  27. 27. Image Style 核⼼心模組,圖⽚片裁切縮放 Picture 連結 Image Style 與 Breakpoints Breakpoints 設定載具分段點與解析度 圖⽚片的 Media Queries
  28. 28. 實際效果
  29. 29. BONUS: VIDEO!
  30. 30. Currently Supported Players ! YouTube Y Vimeo Y Blip.tv Y* Viddler Y* Kickstarter Y*
  31. 31. THANK YOU! ?

×