デザインやFlashで多彩な表現ができるPC・スマートフォンのWEBコンテンツに対して、容量やキャリアごとの機能の対応に注意しなければならないモバイルサイト。
スマートフォンが普及しているとはいえ、今後もしばらくモバイルデバイスの需要が続くと思います。
そうですね～個人的な意見ですが、あと１０年はモバイル専用のサイト作りを考えなければならないと思う。
今後はFlashLiteやJavaScript対応など表現の多様化が来ると思いますが、モバイル固有の考え方が必要だと思います。
なのでモバイルサイト作成において、注意したいことを簡単にまとめとく。
・画像はGIFかJPEGにする
・画面サイズは240pxが基準
長いページだとスクロールバーがついて-10pxくらい
・CSSはインライン表記
キャリアによって内部参照や外部参照対応もある
共通のスタイルはインラインで固有スタイルは外部CSS にする
・XHTMLもしくはCHTML(コンパクトHTML→HTML3.0程度)
XHTMLが主流？
・文字コードはShift_JISが安定
・FlashLiteを使う場合は100KB以下(ページ全体の場合)
・横長バナー(170X40)は4KB 正方形バナー(45X45)は2KB前後
とにかく画像は容量の削減
1ページで画像の使用容量は50KB程にする
logo画像などは画像とbackground-colorをうまく使ってデザイン
PC同様に72ppi
・ボーダー（帯）
スタイルでもいいがキャリアによって対応がわからないので画像が安定
画像の場合は0.1KBなどとにかく軽量化
・GIFアニメは横長バナーの場合5KB以下
2、3コマくらいにする
・アイコンは画像でもいいがborder-leftをうまく使う
border-leftのwidthを太くborder-bottomはなしに
colorも豊富なので使える
・listはあまり使わない
理由はlist-style-typeをnoneにできない
ゆえにアイコンも使えずデザインが崩れる
私の技術で今のところ思いつくのはこの程度です。
その他何か追記などございましたらコメントして頂きたいです。
また間違いがありましたら厳しくご指摘お願い致します。
さぁ有名モバイルサイトを見よう見まねでコーディングしてみようっと！
もちろん公開はしません！！