電商Tony陳RWD網頁設計

台灣電商名詞解釋001:「RWD」

電商名詞解釋

台灣電商名詞解釋: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碼哦。也就是說人家用的是「一套給桌機、一套給手機」的話,這個招數就沒用了。

View post on imgur.com

方式為打開瀏覽器,調整視窗寬度,看看網頁內容是否會隨著視窗大小自動做更換。

進階的RWD檢查方式-Chrome瀏覽器為例

Chrome不愧為開發者最喜歡的瀏覽器。自帶很多有的沒的工具。Chrome 比較好的地方在於,可以直接檢查這個網頁的手機在「主流設備」上的呈現。主流設備就是指「各代iPhone」以及「橫屏」時,網頁的RWD表現如何。以下是範例:

檢查網頁有無RWD

步驟:「右鍵」>「檢查」(不是檢視原始碼喔)>「選取手機」

電商Tony陳RWD

RWD Chrome工具

View post on imgur.com

檢查各種手機RWD表現

步驟:「右鍵」>「檢查」>「選取手機設備」

電商Tony陳RWD手機主流設備

RWD手機主流設備

原則上,iPhone看一看,就差不多了。iPhone的尺寸畢竟比較特規。只要iPhone的RWD看起來沒有破版,那就幾乎算是OK了。

檢查「橫屏」(就是手機放一邊)

步驟:「右鍵」>「檢查」>「找這個圖」

電商Tony陳RWD手機橫屏

RWD手機橫屏

View post on imgur.com

手機橫屏,老實說需求比較少。但是依然可以在瀏覽器上面檢查。大體上也就看看網頁在橫屏時會不會破版就好。

電商手機版網頁、RWD考試時間

01.________

電商技術領域中,「RWD」「手機版網頁」技術上市同樣一個東西嗎?

(A)是。

(B)不是。

02.________

RWD網頁的特性是「綁寬度不綁高度」,那麼在網頁顯示上,banner這種橫式長方形的圖片,由於前面綁寬度的限制,導致手機上看原本桌機上顯示是大大張的banner圖片變得很小張,字都擠在一起。應該怎麼作會有比較好的體驗呢?

(A)這是RWD的致命傷,無解也沒辦法解。

(B)設計好行動裝置的圖片,當讀取到連結設備是行動裝置時,自動拋出行動裝置大小的另一張banner圖片。

(C)直接隱藏行動裝置讀取banner圖片,將行動裝置顯示起來不漂亮的圖片通通隱藏起來

你也許會喜歡

無留言

發表留言