iPhone向けウェブサイト制作についてメモ的に。なので少しずつ追記するパターン。
最初に良記事があったので、そこの引用。まさにこの通り。
１．必要十分な情報を集約情報量を絞り込み、スマートフォンの小さな画面でも読みやすいようなレイアウトにすることが必要です。
本サイトの例では、重要度の高いコンテンツだけに絞り込み、詳細説明を開閉式にするなど、訪問者が探している情報を最短で見れるように工夫しました。
２．リンクを全てボタン化
文字に下線を引いただけのリンクは指で押しづらいため、全てボタンにします。プルダウンメニューや入力フォームなどの操作のしやすさも大切です。
３．電話発信や地図表示など、独自の機能を活用
電話番号が書かれていても、スマートフォン自体が電話なので、番号を覚えないと電話をかけられません。ボタンひとつで電話を発信できるようにします。また、地図アプリを利用して場所を表示するなど、独自の機能を活用します。
４．最短ステップで目的ページへ
スマートフォンの通信はパソコンより遅いため、何度もリンクを辿るのはストレスです。本サイトの例では、よく見られるページへのリンクをアイコンにするとともに、下部のアコーディオンメニューで全ページへ直接リンクされています。
５．ファイルサイズの圧縮
画像を減らし、最新技術であるCSS3を活用することにより、ページ全体のファイルサイズを300KBから60KB程度まで圧縮しました。通信速度の遅い3G回線でも、スムーズにページを表示できます。
６．画面幅の変化に対応
スマートフォンは縦向きか横向きかによって画面幅がかわるため、画面幅が変わってもレイアウトを維持できる可変デザインにします。
引用元：実例に見るスマートフォン対応サイトのポイント
まずはウェブサイトの構造についての検討
PCベース、スマホ、タブレット、ガラケーの採用不採用と共有レベルはどの程度かをまずは決めちゃう。
そのうえで、
- htmlそのものを共有して、cssでそれぞれのデバイスに対応する
- コンテンツはCMSで管理し共有、デバイス別にテンプレート作成、吐き出し。
どちらかって言ったら、まあ 2 がおススメ。
モバイル環境はやはり通信速度の問題があるので、htmlを共有してしまうとモバイル版としてはdisplay:noneとかでかっ飛ばすいらない部分もデータは読み込む必要が出てしまうからよくない。
HTML5 CSS3 javascript
スマホ限定とか、PC兼用でもブラウザのバージョン選択によって、HTML5 CSS3 javascript
での構築。
html5 css3はブラウザ毎の実装がまだばらばらな点がネック。
それぞれ採用されている要素が違ったり、同じ要素でも記述が異なったりする。
そのため、例えばグラデーションするcssでも
background: -moz-linear-gradient(top, #9AB4EA, #4E5B77);/*firefox*/
background: -o-linear-gradient(top, #9AB4EA, #4E5B77); /* Opera */
background: -webkit-gradient(linear, left top, left bottom, from(#9AB4EA), to(#4E5B77)); /*safari chromeなどwebkit系*/
このように、背景グラデーションひとつの記述でも、ブラウザ毎にそれぞれ記述をする必要がある。
html5 css3は2、3年後に固まる予定（むしろ予想）なので、しばらくはこんな書き方か。
- cssで装飾とアニメーション
- javascriptで動きの制御
といった形になる。
css3は例えば、
li:last-child
見たいなすごく便利な疑似クラスがあるから、はっきり言ってコーディングは楽になると思う。
以下、スマホ特有の設定について。iPHoneメインで解説．．．
