文档介绍了响应式网页设计（RWD）的概念、优势和劣势，以及流行框架（如Twitter Bootstrap和jQuery Mobile）的应用。RWD能够自动调整网页布局以适应不同设备，提供更好的用户体验，但也需考虑加载速度和移动设备的用户界面设计。文中还提到了一些优秀的RWD网站示例，展示了其在当今网页设计中的重要性。

1. 資訊規劃組組內分享
Responsive Web Design
響應式網頁設計
2013/10/8
資訊工業策進會

2. OVERVIEW
 Responsive Web Design
• What?
• Why?
• How?
• 優缺點
 Popular Frameworks
• Twitter Bootstrap
• jQuery Mobile

3. Good UI Design

4.  一致性
具有一致性的設計模式及視覺風格，能為用戶建立起完整
一致的心智模型，使產品更加易用，提升整體體驗。
 對比
透過配色、尺寸和佈局的調整，使界面元素在視覺上與其
他元素形成鮮明的對比。
 佈局
為界面設定視覺規範，讓用戶的視線可以跟隨內容本身所
界定出的路徑自然的移動，增強界面的視覺平衡。
如：960 Grid system
一些設計上的建議

5.  層級化
最重要的東西要比相對次要的東西更容易被看到。著重突
出那些與核心功能與常見用例相關的交互元素。
 目標用戶
不同類型的用戶所青睞的界面風格也有所不同。建築、設
計、時尚等領域正流行扁平化風格，而一般用戶則更容易
接受相對傳統的擬物化界面。
 反饋
當點擊行為發生時，要立刻向用戶提供清晰明確的視覺反
饋。
 降低「阻力」
無論採用怎樣的視覺風格，都要使界面盡量簡化，減少用
戶完成目標所需執行的操作，打造更加流暢的交互體驗。
任何一點障礙或額外的步驟都會提高操作成本，增加功能
的複雜度。

6. Responsive Web
Design

7. What?

8. • Ethan Marcotte在2010年於發表的文章中提
出Responsive Web Design術語。
• RWD出處來源
• Ethan Marcotte官網

9. • Responsive Web Design (RWD)，通常翻譯做 「響應式
網頁設計」或「自適應網頁設計」。
• 網站對於各種設備(桌機、筆電、平版、手機) 瀏覽網頁時，
能對應不同解析度而改變網頁排版方式，以得到最佳的視
覺效果。
• 網頁根據到訪裝置的特點而使用不同 CSS 樣式規則，最常
用的是瀏覽器的寬度。
• 頁面元素使用相對單位如百分比或 EM 調整大小，而不是
絕對的單位如像素或點。
• 影像也以相對單位調整大小，以防止超出包含它們的容器
之外。

10. Why?
越來越多人用手機、平板來瀏覽網頁。
資料來源：http://gs.statcounter.com

11. How?
• CSS3 Media Queries
• HTML(5) / CSS skills
• Use common CSS Frameworks
• Progressive Enhancement or Graceful
Degradation*
• Design sense (還是讓專業的來吧)
// 在 PC 上的顯示
.box {
width: 1000px;
}
// Media Query，當寬度小於767px時載入下面這段CSS :
@media (max-width: 767px) {
.box {
width: 100%;
}
}
※關於Progressive Enhancement/Graceful Degradation的詳細

12. RWD的優點
• 開發成本相對比Native App低
RWD通常可以直接利用Media Query 直接開發搭配行動裝
置的 CSS，與Native App的成本比較下來較低。
• 不需要另外製作網頁
RWD不需要再為不同裝置另外製作專屬網頁，直接使用
CSS屬性來對不同解析度做調整即可。
• 能同時針對不同裝置分別調整
通常只要利用CSS3的Media Queries方法來實做，不論是
小螢幕、大螢幕、超高解析度的Retina Display都能做
RWD。

13. RWD的缺點
• 載入速度的考量
因為使用同一份HTML & CSS ，所以不論是使用手機或
PC上網，都是存取同一份網頁。即使針對小螢幕將畫面
設計的簡潔，實際上只是把元素隱藏，故網頁檔案大小其
實是一樣的。所以除了畫面的合理性外，也需考慮行動裝
置網路速度的議題。
• Mobile，需再花心思設計
手機上的操作是與傳統PC是完全不一樣的，所以如果要
有一個好的Mobile User Experience的話，還是必須針對
Mobile這塊去設計整個操作及動線流程才是最理想的。

14. DEM
O

15. Some Excellent RWD
Websites• WWF
• Disney
• Forefathers
Group
• The Boston
Globe
• Harvard
University
• Food Sense
• Starbucks

16. • RWD 被 .net Magazine 列為 2012 年度頂尖網
頁設計趨勢第二名。
(第一名是Progressive Enhancement ) 來源
• 2012年底 Google 在其「Webmaster's Guide」
中建議將RWD列入網頁設計。來源

17. Frameworks

18. Twitter Bootstrap
 使用部份 HTML5/CSS3 技術(瀏覽器不能太舊)
 Visual Studio 2013 ASP.NET 專案預設使用
 Bootstrap 提供了：
• 網格系統(支援RWD)
• 佈局
• 字體樣式
• 多媒體展現
• 表格
• 導覽
• 警告與提示
• 縮圖
• ……and more
Bootstrap
Bootstrap中文教學
 類似的套件：

19. • 以 jQuery 為核心
• 輕量化檔案
• Html5 Markup-driven
• 自動切換排版
• 支援滑鼠與觸碰事件
• WAI-ARIA(無障礙設計)
• 強大的佈景主題系統
• ASP.NET MVC 的支援
• 支援市面上大部分行動裝置
• 畫面的一致化
• 多樣化的 UI
jQuery Mobile Demo

20. One
More
Thing
…

21. Parallax Scrolling
透過滑鼠的捲動，配合網頁多層背景以不同的速度
移動，從而形成立體的運動效果，帶來非常出色的
視覺和交互體驗。
• Apple MAC Pro
• Nestle KitKat
• Q Music Titanic
• Ben the Bodyguard
• Firefox OS
• Audi A3 Sportback
• Every Last Drop
• Pi’s Epic Journey
• Wedding Invitation I
• Wedding Invitation II

22. AQ