iPhone Android スマホ対応（？）HTML

2011/6/20 [20:13:11] (月)

なんもしてない困った状態だし、「趣味は読書２」のテコいれでもやるか、と。スマホでも見られるようなページを作ってみた。
グーグルさまで5分ほど調べたところ、どうやら

横幅320pxでレイアウトデザインしておけば、まず大丈夫

らしい。
まあ、ただちにレイアウトが崩れることもなさそうだし、一定のめどがつくまでは320pxで、ということか。すでにデータの出し入れする部分のライブラリは作ってあるんで、そこは使いまわし。表示部分だけを新規に作る、という感じ。ひとつのソースで横幅に応じてレイアウトが変わる、というのが今後は主流だろうと言われてるけど、暑いし蒸すしよくわからないんで、USER_AGENTで振り分ける。

改めて、ケータイサイトとかブログとか、あちこち覗いてみたけど、よくもまあこんな小さな解像度にきちっときれいにレイアウトデザインしてるなあ、と真面目に感心してしまった。
ページ内に飛び先が多いと起点がわからなくなって、そのうちページ移動するのが面倒になる・使いにくいサイトになる。横幅320に詰め込むとそれがますます顕著。なので、見た限り、シンプルで、リンク領域も分かりやすいサイトが多かった。ページ内の情報は、文章なら全部じゃなくて、キャッチのみをまず見せて全容をそこで把握できるようにして、個々の詳細へ誘導する、てな作りか。

といったことを踏まえつつ、どうせなら、流行のHTML5で構成してみた。「趣味は読書２」スマホ版 https://doncha.net/sp/

…レイアウトデザインはやっぱり難しい。データうんぬん、プログラムのところは決め事があるのでそのとおりにやればどうにでもなるけど、「見た目」のところは決め事がないので面倒。HTML5は効果・表現が増えてますます、「見た目」のところにコストがかかりそう。…って、実際は、ただ声がデカイ人間のゴリ押しで決め事ができるんだけど。

[06/29 11:42:38]
てなこと書いてたけど、jquery.mobile を使えば簡単に移植できる。

「jquery mobileがあれば簡単スマホ対応」 https://t2aki.doncha.net/?id=1338631302