この間ちょっとしたサイトを作ったときのメモ
- HTML と CSS は HTML5 Boilerplate をベースにした。
- デザインに画像は使わなかった。
- 小さい画面向けのスタイルを書いて、@media で大きい画面向けのスタイルを追加していくのは予想以上に大変。
- 投稿のサムネイル画像は横幅が 300px より小さくなるようにしておくといいかもしれない。
- ドロップダウンメニューは、タッチ環境ではタップで開閉、マウス環境はホバーで開閉すると使いやすいんじゃないかなーと思う。Modernizr で no-touch があるかどうかで判別したけど、実際どうなのかは知らない。
- モバイル向けには文字が少し小さめ(13pxくらい)でもいいけど、ボタンのようなものはパディングを「大きいかな？」という程度に取っておくとタッチしやすい。
- user-scale は指定しない。
- [1][2][3]...[Next] みたいなナビゲーションはモバイルだとつらい。タッチ精度の悪いデバイスでは特に。
- スマートフォンを縦向きで使っている場合 [Prev][Next] みたいなナビゲーションは左右中央のどちらかにまとめるより、[Prev] を左端 [Next] を右端のようにしたほうが操作しすいかも。
- iPhone は <input type="file" /> が使えない(らしい)。衝撃だった。
Android は 2.2 以降なら使えるようだ。Windows Phone は分からない。今後対応っぽい？ - なので、画像を投稿してもらうタイプのサイトで iPhone 対応するならネイティブアプリ作るかメールでやってもらうしかない。
- メール投稿の場合でも iPhone では <a href="mailto:post@example.com">メールアドレス</a> のようなものからは画像が添付できないらしい。画像閲覧アプリからやってもらうしかないようだ。MMS ならいけるっぽいけど容量制限がある。
この辺の話は
http://www.1x1.jp/blog/2010/08/tips_for_receive_email_from_iphone_mms.html
http://www.1x1.jp/blog/2010/08/tips_for_upload_image_from_iphone_safari.html
が分かりやすかった。 - メールを受信したら処理して投稿するのには
http://www.phppro.jp/phptips/archives/vol35/1
http://labs.uechoco.com/blog/tag/http_request2
を参考にした。
iPhone について「らしい」とか書いてるのは持ってないから。
