1

分享

RWD| 響應式網頁設計

響應式網頁設計 (Responsive Web Design),Ethan Marcotte 2020/05 提出的網頁跨平台瀏覽型態。使用者在不同載具設備上會自動依據不同的螢幕尺寸、解析度、將網頁的佈局排版調整成最適合的模式。
概念與原理:
  

主要建構在CSS3需要有相對支援的HTML5,CSS3的瀏覽器。

技術特點:
  • 流動式網格佈局(Fluid Grids):將原來固定的Grids 配置佈局由原先以像素為單位設計改為以百分比為單位設計。自動按照比例調整縮放網頁。
  • 易適應圖像(Flexible Image):圖像也必須配拿流動式網格佈局。
  • 媒體查詢(Media Queries):CSS2中的Media Type 發展而來,此技術主要用來進行資訊區塊的載入、判斷與篩選。(載具類型、螢幕尺寸、解析度)讓網頁在特定瀏器上可以自動轉換成合初樣試。一般分成三種版型:電腦螢幕、平板電腦、智慧型手機
優點:
  1. 開發成本與時間較低
  2. 維護成本較低
  3. 無需下載
  4. 提高網頁可用性。
  5. 有助於企業品牌調性一致。
  6. 有助於SEO:避免重複網站內容、保有一致性的鏈結、有利於使用者分享,讓觸及率、流量分析、停留時間提升。
  

#前三是和 app 的比較。

缺點:
  1. 開發時間較傳統網頁長。
  2. 不支援舊版瀏覽器。
  3. 無法加速載入速度。
  4. UI設計:需考慮各種載具、過於複雜的功能或過於細緻的介面不適合於小螢幕上顯示
  5. UX設計:需考慮不同使用族群的瀏覽動線與操作習慣。
#RWD 
分類:學習

「我們都無法成為自己想成為的大人」

評論
上一篇
  • 理財筆記| 被動投資
  • 下一篇
  • 閱讀∣ 蹺蹺板怪物
  • 更多文章
    載入中... 沒有更多了