主頁 / 網站制作教學 / 為什麼要響應性佈局 Responsive Layout?

為什麼要響應性佈局 Responsive Layout?

響應性佈局 Responsive Layout 帶來更好的用戶體驗。手機的普及已變了人們上網的習慣,人們更多時候是依賴手機上網。但是一般手機的屏幕只有幾英吋,如果瀏覽網頁時需要不斷放大縮小、上下拉動或者左右滾動才可以看清楚網頁內容,訪客很快就會失去耐性。新的 Responsive 技術解決了這個問題。以維基百科為例,當用戶瀏覽內容時網頁會自動跟據手機屏幕重新排列內容。

響應性佈局 Mobile

1. 版面寬度跟手機寬度協調,用戶再不需要左右滾動查看內容。

2. 利用 Tab 方法,將原來可能變得(由於寬度縮小)很長的內容以 Tab 顯示或隱藏方式發佈。

tab language

3. 將其他內容例如:語言選擇等等在手機版放在主頁內容之後。

現在我們利用 Responsive 模版在內容管理系統 Content Management System (CMS) 上亦可以達到 wiki 手機版的效果。當建立內容管理系統內容時有幾點要注意:

(一) 放棄以絕對大小值  (Absolute Size) 標示內容物件(例如:圖片)。應該改以相對值 (Relative Size) 完成,例 如:一個表格不要以〝Width:600px〞 標示400像素寬度,改以〝Width:100%〞 標示寬度,因為當有手機瀏覽時手機的屏幕寬度可能會是 400 像素,表格寬度是 600 像素絕對值會令表格不能在400 像素寬度手機之上全部顯示。

(二) 要利用 Tab 或 Accordion 時,需考慮用戶的反應,將內容以顯示或隱藏模式發佈。

accordion
(三) 引入第三方 Plugin 時要考慮該配件是否支援 Responsive,如果不支援最 好不要引入。

(四) Short code 代碼是模版開發商的代碼執行特別功能,例如:Testimonials 推 薦代碼顯示客戶推薦短評。 Pricing Table 顯示收費表,由於是由模版供應商提供而模版支援 Responsive ,所以代碼也是 Responsive,以 Column 為例。當在小屏幕觀看時一行2個行會自動列為2個一行橫行令內容更清楚顯示,所以要達 到良好的排版效果,需要好好利用 Shortcode 代碼。

 column-pc  column-mobile

響應式網上商店設計帶來幾個好處:

  • 響應式設計發明之前,如果要實現在移動設備上更好的用戶體驗 (減少用戶縮放、平移和捲動等動作),需要為移動設備開發一個特定版本網站。這種方法不僅是昂貴的,它也涉及了很多的冗餘維護網站工作。
  • 因為移動設備的大小屏幕分辨率參差很大,設計用於PC上觀看的產品圖片在移動設備上觀看時可能是過度細節。這將導致更多的網頁加載時間和更多的數據流量的消耗。響應式設計加上緩存 Caching 處理可以提高移動設備上網頁加載速度。

要注意的是市埸上有一些基於舊式架構的綱上商店並不支援響應性佈局而是仍然採用舊式表格 Table 結構,當顯示屏寬度變小時會按比例縮小,但不一定能夠全部顯示表格內容,響應性佈局就不一樣,可以自動流動到下一行而儘量利益顯示屏寬度。

Table Design
舊式表格 Table 結構
新New fluid design
新式 響應性佈局結構
Responsive layout 的好處是可適應不同屏幕大小。不單是手機、平板電腦,甚至 是 Facebook 的 Fan Page 亦可以利用Responsive layout。

以下是網站 Responsive layout 示範,如用不同手機或瀏覽設備之效果:

cms-M

以下是網上商店 Responsive layout 示範,如用不同手機或瀏覽設備之效果:

online shop- M

以下是論壇 Responsive layout 示範,如用不同手機或瀏覽設備之效果:

phpbb-M

上述例子使用 WordPress 網頁內容管理系統作示範。不同的網頁內容管理系統有不同的具體操作程序。

了解更多網頁設計

Facebook Comments

關於 WaiTing LI

香港SEO專家。專家地位並非紙上談兵自說自話而來,應該是基於由同業又或者權威的獨立第三方給予的評價。SEO專家地位大致可以從 Google 給予你所競逐一大籃子競爭性高的關鍵字排名結果推斷出來。我關於宣傳推廣、網店、SEO優化的文章取得很高排名,是搜尋引擎給予我專家效應 Topical Authority 的結果。SEO 和 SEM 關鍵字廣告又是一體兩面,應該是互相借力。所以有效關鍵字行銷亦必需弄通 SEO 概念。搜尋引擎優化最高境界是結合關鍵字廣告壟斷 SERP 排名結果。

也查看

強化網站安全 – 防黑客需要技術層面和管理層面配合

強化網站安全 可以在幾個層面上 …

發表迴響