インクルーシブデザインワークショップの告知ページの携帯用HTMLとCSSを書いたので、せっかくだから公開しておきます。
モバツイにインクルWSの広告出してるよ！
先日から宣伝しているインクルーシブデザインワークショップ with Re:Creator's Kansaiですが、先週あたりから携帯電話でもそれなりのデザインで閲覧できるように対応させました。
理由はワークショップそのもののテーマが携帯電話ということもありますし、またモバツイに無料で広告を出させてもらえると知り、f-shinさんにお願いすると快く承諾をいただいたので、せっかくならPCサイトを携帯で見てもらうのではなく、携帯用のページを用意しようかと思った次第。
せっかくだからコードを共有
コーポレートサイトそのものを携帯対応にしてほしいという案件は少なくとも僕の周り（NPO法人や公益法人等）では聞かないのですが、河野武さんのスライド「モバイル・サイトの重要性」などを読んでいると、携帯対応はWebサービスでは当たり前、コーポレートサイトもそろそろか、という印象を受けました。
携帯の現状のレンダリングを踏まえた上でどういったコードがベストなのかについては、僕自身はまだまだ勉強中です。しかし、勉強しようにもPCのWebサイトと違い、携帯のHTMLやCSSはなかなかのぞき見ることができません。というわけで、ベストプラックティスとはほぼ遠いですが、こんなHTMLとCSSを書くと、携帯電話ではこんな表示になるよという意味で下記のコードを確認してもらえればと思います。一応、3Gと呼ばれる機種のみをサポートするイメージで作りました。たぶん。
ついでなので、QRコードも生成してみました。
以下はメモなのですが、
- 1つのコーポレートサイトを携帯向けにフルスクラッチで作成するのは時間も手間もかかりますが、1ページ、もしくは少ないページ数の告知ページなら練習がてらにはちょうどよいかな、と。無論、将来的には1枚のHTMLをCSSだけでPCと携帯と切り替えられるのが理想。
- 凝った作りにするのであれば、サーバサイドや.htaccessでキャリア別にテンプレを振り分けるべきなのでしょうが、今回はhttp://www.re-creators.jp/inclusive/200811/への携帯からのアクセスをhttp://www.re-creators.jp/inclusive/200811/mobile/に飛ばすだけにしています。
- 一応、DoCoMo、au、SoftBankの実機にて確認済み。
- 前述のワークショップでは、この携帯用の告知ページを事前に視覚障害者の方にテストしてもらい、その結果も公表する予定（当日の会場のデジハリ大阪校は携帯の電波が届かないので）
参考サイト
そのうちのいくつかをメモしておきます。
コード
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta content="application/xhtml+xml; charset=UTF-8" http-equiv="Content-Type" /> <meta content="text/css" http-equiv="Content-Style-Type" /> <meta content="text/javascript" http-equiv="Content-Script-Type" /> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta name="robots" content="index,follow" /> <meta content="障害者や高齢者の生の声を取り入れながら携帯電話のﾌﾟﾛﾄﾀｲﾋﾟﾝｸﾞ" name="description" /> <meta content="ｲﾝｸﾙｰｼﾌﾞ,ﾃﾞｻﾞｲﾝ,ﾜｰｸｼｮｯﾌﾟ" name="keywords" /> <title>ｲﾝｸﾙｰｼﾌﾞﾃﾞｻﾞｲﾝﾜｰｸｼｮｯﾌﾟ with Re:Creator's Kansai</title> <link rel="alternate" media="handheld" href="http://www.re-creators.jp/inclusive/200811/mobile/" /> <style type="text/css"> <![CDATA[ a:link{color: #164964;} a:focus{color: #06A7CE;} a:visited{color: #295899;} ]]> </style> </head> <body> <div color="#333333" style="font-size: xx-small;"> <div style="margin: 10px 0 0 0;"> <div style="text-align: center;" align="center"> <img src="logo.gif" alt="ｲﾝｸﾙｰｼﾌﾞﾃﾞｻﾞｲﾝﾜｰｸｼｮｯﾌﾟ with Re:Creator's Kansai" width="178" height="58" /> </div> <div color="#777777" style="margin: 10px 0 0 5px; font-color: #777777;">障害者や高齢者の生の声を取り入れながら携帯電話のﾌﾟﾛﾄﾀｲﾋﾟﾝｸﾞ</div> </div> <hr size="1" color="#EEEEEE" style="border-color: #EEEEEE;" /> <div style="margin: 0 5px 0 5px"> <div style="margin: 10px 0 5px 0;"> <span color="#74AF0A" style="font-size: small;"><font color="#74AF0A">■ ｺﾝｾﾌﾟﾄ</font></span><br /><br /> Webｻｲﾄを制作する上でﾕｰｻﾞﾋﾞﾘﾃｨやｱｸｾｼﾋﾞﾘﾃｨが大事だというのは分かる。<br /><br /> けれど、本当に障害者や高齢者のためになっているんだろうか。<br /><br /> Webﾃﾞｻﾞｲﾅｰやｺｰﾀﾞｰ、ﾃﾞｨﾚｸﾀｰの皆さんはそんなことを一度は考えたことがあると思います。<br /><br /> それを解決するにはどうすればよいのか。本人に聞くのが一番確実で手っ取り早いですよね。<br /><br /> <strong>ｲﾝｸﾙｰｼﾌﾞﾃﾞｻﾞｲﾝﾜｰｸｼｮｯﾌﾟ</strong>は、そんな僕たちがちょっとした新しい視点を得られる場なのです。 </div> <hr size="1" color="#EEEEEE" style="border-color: #EEEEEE;" /> <div style="margin: 10px 0 5px 0;"> <span color="#0B90BF" style="font-size: small;"><font color="#0B90BF">■ ﾜｰｸｼｮｯﾌﾟ</font></span><br /><br /> ｲﾝｸﾙｰｼﾌﾞﾃﾞｻﾞｲﾝﾜｰｸｼｮｯﾌﾟは、6名から7名を1ｸﾞﾙｰﾌﾟとしたﾜｰｸｼｮｯﾌﾟ形式で行います。<br /><br /> そのうちの1名には必ずﾘｰﾄﾞﾕｰｻﾞと呼ばれる障害者や高齢者の方に入ってもらいます。<br /><br /> 今回のﾃｰﾏは<strong>「携帯電話」</strong>です。<br /><br /> ﾘｰﾄﾞﾕｰｻﾞが普段どのように携帯電話を使い、どんなところが好きで、一方何に不満を感じているのかをﾋｱﾘﾝｸﾞし、携帯電話のﾌﾟﾛﾄﾀｲﾌﾟを制作します。<br /><br /> 1. ﾘｰﾄﾞﾕｰｻﾞの携帯電話に対する意見をﾋｱﾘﾝｸﾞします。<br /> 2. その意見をどんどんﾘｽﾄｱｯﾌﾟし、ｲﾒｰｼﾞを膨らませます。<br /> 3. ﾌﾟﾛﾄﾀｲﾌﾟを制作します。<br /> 4. ｸﾞﾙｰﾌﾟごとにみんなの前で発表します。 </div> <hr size="1" color="#EEEEEE" style="border-color: #EEEEEE;" /> <div style="margin: 10px 0 5px 0;"> <span color="#E28915"><font color="#E28915">開催概要</font></span><br /><br /> 日時<br /> └2008年11月19日水曜日<br /> 18時30分から21時<br /> 場所<br /> └<a href="http://dhw.weblogs.jp/_osaka/guide/guide.html">ﾃﾞｼﾞﾀﾙﾊﾘｳｯﾄﾞ大阪校</a><br /> 定員<br /> └20名前後<br /> 参加費<br /> └2,000円<br /> （領収書発行します）<br /> 準備物<br /> └携帯電話 </div> <hr size="1" color="#EEEEEE" style="border-color: #EEEEEE;" /> <div style="margin: 10px 0 5px 0;"> <span color="#E28915"><font color="#E28915">お申し込み</font></span><br /><br /> お申し込みは<a href="http://uemachi.cotocoto.jp/event/28786">cotocotoお申し込みﾍﾟｰｼﾞ</a>の右側ﾒﾆｭｰの「参加申し込みはこちらから」に次の項目をご入力ください。<br /> <ul> <li>お名前</li> <li>ﾒｰﾙｱﾄﾞﾚｽ</li> <li>電話番号</li> <li>所属<br />（ﾃﾞｻﾞｲﾅｰ、ﾃﾞｨﾚｸﾀｰなど、学生の方は専攻等）</li> </ul> 電話番号、所属に関しては任意となっておりますが、可能なかぎりお書きください。<br /><br /> なお、ﾃﾞｼﾞﾊﾘ生の方は先着4名まで無料で参加できますので、所属にその旨お書きの上ご登録ください。 </div> <hr size="1" color="#EEEEEE" style="border-color: #EEEEEE;" /> <div style="margin: 10px 0 5px 0;"> <span color="#E28915"><font color="#E28915">お問い合わせ</font></span><br /><br /> お問い合わせやご質問等に関しては、<a href="http://d.hatena.ne.jp/aratako0/">TRANS</a>のあらたの<a href="mailto:aratakojima@gmail.com">ﾒｰﾙ</a>、もしくは<a href="http://mixi.jp/show_friend.pl?id=4913021">mixi</a>まで。 </div> <hr size="1" color="#EEEEEE" style="border-color: #EEEEEE;" /> <div style="margin-top: 10px;"> <span color="#E28915"><font color="#E28915">主催</font></span><br /><br /> <ul> <li><a href="http://www.symlab.sys.i.kyoto-u.ac.jp/incl/">京都大学ｲﾝｸﾙｰｼﾌﾞﾃﾞｻﾞｲﾝﾕﾆｯﾄ</a></li> <li><a href="http://www.re-creators.jp/">Re:Creator's Kansai</a></li> </ul> </div> </div> </div> </body> </html>
