第 3 章 回應式網頁設計
∗ 網頁設計
▸ 早期
✶ 使用者利用桌上或筆記電腦瀏覽網頁
✶ 網頁寬度設為固定，使所有螢幕呈現相同風格
✶ 寬螢幕左右會有空白邊界
▸ 近期
✶ 使用者利用手機與平板電腦瀏覽網頁
✶ 針對桌上型電腦所設計的網頁在手機上瀏覽會有許多問題
▸ 解決方案：
✶ 利用 HTML5 與 CSS3 做回應式網頁設計 (Responsive web design，亦稱為「響應式網頁設計」)
✶ 網頁依據不同的視域 (Viewport) 尺寸自行調整結構
# 視域：瀏覽器中可以呈現內容的區域，不包括標題、工具列、頁籤、及其他
# 視域尺寸與螢幕尺寸不同
✶ 伺服器後端不需要做任何處理
(1) 回應式網頁設計
∗ 手機瀏覽傳統網頁的問題
▸ 需要放大或縮小頁面才能看清楚相關訊息
▸ 需要滑動頁面才能看到目標訊息 (一行文字經常太長)
▸ 按鈕或連結太小難以操作，導致常常點錯
∗ 解決方案之一：設計手機專用網頁
▸ 優點：
✶ 可依據不同手機的特性、地點、或連接速度等提供不同的內容、設計、或互動網頁
✶ 網頁建置速度快
▸ 缺點：
✶ 網頁修改不易
✶ 網頁搜尋引擎最佳化較差
✶ 需要維護多個網頁，維護成本及錯誤率均提高
∗ 較佳的解決方案
▸ 相同的網頁內容，但依據視域的特性做頁面結構的調整，例如：
✶ 在小視域中，將較不重要的元素移到主要項目之下
✶ 或許在更糟的狀況下：乾脆將元素隱藏，變成另一個連結
✶ 將導覽按鈕大小調整為適合手指點選的尺寸，而非固定尺寸
✶ 網頁佈局依據可讀性來縮放
✶ 一段文字的長度彈性調整，不需左右滑動螢幕
∗ 回應式網頁 (Responsive web)定義
▸ 將以下 3 種技術整合為統一的方法，稱為回應式網頁設計 (Responsive web design)
✶ 彈性網格布局 (Flexible grid layout)
✶ 彈性影像 (Flexible image)
✶ 媒體及媒體查詢 (Media and media queries)
▸ 其他名稱：fluid design, elastic layout, rubber layout, liquid design, adaptive layout,
cross-device design, and flexible design
∗ HTML5 與 CSS3 進一步提昇回應式設計的功能
▸ HTML5 比 HTML4 功能強大許多
▸ 瀏覽器支援 HTML5 的比較
▸ CSS3 的許多進階功能可以提供更多的彈性，因此大片的背景影像及複雜的 JavaScript 都可以丟掉了，取而代之的是輕量級的
CSS3 梯度 (Gradient)、陰影 (Shadow)、排版 (Typography)、動畫 (Animation)、以及轉換 (Transformation) 等
(2) 回應式網頁設計範例
∗ 回應式網頁測試方法
▸ 利用螢幕尺寸轉換工具
▸ 建立
顯示視域尺寸之 HTML 檔：screenSize.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Browser viewport size tester // benfrain.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>The benfrain.com super simple, what size is my viewport page?</h1>
<h3>Viewport width: <span id="width"></span></h3>
<h3>Viewport height: <span id="height"></span></h3>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js"></script>
<script src="js/screenSize.js"></script>
</body>
</html>
▸ 建立 <...>/js/ 目錄，並建立 js/screenSize.js 檔案，內容如下：
$(document).ready(function(e) {
showViewportSize();
$(window).resize(function(e) {
showViewportSize();
});
function showViewportSize() {
$('#width').text($(window).width());
$('#height').text($(window).height());
}
});
▸ Google jQuery 版本資訊
▸ 在較寬的視域 (大於 1350) 中呈現
▸ 減少視域寬度 (小於 960) → 影像格網改變
▸ 繼續減少視域寬度 (小於 720) → 頁首的連結變成小圖示，讓使用者在觸控螢幕上方便點選，且黑色區域從右方移至上方
▸ 繼續減少視域寬度 (小於 480) → 影像格網改變
▸ hTC 中呈現 (視域寬度小於 320) → 影像尺寸改變
(3) 一定要設計回應式網頁？
∗ 問題：是否需要花功夫做回應式頁面？
▸ 顧客是否要支援市場中大多數的網際網路使用者？若是，則需要回應式設計
▸ 顧客是否要求最乾淨、最快速、且最容易維護的程式？若是，則需要回應式設計
▸ 顧客是否了解不同的瀏覽器應該呈現些許的不同？若是，則需要回應式設計
▸ 顧客是否要求所有瀏覽器都應該呈現相同結果，包含 IE 8 或更低版本？若是，則不需要回應式設計
▸ 是否 70% 以上的網頁拜訪者使用 IE 8 或更低版本？若是，則不需要回應式設計
∗ 回應式設計並非萬靈丹
▸ 經費問題
✶ 如果經費充裕，為手機裝置特別開發另一版本的網頁是不錯的選擇
✶ 如果經費拮据，回應式設計是不二選擇
▸ 教導廠商客戶：網頁在不同的瀏覽器應該要呈現不同的結果
✶ 美工設設計者心目中大多是「固定寬度」的頁面，而且通常會要求網頁開發者要呈現和他們所設計一模一樣的結果
(尤其是印刷媒體出身者)，因此網頁如果在不同瀏覽器呈現不同結果，可能會造成無法結案！
✶ 因應廠商的這樣的要求，網頁開發者可能需要多花 30% 的程式設計時間來針對不同的瀏覽器或版本 (例如：IE 8 或更低版本) 做額外的設計，
這樣的問題最好透過「教育客戶」來解決，讓客戶了解：
# 讓較低版本的瀏覽器呈現些許不同，表示程式維護性高，未來修改的成本較低
# 不同版本的瀏覽器需要呈現完全相同，表示網頁會需要更多影像，不僅會讓網路速度變慢、伺服器負載增加，而且製作影像以及未來維護的成本都會提昇
# 較少量的程式就等於較快速的網頁，較快速的網頁就搜尋引擎而言，排名較高
# 使用低版本瀏覽器的人數正在大幅縮減，使用較現代瀏覽器的人數正在大幅增加，應該支援後者
# 最重要的，透過支援現代瀏覽器，才能讓各種裝置及各種視域瀏覽器的使用者都可以愉悅地瀏覽你的網站
