Responsive Web Designについて調べて、実践してみた - ぺーぺーエンジニアのおぼえがき

http://www.alistapart.com/articles/smartphone-browser-landscape/
上記、Smartphone Browser Landscapeの記事でEthan Marcotteさんが提唱。

具体的には下記の方法で実現する

普通にpx単位でデザインする

margin, paddingを%にする

対象要素の大きさ / 全体の大きさ * 100

Fluid imageとは画面の大きさにより画像を拡大、縮小させる指定方法

・IE以外

img,object {
  max-width:100%;
  max-height:auto;
}

・IE
※max-widthをサポートしていない為

img {
  width:100%;
  height:auto;
}

上記調査から「480px」, 「768px」,「1024px」が多く使われていることがわかる
画面サイズに合わせて、スタイルを変える

文字サイズやフォントスタイルをディバイスに合わせる
特に480pxの画面での文字サイズはPCの80%くらい

多分、この設計の問題点は表示上はディバイス対応されているが、HTMLや画像などのコンテンツはディバイス対応されていない点。
つまり、PCと同じ量のコンテンツ、画像をスマフォなどの細い回線にダウンロードさせている点である

対応策として

などなど、スマフォへの負荷を抑える試作が必須

実際、上記allwebでも説明させているように、海外のコンテンツはhtmlやCSSも圧縮されている