スマホサイトで気をつけること

スマホサイトのことを勉強しようと思い、
本を買った。
主にデザインとかコーディングに関する内容だけど、
知ってて役立つものがあったのでメモしておこう。

スマホは向きに合わせて画面が回転するので、
縦横、それぞれでの閲覧を想定してリキッドデザインを採用したほうがいいとのこと。
横幅は相対値で指定しよう。

iPhone4向けにiPhone3G/3GSの倍の大きさで画像を書き出す。
これはiPhone3G/3GS用のサイズで書き出すと、
解像度が大きいiPhone4では画像が引き伸ばされて表示されてしまうため。
このへんは色々テクニックがあるみたいなので↓が詳しい。

なにやら大変そうだ。

Androidはデバイスごとにフォントが違うので、
iPhoneを基準にしてヒラギノ角ゴで制作をしたほうがいいらしい。
フォントサイズは画面の大きさを考慮して10px以上。
Retinaディスプレイのこともあるので実際は2倍の20pxになるらしい。

適度な余白がないと見づらいらしい。
でもこれはデザインにもよるかな。
余白ないほうがいい場合もあると思う。
Retinaディスプレイでは20pxにする。

端末ごとの解像度の違いで奇数サイズのままでは粗さが目立つ。
画像の拡大、縮小を考慮してすべて偶数サイズで準備する。

アップルによるとボタンやアイコンは44px以上のサイズでないとユーザーが押し間違えるとのこと。
Retinaでは88px以上にする。

こうして見ると、
画面の解像度に関することがほとんどだなー。
どうするのが一番スマートなのかまだよく分からない。
JSやサーバー側で端末ごとに切り替えるのがいいのかな。
その他いろいろ気づいたことを追加していこう。
ちなみに買って読んだのはこちら。