Response Design的一些設計哲學
 
1. 液態網格--捨棄過去常用的像素定意,改用類似百分比的方式來自我調適
2. 動態布局結構--CSS Media Query或透過JS,透過偵測屏幕大小的方式,吃不同的CSS設定,而能動態擺放每一個網頁Block的位置,例如三欄改為二欄或一欄
3. 顯示/隱藏內容--在某些Device上,某些行為是不適合運用的,這些內容就不該被傳送出來(並非隱藏,基於節省無線頻寬)
4. 液態圖片--可以細分成以下四種行為
(1) 縮放圖片--這裡指的是相同的圖檔,動態的進行縮放,這部分還算單純
(2) 響應式圖片--能夠依據不同的狀況,拋不同的解析度圖片至不同的Device,利用不同圖檔來節省頻寬,特別是無線環境下
(3) 強制禁止縮圖--有些圖片,例如公司 Logo,就可能不願意被同比例縮小,而是保留原始大小,就需要特別定義出來
(4) 自動裁減圖片--例如有的把圖檔設成背景來用,這樣在不同的環境下,就會出現類似自動裁剪圖片的效果
 
響應式圖片處理的困難之處
 
4.(2)的響應式圖片這部分又特別複雜,
依據這篇文章
http://developer.51cto.com/art/201201/312187_1.htm 還會遇到不少實作上的問題,例如
(1)如何避免Java Script Race Condition的情況,導致無法預期Server會怎麼取出圖檔,或乾脆通通都給您(浪費頻寬)
(2)CDN問題,CDN快取後就可能不管到底是什麼設備,通通拋相同的圖檔出去
 
所以,該篇作者寫了很多的解法出來,可以解決不同的問題,但每種解法都有不同的副作用,有一些是他推薦的解法,但仍要應地制宜,怕我功力不夠,誤導了各位,所以強烈建議看該篇文章。
 
個人心得:
除了響應式圖片這塊看起來技術上要考慮的點比較多之外,剩下我覺得變成是CSS+JS+XHTML操作的功力了,只是落實到實作上就會有許多交互影響要小心考慮,而有經驗的Response Design Development Team就會變成相對重要,特別在圖檔處理可能不會是簡單的事,要特別留意。
文章標籤
創作者介紹

Min's Web Life: 談網路產業研究與生活閒聊

miin1130 發表在 痞客邦 PIXNET 留言(0) 人氣()