本Blog主要以紀錄小編工作上所遇到的點點滴滴,所收錄之文章來至各大媒體及Blog,幾乎皆非原創文章,僅提供小編本人進行記錄方便資料查找,並會註明出觸及連結,如有任何疑義請來信告知,謝謝!
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》
訂閱:
張貼留言 (Atom)
沒有留言:
張貼留言