Well Develop (香港) 教學 整網站, 開網店, SEO優化, 推廣宣傳教學 
相關文章
響應性佈局 Responsive Layout 帶來更好的用戶體驗。手機的普及已變了人們上網的習慣，人們更多時候是依賴手機上網。但是一般手機的屏幕只有幾英吋，如果瀏覽網頁時需要不斷放大縮小、上下拉動或者左右滾動才可以看清楚網頁內容，訪客很快就會失去耐性。新的 Responsive 技術解決了這個問題。以維基百科為例，當用戶瀏覽內容時網頁會自動跟據手機屏幕重新排列內容。
 |  |
1. 版面寬度跟手機寬度協調，用戶再不需要左右滾動查看內容。
2. 利用 Tab 方法，將原來可能變得(由於寬度縮小)很長的內容以 Tab 顯示或隱藏方式發佈。
 |  |
3. 將其他內容例如：語言選擇等等在手機版放在主頁內容之後。
現在我們利用 Responsive 模版在內容管理系統 Content Management System (CMS) 上亦可以達到 wiki 手機版的效果。當建立內容管理系統內容時有幾點要注意：
(一) 放棄以絕對大小值 (Absolute Size) 標示內容物件(例如：圖片)。應該改以相對值 (Relative Size) 完成，例 如：一個表格不要以〝Width：600px〞 標示400像素寬度，改以〝Width：100%〞 標示寬度，因為當有手機瀏覽時手機的屏幕寬度可能會是 400 像素，表格寬度是 600 像素絕對值會令表格不能在400 像素寬度手機之上全部顯示。
(二) 要利用 Tab 或 Accordion 時，需考慮用戶的反應，將內容以顯示或隱藏模式發佈。
(三) 引入第三方 Plugin 時要考慮該配件是否支援 Responsive，如果不支援最 好不要引入。
(四) Short code 代碼是模版開發商的代碼執行特別功能，例如：Testimonials 推 薦代碼顯示客戶推薦短評。 Pricing Table 顯示收費表，由於是由模版供應商提供而模版支援 Responsive ，所以代碼也是 Responsive，以 Column 為例。當在小屏幕觀看時一行2個行會自動列為2個一行橫行令內容更清楚顯示，所以要達 到良好的排版效果，需要好好利用 Shortcode 代碼。
 |  |
響應式網上商店設計帶來幾個好處:
- 響應式設計發明之前，如果要實現在移動設備上更好的用戶體驗 (減少用戶縮放、平移和捲動等動作)，需要為移動設備開發一個特定版本網站。這種方法不僅是昂貴的，它也涉及了很多的冗餘維護網站工作。
- 因為移動設備的大小屏幕分辨率參差很大，設計用於PC上觀看的產品圖片在移動設備上觀看時可能是過度細節。這將導致更多的網頁加載時間和更多的數據流量的消耗。響應式設計加上緩存 Caching 處理可以提高移動設備上網頁加載速度。
要注意的是市埸上有一些基於舊式架構的綱上商店並不支援響應性佈局而是仍然採用舊式表格 Table 結構，當顯示屏寬度變小時會按比例縮小，但不一定能夠全部顯示表格內容，響應性佈局就不一樣，可以自動流動到下一行而儘量利益顯示屏寬度。
以下是網站 Responsive layout 示範，如用不同手機或瀏覽設備之效果：
以下是網上商店 Responsive layout 示範，如用不同手機或瀏覽設備之效果：
以下是論壇 Responsive layout 示範，如用不同手機或瀏覽設備之效果：
上述例子使用 WordPress 網頁內容管理系統作示範。不同的網頁內容管理系統有不同的具體操作程序。
了解更多網頁設計
