Suche senden
Hochladen
Responsive design on drupal
•
1 gefällt mir
•
780 views
Chris Wu
Folgen
Talk at DrupalCamp Taipei 2014
Weniger lesen
Mehr lesen
Präsentationen & Vorträge
Melden
Teilen
Melden
Teilen
1 von 36
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
RWD不是你想的那樣 tw mvc#13
RWD不是你想的那樣 tw mvc#13
twMVC
RWD 響應式網頁
RWD 響應式網頁
彭其捷 Jack
Responsive web design的能與不能
Responsive web design的能與不能
Wan Jen Huang
深入淺出RWD自適應網頁設計
深入淺出RWD自適應網頁設計
Marie Chang
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
Ying-Chun Cheng
App介面設計要點
App介面設計要點
Ya Qiao Wu
Rwd intro
Rwd intro
alansemmer
響應式網頁教學
響應式網頁教學
Tien-Yang (Aiden) Wu
Empfohlen
RWD不是你想的那樣 tw mvc#13
RWD不是你想的那樣 tw mvc#13
twMVC
RWD 響應式網頁
RWD 響應式網頁
彭其捷 Jack
Responsive web design的能與不能
Responsive web design的能與不能
Wan Jen Huang
深入淺出RWD自適應網頁設計
深入淺出RWD自適應網頁設計
Marie Chang
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
Ying-Chun Cheng
App介面設計要點
App介面設計要點
Ya Qiao Wu
Rwd intro
Rwd intro
alansemmer
響應式網頁教學
響應式網頁教學
Tien-Yang (Aiden) Wu
twMVC#13 | RWD不是你想的那樣!
twMVC#13 | RWD不是你想的那樣!
twMVC
Hyweb RWD & CMS develop scenario
Hyweb RWD & CMS develop scenario
Kai Fu Hsieh
Responsive Web Design 響應式網頁設計
Responsive Web Design 響應式網頁設計
Bill Lin
開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)
開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)
My own sweet home!
Web Design 設計過程與合作經驗分享
Web Design 設計過程與合作經驗分享
Abby Chiu
情感化设计Design@life
情感化设计Design@life
lilong4174
App Developer Team Learning Map
App Developer Team Learning Map
Ryan Chung
I use drupal / 我是 OO 師,我用 Drupal
I use drupal / 我是 OO 師,我用 Drupal
Chris Wu
MRT Express 極速北捷(UI/UX Designers' Night)
MRT Express 極速北捷(UI/UX Designers' Night)
Chris Wu
DrupalTaiwan.org 社群簡介
DrupalTaiwan.org 社群簡介
Chris Wu
Meadia q2
Meadia q2
AimeeRobertson
Drupal 8 版型開發變革
Drupal 8 版型開發變革
Chris Wu
那些年,我們一起搞的金流
那些年,我們一起搞的金流
Chris Wu
從技術角度看 RWD - Technical Approaches to RWD
從技術角度看 RWD - Technical Approaches to RWD
Chris Wu
Bootstrap 導入分享
Bootstrap 導入分享
得翔 徐
行動技術開發概論
行動技術開發概論
My own sweet home!
行動裝置Web地圖
行動裝置Web地圖
c34031328
RWD & SEO的藝術
RWD & SEO的藝術
Hitomi Yang
使用最新 Edge 瀏覽器來進行開發
使用最新 Edge 瀏覽器來進行開發
Poy Chang
行動與雲端科技在圖書館的應用
行動與雲端科技在圖書館的應用
皓仁 柯
Mobile Web 2.0
Mobile Web 2.0
Jeffray Huang
[DCTPE2010] Drupal 遇上行動網路服務
[DCTPE2010] Drupal 遇上行動網路服務
Drupal Taiwan
Weitere ähnliche Inhalte
Was ist angesagt?
twMVC#13 | RWD不是你想的那樣!
twMVC#13 | RWD不是你想的那樣!
twMVC
Hyweb RWD & CMS develop scenario
Hyweb RWD & CMS develop scenario
Kai Fu Hsieh
Responsive Web Design 響應式網頁設計
Responsive Web Design 響應式網頁設計
Bill Lin
開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)
開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)
My own sweet home!
Web Design 設計過程與合作經驗分享
Web Design 設計過程與合作經驗分享
Abby Chiu
情感化设计Design@life
情感化设计Design@life
lilong4174
App Developer Team Learning Map
App Developer Team Learning Map
Ryan Chung
Was ist angesagt?
(7)
twMVC#13 | RWD不是你想的那樣!
twMVC#13 | RWD不是你想的那樣!
Hyweb RWD & CMS develop scenario
Hyweb RWD & CMS develop scenario
Responsive Web Design 響應式網頁設計
Responsive Web Design 響應式網頁設計
開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)
開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)
Web Design 設計過程與合作經驗分享
Web Design 設計過程與合作經驗分享
情感化设计Design@life
情感化设计Design@life
App Developer Team Learning Map
App Developer Team Learning Map
Andere mochten auch
I use drupal / 我是 OO 師,我用 Drupal
I use drupal / 我是 OO 師,我用 Drupal
Chris Wu
MRT Express 極速北捷(UI/UX Designers' Night)
MRT Express 極速北捷(UI/UX Designers' Night)
Chris Wu
DrupalTaiwan.org 社群簡介
DrupalTaiwan.org 社群簡介
Chris Wu
Meadia q2
Meadia q2
AimeeRobertson
Drupal 8 版型開發變革
Drupal 8 版型開發變革
Chris Wu
那些年,我們一起搞的金流
那些年,我們一起搞的金流
Chris Wu
從技術角度看 RWD - Technical Approaches to RWD
從技術角度看 RWD - Technical Approaches to RWD
Chris Wu
Andere mochten auch
(7)
I use drupal / 我是 OO 師,我用 Drupal
I use drupal / 我是 OO 師,我用 Drupal
MRT Express 極速北捷(UI/UX Designers' Night)
MRT Express 極速北捷(UI/UX Designers' Night)
DrupalTaiwan.org 社群簡介
DrupalTaiwan.org 社群簡介
Meadia q2
Meadia q2
Drupal 8 版型開發變革
Drupal 8 版型開發變革
那些年,我們一起搞的金流
那些年,我們一起搞的金流
從技術角度看 RWD - Technical Approaches to RWD
從技術角度看 RWD - Technical Approaches to RWD
Ähnlich wie Responsive design on drupal
Bootstrap 導入分享
Bootstrap 導入分享
得翔 徐
行動技術開發概論
行動技術開發概論
My own sweet home!
行動裝置Web地圖
行動裝置Web地圖
c34031328
RWD & SEO的藝術
RWD & SEO的藝術
Hitomi Yang
使用最新 Edge 瀏覽器來進行開發
使用最新 Edge 瀏覽器來進行開發
Poy Chang
行動與雲端科技在圖書館的應用
行動與雲端科技在圖書館的應用
皓仁 柯
Mobile Web 2.0
Mobile Web 2.0
Jeffray Huang
[DCTPE2010] Drupal 遇上行動網路服務
[DCTPE2010] Drupal 遇上行動網路服務
Drupal Taiwan
2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试
2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试
Michael Zhang
響應式設計(RWD)與網站前瞻性設計
響應式設計(RWD)與網站前瞻性設計
Nowill Chang
20141212 html5 及微軟跨平台佈局 long
20141212 html5 及微軟跨平台佈局 long
Meng-Ru (Raymond) Tsai
Responsive Web Design
Responsive Web Design
Jie-Jyun Liu
wordpress 台中趴踢樂20111120 mrmu簡報
wordpress 台中趴踢樂20111120 mrmu簡報
domo0934
Hello ipad
Hello ipad
jeannewoo
编写跨平台的手机软件
编写跨平台的手机软件
heyfluke
HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型
Tom Fan
2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例
2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例
Justin Lee
Let's talk about Web Design
Let's talk about Web Design
Abby Chiu
多巴胺數位行銷服務介紹
多巴胺數位行銷服務介紹
jessmylov
Muki word press
Muki word press
Muki Wu
Ähnlich wie Responsive design on drupal
(20)
Bootstrap 導入分享
Bootstrap 導入分享
行動技術開發概論
行動技術開發概論
行動裝置Web地圖
行動裝置Web地圖
RWD & SEO的藝術
RWD & SEO的藝術
使用最新 Edge 瀏覽器來進行開發
使用最新 Edge 瀏覽器來進行開發
行動與雲端科技在圖書館的應用
行動與雲端科技在圖書館的應用
Mobile Web 2.0
Mobile Web 2.0
[DCTPE2010] Drupal 遇上行動網路服務
[DCTPE2010] Drupal 遇上行動網路服務
2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试
2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试
響應式設計(RWD)與網站前瞻性設計
響應式設計(RWD)與網站前瞻性設計
20141212 html5 及微軟跨平台佈局 long
20141212 html5 及微軟跨平台佈局 long
Responsive Web Design
Responsive Web Design
wordpress 台中趴踢樂20111120 mrmu簡報
wordpress 台中趴踢樂20111120 mrmu簡報
Hello ipad
Hello ipad
编写跨平台的手机软件
编写跨平台的手机软件
HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型
2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例
2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例
Let's talk about Web Design
Let's talk about Web Design
多巴胺數位行銷服務介紹
多巴胺數位行銷服務介紹
Muki word press
Muki word press
Responsive design on drupal
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
10.
11.
12.
Desktop Tablet Mobile
13.
MEDIA QUERIES 嗨!可以看看你的網站嗎?
好啊! 可以讓我知道你的螢幕多⼤大嗎? 我的畫⾯面寬度是 768 px OK,提供你平板的樣式瀏覽網站 Tablet
14.
DRUPAL 可以幫助我開發嗎?
15.
THEME
16.
AdaptiveThemes Zen Bootstrap
Zurb Foundation
17.
18.
19.
Tablet Portrait Mobile
Landscape Mobile Portrait
20.
LAYOUT
21.
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! ?
Jetzt herunterladen