身處科技時代，不是軟體工程師也要了解的網頁設計基礎概念！
同樣的網站，在不同規格大小的設備上顯示，也不會有排版混亂的問題，就是仰賴響應式網頁設計（Responsive Web Design, RWD）及自適應網頁設計（Adaptive Web Design, AWD）。
定義
RWD及AWD是二種現代網頁設計必備的基礎技術，讓使用者無論使用電腦、平板、手機等各式設備來瀏覽網站，都能獲得流暢的使用者體驗，不會發生網站破圖、排版與格式混亂等問題。
應用方向：先了解誰適合誰？
RWD適合追求「跨裝置體驗」的網站，尤其是內容經常更新的網站類型，有助於SEO。例如：
部落格
電商平台
AWD適合針對「特定裝置」進行「細節設計」的網站，內容、功能相對固定，需要更多的維護工作。例如：
企業品牌網站
存放大型繁雜資料庫的網站
響應式（Responsive Web Design, RWD）
自動動態調整網頁佈局，使其適應不同螢幕尺寸。
語法設計 流式佈局：利用相對單位（如百分比）來設計，使內容能夠根據視窗大小自動調整。
Media Queries：依賴「CSS媒體查詢」調整顯示，根據裝置特性(螢幕寬度、高度、解析度)應用不同的CSS規則。
單一HTML結構，根據裝置搭配不同CSS樣式。
適用場景 多裝置瀏覽：使用者來自各種裝置，RWD是理想的選擇。
內容頻繁更新：只有一套HTML/CSS，維護更新相對簡單。
SEO友好：能確保網站在所有裝置上的一致性，因此Google搜尋引擎會優先推薦RWD設計的網站。
自適應（Adaptive Web Design, AWD）
預設幾個常見螢幕尺寸，設計獨立的佈局和樣式版面，以適應不同裝置，使用者體驗更佳。
語法設計 預設樣式：為特定的螢幕尺寸設計固定的佈局，根據裝置類型，自動從設計好的多個版面中選擇最合適的樣式。
多套版面：AWD 也使用單一的HTML結構，但會透過CSS或JavaScript，從預訂設計好的樣式中選擇一個最適合的，因此實作中需要更多的樣式規則來處理不同尺寸。
適用場景 需要精細設計、內容較少變動的網站：在固定尺寸的裝置上提供最佳體驗。
大型網站或複雜應用：涉及大量資料展示或複雜功能的網站，可受益於AWD的專門設計。
遇到的挑戰？
RWD 不適合精細設計：使用流式佈局和CSS媒體查詢來自動調整網頁顯示，設計複雜佈局時，需要大量的CSS媒體查詢，使樣式表變得非常龐大、難以維護。
無法處理特殊設備：處理極端螢幕尺寸時效果不佳。
AWD 維護成本高：基於預定義的裝置尺寸來設計獨立的樣式表，因此每次更新內容或設計時，需要調整所有樣式表。
科技裝置推陳出新，需要處理的樣式表越來越多。
Comments