モバイル

最近よく耳にするので簡単ですが実装してみました。
現在はwordpressのプラグインであるWPtouchでスマホ対応は任せっきりなのでプラグインを使わずにできたらなと。

現在　※WPtouch使用時

jQuery Mobile適用

左側のメニュー部分を行ったのですが、下記だけでこの表示になります。

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> 
	<li data-role="list-divider">カテゴリー</li> 
	<li><a href="">CSS</a></li> 
	<li><a href="">Design</a></li> 
	<li><a href="">Flash</a></li> 
	<li><a href="">HTML・XHTML</a></li> 
</ul> 

うーん素敵過ぎます。現在test環境でリニューアル準備中なので、その際はがっつりと使用したいと思います。

この5ヶ月間で横浜に引っ越して作業場作ってガシガシ更新していくつもりでしたが、全くネタがなく。。。
gremzが大変だww

そんなこんなで最近はモバイル向けのメルマガに関して情報収集すべく、モバイル関連の書籍を4冊買ったり、ネットで調べているのですがあまりまとまったモノがなく困ってます。でもやんないといけないので、少しずつかき集めてココにでもまとめられたらいいなー。

ついに対応したんですね。
まだ全然見てないですが、時間があるときに見てみようと思います。
馴染み深い博多駅とか天神、キャナルシティとか前勤めてた会社の周りとかいろいろ変わってるみたいなんで。今年はこれで我慢して来年はさすがに帰りたいです。

最近googleネタが多いような感じがします。その度にいろんな企業がヒヤヒヤしていたりするので、googleはまだまだ影響力があるなと。PCだけでなくモバイル側のgoogleはdocomoやauでアルゴリズムが違うのかわかんないんですが、いろいろと大変です。またモバイルはPCに比べSEOに関する情報が少ないので、日々試行錯誤です。順位が上がり安定しだすとその努力も報われるんですが。。。

今日携帯のテスト機にて検証を行ったのですが、auのみ画像間に余白があったので解決策を。

<!-- ▼画像間に余白ができる▼ -->
<div>
<img src="hoge.gif" alt="hoge" width="230" height="30" />
<img src="hoge.gif" alt="hoge" width="230" height="30" />
</div>

<!-- ▼解決策▼ -->
<table cellspacing="0" cellpadding="0">
<tr><td><img src="hoge.gif" alt="hoge" width="230" height="30" /></td></tr>
<tr><td><img src="hoge.gif" alt="hoge" width="230" height="30" /></td></tr>
</table>

レイアウト目的でtableタグを使うのはやっぱり抵抗ありますが、他にやりようがなさそうなので仕方ないです。注意としてはdocomoでこれをやると逆に余白ができてしまうみたいです。

モバイルトップのリニューアルは無事終わりました。与えられた課題は何とかクリアして一安心ですが、結果が付いてくるまでは何ともいえない日々が続きそうです。

今週はモバイルについてあれこれ考えてたり、いろんな特集があったりでいつも以上に効率よく進めないとマズい週でした。
そんな中で自分なりにモバイルサイトを制作する上で今後も頭にいれておきたいと思ったことがあったので備忘録までに。

・marqueeタグ
まだまだPCに比べて通信速度が遅いので、画像等の容量を頑張って削っても全て表示されるまで少し待たないといけません。そんなときにmarqueeを上部（ファーストビュー）に入る位置に設定することで、ただ待つよりも何か読んでいる方がストレスが感じられません。

・背景色
サイトによりけりですが、まだ画像の横幅は240pxもしくは230pxで作成します。ですが、機種によりバラバラなので画像＋背景色を使うことを考えて上手くデザインすると、例えば各カテゴリーごとにタイトル画像で区切っていた場合、画像だけだと横に隙間ができたりしますが、できずにきちんと区切りがわかったりします。

・ページ容量
機種によって最大容量は違って100KBとかそれ以上、それ以下の場合がありますが、30KB多くても50KBぐらいに抑えないと個人的には離脱する割合がぐっと高まる気がします。ただこればっかりは対象機種によってもっと多くしたり少なくする必要があると思います。

・リンク
PCと違ってやっかいなのがリンクだなと最近感じてます。モバイルで画像リンクにすると作り方にもよりますが非常にわかりにくいです。理由は機種によりアクティブ時の枠線の色が違うのである携帯はわかりやすいけど、こっちでは画像と同化しちゃってわかりにくいなんてことがよくあります。なんで、画像にする時は一緒にテキストもリンクにしてあげることでわかりやすくなります。


他にもいろいろとあったのですが、忘れてしまいました。
今回はリニューアル作業を行いましたが、コーディングだけでなく構成とか数値系のとこまで考えて作業できたので充実感があります。これで結果も付いてくるといいのですが。まだまだ今年中にやりたいことがあるので密かに企画中です。来週もがんばります！！