モバイルサイトのXHTMLコーディング

■livedoorディレクターブログ
『ケータイ livedoor』のアクセスシェア
http://blog.livedoor.jp/ld_directors/archives/50756262.html

こちらによると
———————————————————–
docomoユーザー全体のうち FOMA 94%
auユーザー全体のうち WIN 98%
ソフトバンクユーザー全体のうち 3G 88%
———————————————————–
とあります。

過去に発売された下位端末では例えばDoCoMoの下位端末“50*シリーズ”は、
・表示可能なページサイズが少ない
・XHTMLが表示できない
・メールの受信可能な容量が少ない
などさまざまな制約があります。

しかし、『ケータイ livedoor』では3G 端末（FOMA・WIN・3GC）がそれぞれアクセスの9割を占めています。つまり、今までもよりデザイン表現の幅が広がるXHTMLでコーディングしているサイトが閲覧できる携帯電話が9割を占めているということになり、モバイルサイトのXHTMLでのコーディング方法が公開されています。

■livedoorディレクターブログ
『3G端末（FOMA・WIN・3GC）のモバイルサイトのコーディング＆デザイン』
http://blog.livedoor.jp/ld_directors/archives/51104376.html

気になる部分を抜粋
———————————————————–
■1ページあたりの容量について
ケータイ livedoor では画像とXHTMLファイルの容量を含めた30k ～ 50k 未満を目安に作っています。仕様的には100kまで可能ですが、3キャリアの中で Docomoの画面表示が比較的遅いため、ユーザへの表示ストレスを検証した上でこの容量としています。

■コーディングについて
i-modeの特徴
・外部 css 非対応
・インラインの css のみ対応
・疑似クラスは link　visited　focus に対応

EZweb・Yahoo!ケータイの特徴
・外部 css 対応
・head 要素へのまとめ書きに対応
・疑似クラスは link　visited　に対応

その他
・非対応のスタイルは無視して表示される

この特徴を考慮した上で、XHTML でコーディング、3キャリアで1枚の XHTMLファイルを読み込ませることを前提としたタグを紹介

□フォントカラーの指定
<span style=”color:#ff3300;”>テスト</span>

□フォントサイズ（小）の指定
<span style=”font-size:xx-small;”>テスト</span>

□ブリンクの指定
<span style=”text-decoration:blink;”>テスト</span>

■画像について
□拡張子
gifまたはjpg画像を1枚用意すると3キャリアで表示することができます。

□サイズ
画面に対して横240ピクセルがぴったりサイズと思いがちなのですが、ブラウザの表示領域は必ずしも横240ピクセルではありません。
ロゴ画像や装飾用の画像を横240ピクセルで作ってしまうと端末側で自動縮小がかかってしまうので、これを回避するために横220ピクセル ～ 230ピクセルで作成することをおすすめします。
———————————————————–
と細かく紹介しております。

今後のモバイルサイトにおいて、XHTMLでのコーディングはデザインの幅を広げるためには不可欠になります。