今まで携帯向けコンテンツを作ることはめったになかったんですが、
転職したので携帯コンテンツを作ることもしばしば。。。
そこである程度基本的なフォーマットを調べてみました。
ぶっちゃけどこまであってるんだか、よくわからんのですが、指標として一応。
- 1ページ当たりのファイルサイズは9kb以下に抑える(画像等含む)
- CSSは外部ファイルではなく、HTMLタグ内にstyleを書くようにする
- サイトの横幅は240pxか、スクロールバーの分を見込んで228px以内にする
- 文字コードはやはりShift-JISがいい。(最近の携帯はUTF-8でもいけるが対応機種を広めるのであればShift-JISが無難)
- 画像形式はJPEGかGIF。ただしGIFは一部の機種でしか使えないので、JPEGに統一するのが望ましい。
- Tableタグは使わない
- DOCTYPEの宣言は以下の通り。XHTML Mobileを宣言することが重要。クローラーにモバイルサイトだときちんと伝えるためには必要。
- フォントサイズの指定はDocomoは普通にHTMLと同様の指定方法でも問題ないが、auとsoftbankは問題あり。ピクセルで指定するのがいいらしい。
- mailtoを使用する場合、SoftBankはUTF-8のままURLエンコードしても問題ないが、DoCoMoとauはURLエンコード前にShift_JISに変換しておかないと、題名などの文字が化けてしまう。
- 回り込みはauのみfloat:leftで対応できなかったみたいなので、alignを指定する必要がある。
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>サイトタイトル</title>
</head>