携帯サイトをXHTMLとCSSでリニューアルしてみた。

カレンダーの通販サイトE-カレンダー.comの携帯サイトをオープンして2年目。

あまり派手さのないデザインだったため、思い切って、XHTMLでリニューアルしてみた。
と言っても、ほとんど見た目のリニューアルのみですが、簡単にやった事をまとめてみます。

今回のリニューアルでやった事

• 絵文字は使わず
• HTMLからXHTMLに変更
• HTMLのキャッシュを保存しないようにした

<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />

• DOCOMOの端末は外部スタイルシートに対応していないため、divやspan要素にstyle属性を記述。
  • XML宣言は書かなくても大丈夫っぽい。
  • DOCTYPE宣言もなくても大丈夫っぽい。
  • background-color:でdivに背景色を指定できるので、表現の幅が広がった。
  • 結果：divとspanのオンパレード。
  • 疑問：h1〜h6にfont-sizeを指定しても、一部機種では無視される？なので、h1〜h6タグが使いにくい。
  • display:block;とかはできないっぽい。
• centerタグは無視される機種があるので、text-align:center;にした方が無難。
• CSS:font-sizeはxx-small、medium、largeが有効っぽい。x-smallでは小さくならない機種がある。
• DOCOMOの機種はmarqueeタグが使えない。divにstyle="display:-wap-marquee;"を指定するとmarqueeになる。
• DOCOMOはheader("Content-Type: application/xhtml+xml");をPHP側。

• ユーザビリティに関する変更
  • 商品一覧画面でデフォルトで画像も一緒に表示するようにした。画像なしでも表示可能に。
  • フォームでinputタグの属性maxlengthを指定。auとソフトバンクは文字数として扱われ、DOCOMOはバイト数になるらしい。
  • ショッピングカートで割引メッセージとレコメンド機能をつけた。
    • アンカータグ<a name="recommend"></a>でオススメ商品にジャンプ。たぶん、ほとんどの機種で有効？
    • 
• テキストフィールドのistyle属性とstyle属性の"-wap-input-format:"の両方を記述。

• 要望
  • DOCOMOは外部スタイルシートに対応して欲しい
  • auはSSLエリアでもUTF-8を可能にして欲しい
  • ソフトバンクとauはシミュレーターをなんとかして欲しい
  • 業界全体で規格統一を...

一応、こんなところか。
しかし、backgroud-color使えるだけで見た目がかなり改善された気がする。
あとは、注文に繋がるかどうか、ゆっくり見守っていきたい。

[注目している本]
この内容次第では、また手直しをするかもしれない。

携帯サイト制作 WEBデザインの新しいルール
発売日：2008-10-22
発送時期：近日発売　予約可
ランキング：13136

詳細をみる(Guppyで詳細をみる)

[注意]間違いは結構あると思いますので、その際はいろいろと指摘してくれるとありがたいです。

全体の画像