2011-05-21

Responsive Web Designについて調べて、実践してみた

web Design

Responsive Web Designとは

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

http://all-web-blog.blogspot.com/2011/03/blog-post_09.html
を参考に実践してみる

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

ピクセルデザインをする
ピクセルデザインを相対値(%)に変換する
画像はFluid imageにする
メディアクエリを指定する
Responsive Type Settingsを設定する

1 ピクセルデザインをする

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

2 ピクセルデザインを相対値(%)に変換する

margin, paddingを%にする

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

3 画像はFluid imageにする

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

・IE以外

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

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

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

4 メディアクエリを指定する

https://spreadsheets.google.com/ccc?hl=en&key=t4vQwiyPh3U7piST8Ptc3mw&hl=en#gid=0

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

5 Responsive Type Settingsを設定する

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

注意点

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

対応策として

html,css,jsの圧縮
js,css等の最低化、高速化
CDNを利用した配信
expireヘッダを用いたアクセス数制御

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

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

Demo

http://www.ksrtmyk.info/liquid/index.html

2011-05-21

Cocproxyを入れてみた

javascript css Mac

ruby1.9のインストール

ruby1.9前提なので、入れる
ruby1.8でも動いた。。。

$ brew install ruby

準備

利用フォルダの作成

$ mkdir -p cocproxy/files

書き換え対象ファイルを用意

$ cd cocproxy/files
$ curl -O http://www.rakuten.co.jp/com/inc/home/20080930/beta/css/liquid/common.css

ダウンロード

$ cd ../
$ curl -O http://svn.coderepos.org/share/lang/ruby/cocproxy/proxy.rb

確認

$ tree
.
├── files
│        └── common.css
└── proxy.rb

起動

cocproxyの起動

$ ruby proxy.rb

ブラウザの設定変更

ブラウザのプロキシ設定をlocalhost:5432にする

修正

files/common.cssを適当にいじる

アクセス

http://www.rakuten.co.jpにアクセス
common.cssの修正が反映される

停止

proxy.rbの停止

$ ps x | grep proxy.rb
$ kill -INT [プロセス番号]

注意点

キャッシュのせいで変更にならない場合があるので、その場合は下記URLのアクセスする

http://[対象のURL]?clearcache=1