Alan Sun
響應式網⾴頁設計
(RWD)概述
前端⼯工程師!
穎客資訊!
alan@ink.net.tw
以前我們上網....
http://shapewebdesigns.com/online-computer-repairs/
現在我們可以⽤用.....
http://resolutionmedia.com/us/google-estimated-cross-device-conversions-pov/
甚至這些......
http://www.monkeyfishmarketing.com/news/ready-multiple-device-internet-marketing/
網⾴頁如何在多個裝置上呈現
Responsive Web Design
響應式網⾴頁設計
响应式⽹网页设计
⾃自适应⽹网页设计
回應式網⾴頁設計
易讀性 (Readability)
⾃自適應網⾴頁設計(英⽂文:Responsive web
design,通常縮寫為RWD)是⼀一種網⾴頁設計
的技術做法,該設計可使網站在多種瀏覽裝置
(從桌⾯面電腦顯⽰示器到⾏行動電話或其他⾏行動產
品裝置...
RWD PATTERNS
低解析度 —————————————————————————————> ⾼高解析度
Mostly fluid
• 主要呈現的區塊隨著螢幕⼤大
⼩小縮放!
• 次要內容以落下(dropping)
或回填(reflowing)作為分斷
點的呈現
http://nanoc.ws/
低解析度 ————————————————————————————> ⾼高解析度
Column drop
• 多欄全幅式框架!
• ⾼高解析度 - 內容區塊並排呈現!
• 低解析度 - 內容區塊垂直堆疊!
• 內容區塊以落下(dropping)...
http://www.pinterest.com/
Layout shifter
• 主要分斷點的內容排列差異⼤大!
• 以內容區塊移動作為分斷點時
的變化!
• 維護與變更上較為不易
低解析度 ————————————————————————————> ⾼高解析度
http://foodsense.is/
Tiny tweaks
• 以簡單、︑少量的改變的佈局
⽅方式!
• 適合單⾴頁式網站(SPA)或⽂文章
類為主的網⾴頁呈現
低解析度 ————————————————————————————> ⾼高解析度
http://mingshan.qrweb.com.tw/
解析度⾼高
Off canvas
• 使⽤用頻率少的內容隱藏/顯⽰示!
• ⾼高解析度 - 顯⽰示其內容!
• 低解析度 - 隱藏其內容!
• 以點擊選單的⽅方式將隱藏內容
(選單)喚出(類似App作法)
解析度低
http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/
RWD 起步
❖ 選擇 RWD pattern!
❖ Mobile First!
❖ 捨棄固定排版 (Fixed Layout) 改⽤用流動式排版 (Fluid
Layout)!
❖ 善⽤用百分比 (%) 與 比例 (em, rem) !
❖ ...
但是...要改的東西好多
不
如
就
改
天
吧
!
(
設
計
對
⽩白
)
其實你有更簡單的選擇
【⼯工商服務】
❖ 簡易直覺的操作界⾯面!
❖ 提供QR Code 讓宣傳更容易!
❖ 響應式設計,⾏行動裝置輕鬆瀏覽!
❖ 嵌入Google Analytics 隨時掌握網站動態
⽇日租⾏行動網
http://www.qrweb.com.tw
Q & A
Upcoming SlideShare
Loading in …5
×

Rwd intro

917 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
917
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Rwd intro

  1. 1. Alan Sun 響應式網⾴頁設計 (RWD)概述 前端⼯工程師! 穎客資訊! alan@ink.net.tw
  2. 2. 以前我們上網.... http://shapewebdesigns.com/online-computer-repairs/
  3. 3. 現在我們可以⽤用..... http://resolutionmedia.com/us/google-estimated-cross-device-conversions-pov/
  4. 4. 甚至這些...... http://www.monkeyfishmarketing.com/news/ready-multiple-device-internet-marketing/
  5. 5. 網⾴頁如何在多個裝置上呈現
  6. 6. Responsive Web Design 響應式網⾴頁設計 响应式⽹网页设计 ⾃自适应⽹网页设计 回應式網⾴頁設計
  7. 7. 易讀性 (Readability) ⾃自適應網⾴頁設計(英⽂文:Responsive web design,通常縮寫為RWD)是⼀一種網⾴頁設計 的技術做法,該設計可使網站在多種瀏覽裝置 (從桌⾯面電腦顯⽰示器到⾏行動電話或其他⾏行動產 品裝置)上閱讀和導航,同時減少縮放、︑平移 和捲動。︒—— 摘⾃自 維基百科 http://adsense.blogspot.tw/2013/10/get-your-multi-device-strategy-off.html
  8. 8. RWD PATTERNS
  9. 9. 低解析度 —————————————————————————————> ⾼高解析度 Mostly fluid • 主要呈現的區塊隨著螢幕⼤大 ⼩小縮放! • 次要內容以落下(dropping) 或回填(reflowing)作為分斷 點的呈現
  10. 10. http://nanoc.ws/
  11. 11. 低解析度 ————————————————————————————> ⾼高解析度 Column drop • 多欄全幅式框架! • ⾼高解析度 - 內容區塊並排呈現! • 低解析度 - 內容區塊垂直堆疊! • 內容區塊以落下(dropping) 或回 填(reflowing)作為分斷點的呈現
  12. 12. http://www.pinterest.com/
  13. 13. Layout shifter • 主要分斷點的內容排列差異⼤大! • 以內容區塊移動作為分斷點時 的變化! • 維護與變更上較為不易 低解析度 ————————————————————————————> ⾼高解析度
  14. 14. http://foodsense.is/
  15. 15. Tiny tweaks • 以簡單、︑少量的改變的佈局 ⽅方式! • 適合單⾴頁式網站(SPA)或⽂文章 類為主的網⾴頁呈現 低解析度 ————————————————————————————> ⾼高解析度
  16. 16. http://mingshan.qrweb.com.tw/
  17. 17. 解析度⾼高 Off canvas • 使⽤用頻率少的內容隱藏/顯⽰示! • ⾼高解析度 - 顯⽰示其內容! • 低解析度 - 隱藏其內容! • 以點擊選單的⽅方式將隱藏內容 (選單)喚出(類似App作法) 解析度低
  18. 18. http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/
  19. 19. RWD 起步 ❖ 選擇 RWD pattern! ❖ Mobile First! ❖ 捨棄固定排版 (Fixed Layout) 改⽤用流動式排版 (Fluid Layout)! ❖ 善⽤用百分比 (%) 與 比例 (em, rem) ! ❖ 選擇RWD的分斷點 (breakpoint) 切換版⾯面! ❖ 測試...測試...測試...
  20. 20. 但是...要改的東西好多
  21. 21. 不 如 就 改 天 吧 ! ( 設 計 對 ⽩白 )
  22. 22. 其實你有更簡單的選擇
  23. 23. 【⼯工商服務】 ❖ 簡易直覺的操作界⾯面! ❖ 提供QR Code 讓宣傳更容易! ❖ 響應式設計,⾏行動裝置輕鬆瀏覽! ❖ 嵌入Google Analytics 隨時掌握網站動態 ⽇日租⾏行動網 http://www.qrweb.com.tw
  24. 24. Q & A

×