響應式網頁（Responsive Web Design）實作筆記

響應式網頁（Responsive Web Design）是一種設計概念，希望能讓網頁適用在不同的平台上。公司最近想對產品大改版，於是又來練練 RWD 摟！

設計與實作

第一步：設計三個版面架構

做三種尺寸的版面，分別是

• < 480
• 480 ~ 768
• 768 ~ 1024+

第二步：使用 Media Query 撰寫 CSS

這次並不會使用 Grid System，而是單純使用 CSS 的 Media Query。而在撰寫 CSS 的部份，如果是共通、可以共用的，我會放在 Common 的區塊，而其他針對特定尺寸的指令，便分別放在單獨的區塊裡，例如：

/* 超過 768px */
@media screen and (min-width: 768px) {
  /* ... */
}

/* 介於 480px 與 767px 之間 */
@media screen and (min-width: 480px) and (max-width: 767px) {
  /* ... */
}

/* 未滿 480px，即 479px 以下 */
@media screen and (max-width: 479px) {
  /* ... */
}

Demo

前天剛好跟一位在做餐飲的朋友吃飯，就用「食物」來當成這次實作網站的主題吧！Demo 網站 Food Sense

PC

Tablet

Mobile

後記

之前常有人提到，RWD 是有助於 SEO 的，可參考 4 SEO Benefits of Responsive Web Design。一來是網址統一，不浪費 link juice，另一方面是因為提高可閱讀性而降低網站的跳出率。但對於擁有複雜流程的網站而言，希望用一個版本的 HTML 再搭配不同的 CSS，而能適應 PC、平板、手機是困難的，因為流程與功能複雜，勢必會有流程變動或功能增減，所以可能的解法就是判斷平台或解析度，然後轉跳到不同的頁面。因此就演變成作兩個版本的 HTML - PC + 行動裝置（平板與手機）。但若決定做一個以上的版本的頁面，就需要考慮維護成本了。

推薦閱讀

• Udemy - Twitter Bootstrap in Responsive Web Design：線上學習課程，解說清楚、免費
• 手機版網站 - 概論整理
• 手機網頁技術介紹
• Responsive Web Design - 概論整理重點
• 4 SEO Benefits of Responsive Web Design
• Food Sense - A unique resource for thoughtful, food-loving eaters and home cooks who have a palate for plant-based eating - for themselves or their loved ones; three days a week, or every day of the year.：真正的 Food Sense 網站，這次練習主要參考的範例。

好用的測試網站

• Mobile Responsive Design Testing：可將所有狀況一次展開
• Responsive Design Checker - Do You Use Responsive Web Design：一次一種狀況
• Responsinator：可將所有狀況一次展開，以 Apple 產品為主，更為擬真
• Responsive Design Testing across Mobile and Desktop Browsers - iOS, Android, OS X, Windows