本電商文目錄
台灣電商名詞解釋：RWD是什麼？
有沒有聽過人家說：「你家網站沒有手機版。」「這家網站沒有RWD。」這樣相關的對話呢？這篇短文就是來說明什麼是RWD這個東西。
RWD：Responsive web design 響應式網頁設計
翻譯有很多：
- 響應式網頁
- 自適應網頁
- 手機版網頁
- 變形蟲
- 手機版網頁
總之，就是依照RED架構做出來的網站，使用手機看、桌機看，網站都會自動縮放，去符合設備的寬度。
電商中RWD的重要性：
因為現在大家都用手機在看網站。
所以一個電商網站一定要能夠支援手機版。這樣才不會造成好不容易花錢引來流量，但消費者用手機一看網站，就發現是整個桌機版硬塞到手機中。體驗會很差，人就跑掉。
所以製作網站前請務必詢問有無支援手機版網頁，這個是規格問題，很難靠日後加錢給人家馬上就有。我們在業界，知道直到今年，依然還有一些電商系統商並無提供手機版網頁。原因有很多種。但在我們業內看來，RWD已經應該算是「電商的標準配備」了。沒有手機版網頁，電商真的是，不知道有什麼好做的。
一個電商網站沒有RWD，所帶來的損失無以計數。
現在的消費者網購幾乎都使用手機。手機已經變成流量的入口。桌上型電腦？大概只有在工作的時候使用。一回到家，使用手機就能滿足絕大部份需求了。並且不用到專家來講，我個人認為這個現象只會越演越烈。等到現在的小屁孩長大了，桌機、筆電的地位將被再一次地削弱。畢竟他們是滑著手機長大的。認為網路購物就是手機的事情才對。
RWD設計的規範
網頁採用RWD為規範下去設計，最主要的影響在於「寬度」的寫法不同。寬度在以前寫網頁，都是固定的。比方說這張banner圖寬度960px。這是桌機時代的做法。
現在RWD則是寬度設定為100%。指的是這個設備有多寬，就給他吃到滿。如此一來，圖片寬度就可以隨著設備的寬度同步調整。畢竟手機寬度非常多樣，還有「橫屏」的需求呢。再加上「平板」（蘋果長度寬度又是特規）因此傳統的「固定寬度」寫法已經不能夠滿足這麼多樣的設備了。造成怎麼開都是破版。自然需要一套新的標準，來讓網頁自動「適應」開啟它的設備。100%這種百分比的寫法設計，很大程度地解決問題。
手機版網頁業界真正專業成本高昂的做法
說起來，RWD的確已經能搞定95%以上的手機設備瀏覽體驗以及絕大部份的手機網購電商需求了。但業界真正專業的做法，還是不依賴RWD這種網頁撰寫方式的。
原因在於，RWD雖然是自適應，但追究細節到底，還是不如獨立一份手機版網頁前端碼來得精準。所以，業界真正專業的做法（代價是「錢」）是這樣：
前端工程師與美術合作設計出「兩份」前端code ，並且由前端撰寫一支script 主動判斷發出需求的設備來源是手機還是桌機。如果是桌機；則餵給這個user桌機版的版型code。如果是手機；則餵給這位user mobile 板子。做得更加細節則是順便記錄下user的手機設備型號、連線環境（3G or WIFI) 設備環境（移動中or室內靜止）等等非常細節的資訊。
國外的第三方可以做到這一點。雖然我還不知道，為什麼分析需要分析到移動狀態、室內靜止。國內電商廣告操盤不太需要到這個地步。APP開發商比較需要。
簡易的RWD檢查方式-絕大多頭瀏覽器
要判斷一個網頁是否有RWD，有個非常簡單的判斷方式。但注意，這個方式並無法檢查到目標物使用script判別設備然後餵入手機HTML碼哦。也就是說人家用的是「一套給桌機、一套給手機」的話，這個招數就沒用了。
方式為打開瀏覽器，調整視窗寬度，看看網頁內容是否會隨著視窗大小自動做更換。
進階的RWD檢查方式-Chrome瀏覽器為例
Chrome不愧為開發者最喜歡的瀏覽器。自帶很多有的沒的工具。Chrome 比較好的地方在於，可以直接檢查這個網頁的手機在「主流設備」上的呈現。主流設備就是指「各代iPhone」以及「橫屏」時，網頁的RWD表現如何。以下是範例：
檢查網頁有無RWD
步驟：「右鍵」>「檢查」（不是檢視原始碼喔）>「選取手機」
RWD Chrome工具
檢查各種手機RWD表現
步驟：「右鍵」>「檢查」>「選取手機設備」
RWD手機主流設備
原則上，iPhone看一看，就差不多了。iPhone的尺寸畢竟比較特規。只要iPhone的RWD看起來沒有破版，那就幾乎算是OK了。
檢查「橫屏」（就是手機放一邊）
步驟：「右鍵」>「檢查」>「找這個圖」
RWD手機橫屏
手機橫屏，老實說需求比較少。但是依然可以在瀏覽器上面檢查。大體上也就看看網頁在橫屏時會不會破版就好。
電商手機版網頁、RWD考試時間
01.________
電商技術領域中，「RWD」「手機版網頁」技術上市同樣一個東西嗎？
(A)是。
(B)不是。
02.________
RWD網頁的特性是「綁寬度不綁高度」，那麼在網頁顯示上，banner這種橫式長方形的圖片，由於前面綁寬度的限制，導致手機上看原本桌機上顯示是大大張的banner圖片變得很小張，字都擠在一起。應該怎麼作會有比較好的體驗呢？
(A)這是RWD的致命傷，無解也沒辦法解。
(B)設計好行動裝置的圖片，當讀取到連結設備是行動裝置時，自動拋出行動裝置大小的另一張banner圖片。
(C)直接隱藏行動裝置讀取banner圖片，將行動裝置顯示起來不漂亮的圖片通通隱藏起來
無留言