company_logo
網頁設計及開發-網頁設計-RWD響應式網頁設計-RWD-RWD響應式網頁-RWD響應式-響應式網頁開發-BizHub商瞰

甚麼是RWD響應式網頁?哪些企業需要RWD?

撰文: BizHub資訊團隊
2021年11月08日
目錄

網頁開發並不簡單,尤其是當現在的電子設備日漸多元化,除了傳統大屏幕電腦之外,還有各種尺寸的手機、平板等。為了確保每一名用戶都能有100分的用戶體驗,網頁設計師需要考慮的因素越來越多。今日BizHub商瞰就和大家分享一下RWD響應式網頁設計,助你發掘更多提高網站轉換率的方法!

 

甚麼RWD響應式網頁?

 RWD的全稱為Responsive Web Design,中文譯作響應式網頁設計。響應式網頁能夠根據用戶的熒幕大小和方向,自動調整內容排版及外觀,確保在任何情況下,畫面都能呈現合適的比例。

 

RWD響應式網頁的運作原理是甚麼?

 RWD響應式網頁主要基於3大原理運作,分別是 (1) 流動網格(2) 多媒體查詢(3) 彈性圖像及媒體

 

1. 流動網格 (Fluid Grids)

簡單來說,RWD響應式網頁的HTML代碼並不會改變,只是透過在不同裝置上執行不同的層疊樣式表 (Cascading Style Sheets,即CSS) ,令網頁排版能夠根據裝置的熒幕尺寸、方向、分辨率、色彩能力及其它特性,呈現相應的視覺效果。

在RWD響應式設計的畫面中,元素會隨著視窗的擴大和縮小而重新排列。舉例來說,在電腦上看是平排的三個欄目,在手機上有機會變成分行的欄目,甚至是消失不見,視乎CSS的程式碼設定。

 

2. 多媒體查詢 (Media Queries)

設定好CSS後,網頁內容就會自動檢測用家的設備類型和瀏覽器的大小,從而顯示一個比例正確的畫面。如果你希望有更具體的例子,可以現在嘗試將瀏覽器向橫或向上自由拉伸,你會看到畫面會隨著瀏覽器的寬度、高度、方向等條件不斷調整,這就是多媒體查詢的演示。

 

3. 彈性圖像及媒體 (Flexible Images and Media)

為了讓網頁看下去更美觀,設計員通常都會加入圖片、影像等元素,而為了讓這些媒體不會因為畫面大小而變形,可以透過CSS溢出屬性來設定圖像的縮放比例,最大寬度是100%。亦有網頁會選擇直接將圖像裁剪成合適的大小,不刻意調整比例。

 

你需要RWD響應式網頁嗎?

 一個靈活的網頁設計可以為你的企業帶來諸多好處,如果你希望達到以下任何一個成效,就應該考慮建立一個RWD響應式網頁:

 

1. 提供一個流暢的用戶體驗

RWD響應式網頁的最大好處,就是能保證你的用戶不論是透過甚麼裝置瀏覽你的網頁,都能享受一致且舒服的體驗,不會因為從平板電腦轉到手機,而需要重新花時間適應網站佈局的更改,能夠在多個裝置之間無縫移動。

 

2. 提升搜索引擎優化的效能

搜索引擎優化的譯名為Search Engine Optimization  (SEO),最常應用於Google。由於Google非常重視用戶體驗,多次強調網站應以提供良好的使用者體驗為首要考量,所以如果你的網頁能夠透過設計有效留住用戶,自然可以在搜索結果的頁面獲得更靠前的排名。

 

3. 降低成本及節省時間

以往未有RWD響應式網頁的時候,企業需要購買兩個域名,再建立兩個網站版本,才能解決用戶使用多於一個裝置的潛在問題,程序相對複雜。而RWD響應式網頁正能將繁複的過程簡化,企業只需使用一個域名,便能滿足不同用戶的需要,任何更改只需做一次,就能一次過套用到所有版本上,大大節省人力及時間成本。

 

4. 獲取更多流量

採用RWD響應式網頁設計後,你的網頁外觀不會因為裝置的不同而出現任何錯誤,當頁面上的每一個元素都能清晰顯示,用戶自然會更樂意在你的網站上停留,減少跳出率的同時,亦能提升互動。這樣一來,你的網站便會在搜索引擎上取得更優秀的排名,為你的網頁帶來更多流量。

 

5. 增加轉換率

降低跳出率只是成功的第一步,更重要的是,RWD響應式網頁將有助你提高轉換率。由於RWD響應式網頁有助延長用戶在網站上停留的時間,換而言之,他們有更高的機率完成購買、填寫表格、下載資源等步驟,為你帶來更高轉換。

 

懂得編程才能創建RWD響應式網頁嗎?

並不一定。

 

現時許多受歡迎的網站架設工具,包括WordPress、Wix、Weebly等,都令RWD響應式網頁的創建變得十分方便,即使不懂得編程,也能透過拖放方塊輕鬆完成。

 

你唯一需要煩心的,就是該如何編排你的內容和圖像,讓你的網頁看下去更漂亮。

 

資料來源

Nielsen Norman Group

Smashing Magazine

Techopedia

總體評分

0
評論 (0)

Loading...

立即訂閱 BIZHUB
BIZHUB 編輯每天為你發送精選文章
詳情請參閱我們的私隱政策
立即訂閱 BIZHUB
BIZHUB 編輯每天為你發送精選文章
詳情請參閱我們的私隱政策