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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（圖為 CTK Pro 作品）

延伸閱讀

RWD 與表格的愛(ài)恨情仇

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