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