「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。
モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。
ですが、知っているのと知らないのとでは工数がかなり違ってきます。
一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。
今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェックすべき箇所をまとめてみた感じです。
デザイナーさんに関しては、その項目に気をつけてデザインしていただければ戻しがぐんっと減りますよ!って感じです。
分かりやすいようにサンプルデザインを作ってみました。
「これでhtmlでコーディングしてください」
と言われた場合で考えていきます。
前提条件は、
・3キャリア1ソース
・html(CSSは使用不可)
・文字コード:Shift-JIS
・改行コード:CR LF
対応端末は、
・docomo 901/701以降
・au WIN端末
・softbank 3G
です。
パッとみて指摘すべき箇所は以下の項目。
各チェックポイントの詳細は以下をどうぞ。
docomoの901、701、702、が対応端末にはいっている場合はtableの使用可否の確認します。901、701、702(一部)はtableが効きません(なかったこととしてレンダリングされます)。
tableは全く使わないのか、基本使わないがtable非対応機種で見ても大きな崩れがなければ使ってもよいのか、それとも気にせず普通に使っていいのかの確認をします。
901、701、702が対応端末に入っていなくても、念のため聞いておくのもいいかと思います。
※2009年10月31日修正
・902はtable対応しているため表示を削除しました。
・702の一部がtable非対応の旨追記しました。
ご指摘ありがとうございました。
ケータイデザインで出来ること出来ないことがまとめられた記事「携帯サイト(html)の制作に入る前に確認しておきたいチェック項目」 | ke-tai.org
bodyに背景色を指定するため、基本1色です(背景画像もbodyタグでのみ指定可能)。
複数色使いたい場合はtableの使用が必須です。
table非対応機種では無視されてしまうので場合によっては文字色が見えなくなる可能性もあるのでオススメできません。
複数の背景を色使いたい場合はxhtmlをオススメします。
枠線はtableを使う必要があります。よってtableが使えない端末では実現不可能です。
cssを使った場合でも、borderが使えないためtableの使用が必須になります。
901、701が対応端末に入ってくる場合は要注意です。
これは「【特集】冬の季節〜」のところです。
これも↑と同じ理由で実現不可。tableが使えない以上、テキストが折り返すと左端から次の行が始まります。
tableの使用が必須となります。よってこれも実現不可。
デザインする際にピタッと左右にくっつけてほしいところ。
そういうデザインがあがってきた場合でも、口頭で事情を説明することによって「左右の余白は開けなくていいですー」ってなるパターンが多いです。
今回のサンプルサイトでは3段階使っています。