Talk at DrupalCamp Taipei 2014

1. Responsive Design on Drupal
Chris Wu

2. F2E / Themer
Site Builder

3. RESPONSIVE
DESIGN?
Reactive Design
Adaptive Design
Fluid Design
Flexible Design
Responsive Web Design

4. RWD
呼應式網⾴頁設計
響應式網⾴頁設計
⾃自適應式網⾴頁設計

5. 隨著載具不同，
提供不同呈現⽅方式的設計

6. 載具 / Devices

7. ⾏行動網站 or APP?

8. APP
截然不同的開發⽅方式
為不同裝置或平台個別開發
開發語⾔言或許不⽌止⼀一種
上稿系統可能不同*
維護更新成本較⾼高

9. Mobile Experience

12. Desktop
Tablet
Mobile

13. MEDIA QUERIES
嗨！可以看看你的網站嗎？
好啊！
可以讓我知道你的螢幕多⼤大嗎？
我的畫⾯面寬度是 768 px
OK，提供你平板的樣式瀏覽網站
Tablet

14. DRUPAL 可以幫助我開發嗎？

15. THEME

16. AdaptiveThemes Zen Bootstrap
Zurb Foundation

19. Tablet Portrait Mobile Landscape Mobile Portrait

20. LAYOUT

22. Tablet Landscape
Tablet Portrait
Mobile
Wide Desktop

23. <img>
img{ max-width: 100%; }

24. <form>
input, select{
max-width: 100%;
}

25. HTML5
type=“tel”
type=“number”
type=“email”

26. For Developer
!
Elements
https://www.drupal.org/project/elements

27. FOR USER
!
!
!
HTML5 Tools
https://www.drupal.org/project/html5_tools

28. IMAGE

29. 螢幕尺⼨寸 VS 圖⽚片尺⼨寸

30. 視網膜螢幕
RETINA DISPLAY

31. 三合⼀一解決⽅方案

32. Image Style
核⼼心模組，圖⽚片裁切縮放
Picture
連結 Image Style 與 Breakpoints
Breakpoints
設定載具分段點與解析度
圖⽚片的 Media Queries

33. 實際效果

34. BONUS: VIDEO!

35. Currently Supported Players
!
YouTube
Y
Vimeo
Y
Blip.tv
Y*
Viddler
Y*
Kickstarter
Y*

36. THANK YOU! ?