iPhoneがどのようにWebページを折りたたんで展開できるかを見てきた可能性があります。 興味のあるテキストを読みやすくするために、Webページ全体を一目で見ることができます。 ある意味では、iPhoneはSafariを使用しているため、WebデザイナーはiPhone上で動作するWebページを作成するために特別な作業を行う必要はありません。
しかし、本当にあなたのページがちょうどうまくいくようにしたいですか？ ほとんどのデザイナーは自分のページを輝かせたい！
Webページを作成するときには、誰がそのWebページを表示するのか、どのように表示するのかを考える必要があります。 最良のサイトの中には、解像度、カラーオプション、利用可能な機能など、ページがどのタイプのデバイスで閲覧されているかを考慮するものがあります。 彼らはそれを理解するためにデバイスに頼るだけではありません。
モバイルデバイス用サイトを構築するための一般的なガイドライン
- できるだけ多くのデバイスでテストしてください。 あなたがすべき最初のことは、あなたのiPhoneと多くの異なるモバイルデバイスやエミュレータであなたのサイトを見ることです。 あなたはすべてのテストにエミュレータを使用できますが、小さな画面でウェブサイトをナビゲートしようとするのと同じ感触を与えるわけではありませんので、できるだけ実際のデバイスでテストしてください。
- あなたのページを正常に劣化させる。 Flash対応のワイドスクリーンブラウザ向けにページを書くことはできますが、クッキー、Ajax、Flash、JavaScriptなどの特別な機能を処理できない小さなモニタでも重要な情報が表示されるようにしてください。 XHTML Basicを超えるものは、一部の携帯電話を超えています。 ほとんどのスマートフォンはすべてのものを扱うことができますが（もちろんiPhoneのFlashは除く）、他の携帯端末では不可能です。
- ワイヤレス固有のページを作成し、簡単に見つけることができます。 あなたの携帯電話やワイヤレスの顧客向けに特定のページを作成する場合は、そのページを利用できるようにします。 よい方法は、ドキュメントの最上部にワイヤレスページへのリンクを置き、ハンドヘルドメディアタイプを使用して非ハンドヘルドデバイスからそのリンクを非表示にすることです。 結局のところ、携帯電話であっても、ほとんどの人があなたのホームページに来ています。ワイヤレスページへのリンクがないと、ページを使いすぎると残ってしまいます。
スマートフォンのWebページレイアウト
スマートフォン市場のページを書くときにまず覚えておくべきことは、スマートフォン市場のために必要な変更を加える必要がないということです。 利用可能なスマートフォンの大半は、ウェブページを表示するためにWebkitブラウザ（iOSのSafariとAndroidのChrome）を使用しているため、SafariやChromeでページが正常に見える場合は、ほとんどのスマートフォンでうまく見えます）。 しかしブラウジングの体験をもっと楽しくするためにできることがあります：
- 画面が小さいことを忘れないでください。 スマートフォンは、すべての列を小さなウィンドウに凝縮します。これによって、ズームすることなく読みにくくなる可能性があります。 ほとんどのユーザーはズームに慣れていますが、面倒なことがあります。 1つの長いテキスト列が読みやすくなります。
- ページを小さな塊に分割します。 携帯電話でテキストの長いセグメントを読むのは難しいかもしれないので、それらを複数のページに置くと、読みやすくなります。
iPhoneでのリンクとナビゲーション
- URLが短いほど良いでしょう。 これまで携帯電話でURLを入力しようとしたことがある場合、それは痛みであることがわかります（多くのテキストメッセージを送信するために使用されている十代の若者を除いてはおそらく）。 iPhoneの場合でも、長いURLを入力するのは面倒です。 それらを短くしてください。
- しかし、長いリンクテキストは簡単にタップできます。 いくつかの別々の言葉が別の記事にリンクされているページで、互いに隣り合っている場合は、ズーミングせずに正しいものをタップすることは非常に困難です。 多くの人はあきらめてどこかに行くでしょう。 3〜5語のリンクは、1語リンクよりも電話でクリックする方が簡単です。
- ナビゲーションを画面の一番上に置かないでください。 あなたが望む情報を見つけるために画面やリンク画面をぺージする必要がある以上に迷惑なことはありません。 携帯電話用に設計されたウェブページを見た場合、最初に表示されるものはコンテンツと見出しであることがわかります。 次に、それはナビゲーションです。
- あなたのナビゲーションを隠すことを恐れてはいけません。 ナビゲーションリンクをCSSやJavaScriptで隠し、ユーザーがそれを求めたときにのみ表示させることは、スマートフォンユーザーにとってページを簡単にする方法です。
スマートフォンでの画像のヒント
- 画像は小さくなければなりません。 はい、AndroidとiPhoneは画像を拡大/縮小できますが、サイズが小さくなると、サイズとダウンロード時間の両方で、ワイヤレスユーザーがより幸せになります。 画像の最適化は常に良いアイデアですが、携帯電話のページでは重要です。
- 画像はすばやくダウンロードする必要があります 画像は、モバイルデバイスからウェブページを見ているときに、ウェブページ上に多くのスペースを占めます。 また、フルスクリーンのWebブラウザで表示するとページが見栄えが良くなることがよくありますが、しばしばモバイルデバイス上で邪魔になることがあります。 また、スマートフォンユーザーが携帯電話網に接続しているときに、最後に大量の画像やナビゲーションアイコンをダウンロードすることができます。
- ページの上部に大きな画像を置かないでください。 ナビゲーションと同じように、ページの一番上に読み込むために3-4スクリーンを要する画像を待つのは非常に面倒です。 そしてこれはウェブページでは非常に一般的です。 唯一の例外は、フォトギャラリーでクリックするとイメージを取得することを読者が認識している場合です。
モバイル用に設計するときに避けるべきこと
モバイルフレンドリーなページを作成する際には避けるべきいくつかのことがあります。 上記のように、実際にあなたのページにこれらを持たせたいのであれば、あなたはそうすることができます。
- Flash - ほとんどの携帯電話はFlashをサポートしていないため、ワイヤレスページに含めることはお勧めできません。
- クッキー - 多くの携帯電話はクッキーをサポートしていません。 iPhoneにはCookieがサポートされています。
- フレーム - ブラウザがそれらをサポートしていても、画面の大きさについて考える。 フレームはモバイルデバイスでは機能しません。読みにくく、不可能です。
- テーブル - モバイルページのレイアウトにテーブルを使用しません。 そして、一般的なテーブルを避けるようにしてください。 彼らはすべての携帯電話でサポートされていません（ただし、iPhoneや他のスマートフォンはそれらをサポートしています）。あなたは奇妙な結果に終わることがあります。
- ネストしたテーブル - テーブルを使用する必要がある場合は、別のテーブルにネストしないようにしてください。 これらは、デスクトップブラウザがサポートするのが難しく、せいぜいページの読み込みを遅くするだけです。
- 絶対的な測定 - 言い換えれば絶対サイズ（ピクセル、ミリメートル、インチなど）のオブジェクトの寸法を定義しないでください。 何かを100ピクセル幅と定義した場合、1つのモバイルデバイスでは画面の半分になる可能性があり、別のデバイスでは幅の2倍になる可能性があります。 相対サイズ（emやパーセンテージなど）が最も効果的です。
- フォント - アクセスに使用していたフォントのいずれかが携帯電話で利用できると想定していません。
続きを読む
- PHPを使ってあなたのウェブサイトをモバイルフレンドリーにする方法