響應式網頁設計

/in /by

響應式網頁設計 事實上已經是一個的標準。很多人仍然以為網頁設計是平面設計師的工作，仍然停留在千禧年代初那個 Dreamwaver 盛行的年代。今天網站網頁設計的要求是：

  • 快！不單是網站載入速度要快，更新內容亦要快。這不僅僅是關乎用戶體驗。 亦關乎網站排名。
  • 網頁製作要使用方便，更新內容不用依賴其他人或特殊工具。
  • 響應式網頁設計適合移動設備。今天更多的人使用移動設備而不是台式電腦來瀏覽網站。
  • 兼容不同瀏覽器 (Chrome, Firefox, Internet Explorer, Safari)。
  • 整合不同渠道 (Facebook, Instagram, Tweeter …) 作網上推廣。
  • SEO 優化結構， 並支持最新 CSS 3 和 HTML 5 技術。
  • 可以添加插件 Plug-ins 擴展功能配合業務流程。

響應式網頁設計其實是什麼？

響應式網頁設計 RWD 包括以下特性：

  • 採用流體網格 fluid grid 要求頁面元素大小以百分比的相對單位，而不是像像素或點的絕對單位。
  • 要求圖像以相對單位來確定大小，而不是像像素或點的絕對單位，以防止它們顯示在其包含的元素之外。
  • 採用媒體查詢 Media Queries 語法查詢設備顯示的特性，最常見的是瀏覽器的寬度，進而使用不同的CSS風格規則。

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