2013年4月26日 星期五

Responsive Design (RWD) 響應式網頁設計測試要點


Responsive Design (RWD) 響應式網頁設計測試要點

何謂Responsive Design (RWD)

文字

●標題斷行狀況,可參考 macho.js 或是 balance-text
●設定禁則,例如公司名稱或不可斷句之處可以設 white-space: nowrap;
●過長連續文字,例如網址是否有設定 word-break: break-all
●透過 media query 設定 br { display: none; } 也可改變不同寬度不斷行的方法
●內文一行是否超過 25—30 字,若超過則放大字體,若不及則縮小字體。

圖片

●img 元件若超出內容框,是否會隨寬度縮小,設定為 width: 100%; 或是 max-width: 100%;
●img 若 html 有指定 height 是否有被重設為 height: auto;

常用 plugin

●任何的互動如有 hover 才動作的設定,需改為其他方式
●互動按鈕是否夠大足以讓手指瞄準該按鈕
●過度消耗 CPU, GPU 資源的特效請偵測 user-agent 為桌面瀏覽器才做,或使用有相同意義的圖片取代
●如有使用類似 Scroll To Fixed 的固定方式,在 mobile 取消或隱藏
●js 簡易偵測方式 https://gist.github.com/evenwu/5151795 或使用 http://modernizr.com
●取消類似 lightbox 滿版效果,或是特別設計手機版呈現方式
●社群媒體如 facebook 的分享文字寬度是否會超出版面
●社群媒體 embed 的 iframe 高度是否有垂直跳動問題,可透過 min-height 解決

Media

●flash media 像是 youtube, vimeo 是否有修改為彈性縮放,可參考 http://fitvidsjs.com 或是 http://alistapart.com/article/creating-intrinsic-ratios-for-video

測試方式

●縮放測試的瀏覽器寬度
●使用 resizer tool / bookmarklet
●使用 fire.app 的 auto livereload
●安裝 Xcode 開啟 iOS simulator
●安裝 Android SDK

resizer tool

http://lab.maltewassermann.com/viewport-resizer/
最真實,含 zoom 效果
http://www.responsinator.com
給客戶一覽用,效果不錯
http://responsive.victorcoulon.fr
優點是含鍵盤佈局
http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/
速度最快,但缺點是JS會失效
http://screenqueri.es
http://codebomber.com/jquery/resizer/

不支援 media query 的瀏覽器

●IE 8 以前
●firefox 3 以前
●safari 3 以前
●Opera 9 以前
解決方案 https://github.com/scottjehl/Respond

轉載自《Evendesign》

沒有留言:

張貼留言