電腦登入 Line 或是 FB Messenger 時(shí)，打開朋友傳過來的連結(jié)，卻發(fā)現(xiàn)解析度很低，還只用到一點(diǎn)點(diǎn)螢?zāi)伙@示區(qū)塊，看起來就跟在手機(jī)上瀏覽時(shí)一樣的經(jīng)驗(yàn)?zāi)?？（通常都是你朋友們手機(jī)傳來的?。?/span>

若是能仔細(xì)看一下連結(jié)，非常有可能在 https:// 後面，都會(huì)看到「 m. 」的網(wǎng)址形式。代表點(diǎn)擊進(jìn)去，將會(huì)是瀏覽「手機(jī)版」網(wǎng)站，而非 RWD 響應(yīng)式網(wǎng)頁設(shè)計(jì)的網(wǎng)站。

左邊是 FB 行動(dòng)版，右邊則是購物網(wǎng)站行動(dòng)版

手機(jī)版網(wǎng)頁－過渡產(chǎn)物

手機(jī)版網(wǎng)頁是在 RWD 設(shè)計(jì)尚未普及時(shí)的趨勢主流，在 iPhone 4 左右的年代（嘿嘿，用手機(jī)型號(hào)當(dāng)做一個(gè)年代忠實(shí)的反映出手機(jī)不管在大小、速度、性能上，給人類的改變有多大），當(dāng)時(shí)還有流行過一波「人人都做 App 」的時(shí)代，但隨著 Html 5 與 css 的完整性慢慢提升、各大瀏覽器已禁用速度緩慢的 flash ，漸漸地，響應(yīng)式網(wǎng)站設(shè)計(jì)以：「內(nèi)容為水」（ Content is Water ）的核心概念崛起，在現(xiàn)在早已成為網(wǎng)頁設(shè)計(jì)的標(biāo)準(zhǔn)配備。

現(xiàn)在仍有許多「大型網(wǎng)站」仍使用「手機(jī)版網(wǎng)頁」的設(shè)置，不過都會(huì)有些特別的前提，像是蘋果日報(bào)（資訊量大且許多人使用手機(jī)瀏覽）、臉書 Facebook （但許多人手機(jī)裡都有 Facebook 的 App ）、大型購物平臺(tái)網(wǎng)站（近來也慢慢整合 App 、會(huì)員機(jī)制，希望的就是消費(fèi)者黏著度更高，像是東森購物、蝦皮等等）。

手機(jī)版網(wǎng)頁可說是彈性切版問世之前的折衷選擇，憑伺服器自動(dòng)判斷顯示螢?zāi)坏慕馕龆龋?breakpoint ），使得進(jìn)到網(wǎng)頁的使用者自動(dòng)切換成手機(jī)版瀏覽，的確是當(dāng)時(shí)因應(yīng)手機(jī)螢?zāi)话l(fā)展還存著許多變數(shù)，螢?zāi)唤馕龆任蓙y的折衷選擇。

相信許多企業(yè)也在當(dāng)時(shí)可能找過 App 開發(fā)商，或者設(shè)計(jì)過手機(jī)版網(wǎng)頁，但隨著 2011 年後， RWD 被廣為人知，Google 於 2015 年正式宣布行動(dòng)裝置的年代到來（Mobilegeddon），更讓一波波網(wǎng)站改版實(shí)現(xiàn)。

內(nèi)容為水的概念，就說明內(nèi)容依照載具變化，是形容 RWD 最好的比喻（來源）

手機(jī)網(wǎng)頁與 RWD 網(wǎng)頁優(yōu)劣比較

好的手機(jī)版網(wǎng)頁，會(huì)做的與電腦版有相同的品牌識(shí)別，並且針對(duì)手機(jī)操作的 UI 優(yōu)化。但是不好的手機(jī)版網(wǎng)頁設(shè)計(jì)，往往讓使用者彷彿進(jìn)到一個(gè)新的網(wǎng)頁，動(dòng)線和使用情境與原本的電腦版網(wǎng)頁差距甚大，甚至?xí)姓也坏劫Y料、需求無法被滿足的情況，這就不是企業(yè)所樂見的。

不可避免的，建立了第二個(gè)網(wǎng)站，就需要人力來維運(yùn)（沒錯(cuò)，手機(jī)版網(wǎng)頁維護(hù)通常視作另一個(gè)網(wǎng)站）。確認(rèn)文章是否有更新、產(chǎn)品上架時(shí)是否兩邊一致、有無錯(cuò)誤連結(jié)的頁面等等，都會(huì)是維護(hù)另一個(gè)手機(jī)版網(wǎng)站的繁雜工序。這些步驟當(dāng)然可藉由程式來簡化，但還是比不上在網(wǎng)頁設(shè)計(jì)之初，即採用 RWD 的設(shè)計(jì)來的簡單、直覺。

另一個(gè)手機(jī)版網(wǎng)頁的重大缺點(diǎn)，即是不利於 SEO 和網(wǎng)域的名聲累積。對(duì)於搜尋引擎來說，手機(jī)版網(wǎng)頁與電腦版會(huì)視作兩個(gè)不同的網(wǎng)頁，當(dāng)使用者搜尋某一關(guān)鍵字時(shí)，Google 會(huì)針對(duì)可能的瀏覽時(shí)間、與頁面互動(dòng)的情況來判斷排名，有可能完全搜尋不出其一的網(wǎng)站內(nèi)容，最差的情況還有可能變成「重複內(nèi)容」，導(dǎo)致網(wǎng)站成為 Google 的黑名單。（此情況是可以避免的，後續(xù)將有文章提及。）

什麼網(wǎng)站可能需要「手機(jī)版」的設(shè)計(jì)

? 網(wǎng)站資訊量極大，像是新聞、資訊匯集站。舉裡來說，像是各大新聞網(wǎng)、大型入口網(wǎng)站。但採用這樣的作法，也要大到不是很在意 SEO 和已經(jīng)壟斷某種程度的流量了。

? 商品繁多之購物型網(wǎng)站。若你是屬於像是 momo 購物、樂天這樣的購物平臺(tái)網(wǎng)站，因期分層、商品種類繁多，有時(shí)候需要針對(duì)手機(jī)的使用者經(jīng)驗(yàn)重新規(guī)劃，手機(jī)版或是 App 都會(huì)是解決之道，還可以搭配各種會(huì)員的玩法來增加回購等電商指標(biāo)。（若商品品項(xiàng)不多的中小型電商，WordPress 內(nèi)建許多模版，都可以達(dá)到很好的 RWD 效果了！）

? 不管電腦版啦！有些網(wǎng)站因?yàn)樾再|(zhì)，可能是短期活動(dòng)，可能是瀏覽者僅有 10% 以下使用電腦瀏覽。那麼就乾脆做一個(gè)手機(jī)專屬的網(wǎng)站，此時(shí)也不用特別稱作「手機(jī)版」，而是：「我的網(wǎng)頁就是長這樣！」

RWD 身為標(biāo)準(zhǔn)配備，你怎麼能夠不認(rèn)識(shí)他

響應(yīng)式網(wǎng)頁設(shè)計(jì)，英文全名是 Responsive Web Design，維基百科上的定義為：『 RWD 是一種網(wǎng)頁設(shè)計(jì)的技術(shù)做法，該設(shè)計(jì)可使網(wǎng)站在不同的裝置（從桌面電腦顯示器到行動(dòng)電話或其他行動(dòng)產(chǎn)品裝置）上瀏覽時(shí)對(duì)應(yīng)不同解析度皆有適合的呈現(xiàn)，減少使用者進(jìn)行縮放、平移和捲動(dòng)等操作行為?！?/p>

以 WordPress 模版建置來說，現(xiàn)在幾乎所有模版都包含了 RWD 的設(shè)置，只是隨著每一次切版，調(diào)整欄位，在某些解析度的呈現(xiàn)上，慢慢失去預(yù)設(shè)完美的樣式。對(duì)於沒有工程背景的客戶來說，無論找有經(jīng)驗(yàn)的網(wǎng)頁設(shè)計(jì)公司，或是對(duì)於網(wǎng)頁技術(shù)了解的 freelancer ，都能在模版的基礎(chǔ)下順利修改，以達(dá)到 RWD 版型的宗旨：「 Mobile First 」 ，來呈現(xiàn)品牌在網(wǎng)路的最大門面！

網(wǎng)站能否在手機(jī)上正確顯示，已成為主流

（圖為 CTK Pro 作品）

延伸閱讀

RWD 與表格的愛恨情仇

影片在 RWD 網(wǎng)站內(nèi)的調(diào)整