Responsive design on drupal

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! ?