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

モバイルサイトは携帯電話のキャリアや機種によって動作やレイアウトが異なる場合があります。これはそれぞれのキャリアや機種によって規格の違いがあるためです。

最近ではこの規格を統一しようという動きもありますが、いつになるか分かりませんし、古い機種の携帯電話を長く使われる方もいますので、しばらくはそれぞれのキャリアや機種での使用の違いを意識する必要があります。

以前は3キャリア共通で動作やレイアウトに違いのないようなコーディング方法となると制約が多く、デザインの自由度が低いのが悩みの種でした。

日進月歩のこの業界、3キャリア共通で使用できるコーディング方法が以前に比べだいぶ変わって来ましたので、モバイルサイトのXHTMLでのコーディング方法をご紹介します。
現在のモバイルサイトへのアクセスを調べていたところ「livedoorディレクターブログ」で『ケータイ livedoor』のアクセスシェアが公開されているのを発見しました。

■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でのコーディングはデザインの幅を広げるためには不可欠になります。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。