[整理] RWD 響應式設計 網頁工具

RWD (Responsive Web Design) 響應式設計

意指

網站根據不同的裝置(載具)、螢幕大小解析度、瀏覽器支援度等,提供不同的畫面設計給使用者,相較於傳統的桌上型電腦或筆記型電腦,可針對手持式裝置更適切地提供易於閱讀與瀏覽的人機界面

詳細定義可見 Wikipedia : Responsive web design

在閱讀 「好感度 No.1 的網頁設計: RWD 不出槌法則,網站在任何裝置都完美呈現」 後,簡單記錄一下當中提到的工具與內容

 

尺寸對應工具

 

檢測優化工具

 

支援工具

 

圖檔壓縮

 

Web Fonts-網路字型資源

 

RWD Framework

  • Bootstrap
    • http://getbootstrap.com/
    • 由 Twitter 打造,靈活度高,含 Javascript、CSS、font 等相關檔案,內建 多個 icon 採用的 icon font 形式
  • Foundation
    • http://foundation.zurb.com/
    • 由 ZURB 打造,採用 mobile first 概念,適合製作於以 mobile 為先的網站,但檔案較大,本身沒有 icon 設計
  • Pure
    • http://purecss.io/
    • 由 Yahoo 打造,單純支援 CSS 的 RWD Framework,輕量,檔案小,適用大量客制化的網站,若需 Javascript Framework 需自行額外載入 ,本身沒有 icon 設計
  • SUSY
    • 使用 Compass 為基底,需有 Ruby 與 SASS 環境

 

RWD 線上平台檢測

 

RWD 檢測重點

  • CSS float 排版區塊
  • Media queries, ex: 可能出現橫軸區城
  • 內文排版, ex: 文字排版、斷句、舒適度
  • 多媒體測試, ex: 圖片、影片、音樂
  • 表單輸入與按鈕測試
  • 網站選單點擊、連結、按鈕測試
  • 第三方服務 (ex: 所見即所得編輯單、Facebook like、google plus / adsense)與廣告版位 等外掛測試

 

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *