Responsive Web Design

的"能"與"不能"

黃婉貞

MOSUT x Tainan.py 2014/11/22

企劃在乎的那些事兒 #1

有一天…

“請問一下國內有RWD做得不錯的購物網站嗎？”

“………………？！”

RWD的定義

Responsive Web Design 響應式網頁設計

同一份HTML使用 CSS Media Query 做調整，先載入所有元件，再隱藏不需要顯示的元件。

在不同尺寸的瀏覽器與裝置上，達成最佳易讀性。

http://www.smashingmagazine.com/

然後

“請問你的RWD，是包含AWD(PC版/Mobile版)的廣義RWD嗎？”

“………………？！”

Adaptive Web Design 自適應網頁設計

不同的HTML – PC版/Mobile版不同裝置只載入需要顯示的元件，適用於窄頻寬。不同裝置，網址不同，影響SEO。

http://www.momoshop.com.tw/ http://m.momoshop.com.tw/

AWD的定義

神如是說

“AWD不用轉址，只是跟RWD用不同的方式規劃，更專注在提供更好的互動體驗，用的是同樣技術，你可以說AWD是比RWD更好的解法，但不一定需要不同網址。”

(小小聲謎之音：神怎麼沒講要怎樣才能相同網址？)

神的啟示

Situational Web Design 情境式網頁設計

SWD的定義

“最後一項是說給使用者需要的東西，然後另外吐不一樣的東西給搜尋引擎，哈哈哈...好邪惡”

企劃的結論

預算 多：Native App 少：AWD 非常少：RWD(能省錢)人力 多：AWD+RWD 少：RWD

內容 電子商務 ：AWD BLOG、新聞：RWD(不能適用複雜架構)

未來 SWD(?)