Response Design的一些設計哲學
1. 液態網格--捨棄過去常用的像素定意，改用類似百分比的方式來自我調適
2. 動態布局結構--CSS Media Query或透過JS，透過偵測屏幕大小的方式，吃不同的CSS設定，而能動態擺放每一個網頁Block的位置，例如三欄改為二欄或一欄
3. 顯示/隱藏內容--在某些Device上，某些行為是不適合運用的，這些內容就不該被傳送出來(並非隱藏，基於節省無線頻寬)
4. 液態圖片--可以細分成以下四種行為
(1) 縮放圖片--這裡指的是相同的圖檔，動態的進行縮放，這部分還算單純
(2) 響應式圖片--能夠依據不同的狀況，拋不同的解析度圖片至不同的Device，利用不同圖檔來節省頻寬，特別是無線環境下
(3) 強制禁止縮圖--有些圖片，例如公司 Logo，就可能不願意被同比例縮小，而是保留原始大小，就需要特別定義出來
(4) 自動裁減圖片--例如有的把圖檔設成背景來用，這樣在不同的環境下，就會出現類似自動裁剪圖片的效果
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快取後就可能不管到底是什麼設備，通通拋相同的圖檔出去
依據這篇文章 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就會變成相對重要，特別在圖檔處理可能不會是簡單的事，要特別留意。
除了響應式圖片這塊看起來技術上要考慮的點比較多之外，剩下我覺得變成是CSS+JS+XHTML操作的功力了，只是落實到實作上就會有許多交互影響要小心考慮，而有經驗的Response Design Development Team就會變成相對重要，特別在圖檔處理可能不會是簡單的事，要特別留意。
文章標籤
全站熱搜
留言列表
