数年前から、モバイル機器の訪問者からのウェブサイトへのトラフィックが劇的に増加しているとの専門家の意見がありました。こうした理由から、多くの企業では、オンラインプレゼンスのモバイル戦略をスマートに受け入れ始め、電話やその他のモバイルデバイスに適したエクスペリエンスを作り出しています。
携帯電話用のWebページを設計する方法と戦略を実行する方法を学んだら、サイトの訪問者がそれらのデザインを見ることができるようにする必要があります。あなたがこれを行うことができる多くの方法があり、いくつかは他よりもうまくいく。ここでは、あなたのウェブサイトでモバイルサポートを実装するために使用できる方法を見ていきます。これを達成するための最善の方法が今日のWeb上にあるかどうかの終わり近くにお勧めします。
別のサイトバージョンへのリンクを提供する
これは、はるかに携帯電話ユーザーを扱う最も簡単な方法です。ページを閲覧できるかどうかを気にするのではなく、サイトの別のモバイル版を指しているページの上部の近くにリンクを設定するだけです。その後、読者はモバイル版を見たいか「通常版」を続けるかを自分で選択できます。
このソリューションの利点は、実装が簡単だということです。モバイル用に最適化されたバージョンを作成してから、通常のサイトページの上部付近にリンクを追加する必要があります。
欠点は次のとおりです。
- モバイルユーザー向けに別のバージョンのサイトを維持する必要があります。あなたのサイトが大きくなるにつれて、その2番目のバージョンを維持することを忘れて、サイトが同期しなくなる可能性があります。
- また、タブレット用の第3版も作成していますか？ウェアラブルのための第4版はどうですか？このデバイス固有のバージョンの概念は、非常に迅速に制御不能になる可能性があります。
- あなたは、ページの上部に、モバイル以外の読者が見ることができる（そしておそらくクリックする）醜いリンクを置く必要があります。
結局のところ、このアプローチは、現代のモバイル戦略の一部となる可能性は低い、時代遅れのアプローチです。より良い解決法が開発されている間に、時にはストップギャップ修正として使用されますが、現時点では実際には短期間のバンドエイドです。
JavaScriptを使用する
上記のアプローチのバリエーションでは、一部の開発者は、顧客がモバイルデバイス上にいるかどうかを検出し、それらを別個のモバイルサイトにリダイレクトするために、何らかのタイプのブラウザ検出スクリプトを使用します。ブラウザの検出とモバイルデバイスの問題は、そこに何千ものモバイルデバイスがあることです。 1つのJavaScriptでこれらすべてを検出しようとすると、すべてのページがダウンロードの悪夢に変わる可能性があります。また、上記のアプローチと同じ多くの欠点があります。
CSS @mediaハンドヘルドを使用する
CSSコマンドの@mediaハンドヘルドは、携帯電話のようなハンドヘルドデバイスのためだけにCSSスタイルを表示する理想的な方法だと思われます。これは、モバイルデバイスのページを表示するための理想的なソリューションのようです。 1つのWebページを作成し、2つのスタイルシートを作成します。 「スクリーン」メディアタイプの最初のものは、モニタとコンピュータスクリーン用のページスタイルです。 2番目の「ハンドヘルド」は、携帯電話のような小型デバイス用のページになります。簡単に聞こえますが、実際には実際には機能しません。
この方法の最大の利点は、ウェブサイトの2つのバージョンを管理する必要がないことです。あなたはちょうどそれを維持し、スタイルシートはそれがどのように見えるべきかを定義します - 実際には私たちが望む最終的なソリューションに近づいています。
この方法の問題は、多くの電話機がメディアタイプをサポートしていないことです。代わりにスクリーンメディアタイプのページを表示します。そして古い携帯電話やハンドヘルドの多くは、CSSをまったくサポートしていません。結局のところ、この方法は信頼性が低く、ウェブサイトのモバイル版を提供することはめったにありません。
PHP、JSP、ASPを使用してユーザーエージェントを検出する
これは、携帯端末が使用していないスクリプト言語やCSSに依存していないため、モバイルユーザをウェブサイトのモバイル版にリダイレクトするためのより良い方法です。その代わりに、サーバー側の言語（PHP、ASP、JSP、ColdFusionなど）を使用してユーザーエージェントを調べ、モバイルデバイスの場合はモバイルページを指すようにHTTPリクエストを変更します。
これを行うための簡単なPHPコードは次のようになります：
stristr（$ ua、 "Windows CE"）またはstristr（$ ua、 "AvantGo"）またはstristr（$ ua、 "Mazingo"）またはstristr（$ ua、 "Mobile"）またはstristr（$ ua、 "T68"）またはstristr（$ ua、 "Syncalot"）またはstristr（$ ua、 "Blazer"））{$ DEVICE_TYPE = "MOBILE";}if（isset（$ DEVICE_TYPE）と$ DEVICE_TYPE == "MOBILE"）{$ location = 'mobile / index.php';ヘッダー（ 'Location：'。$ location）;出口;}?>
ここで問題となるのは、モバイルデバイスで使用される他の潜在的なユーザエージェントがたくさんあることです。このスクリプトは、それらの多くを捕まえてリダイレクトしますが、決してすべてではありません。さらに多くのものが常に追加されています。
さらに、上記の他のソリューションと同様に、これらの読者のために別個のモバイルサイトを維持する必要があります。 2つ（またはそれ以上）のウェブサイトを管理する必要があるというこの欠点は、より良い解決策を模索するのに十分な理由です。
WURFLを使用する
モバイルユーザーを別のサイトにリダイレクトすることが決定された場合は、WURFL（ワイヤレスユニバーサルリソースファイル）を使用することをお勧めします。これは、最新のワイヤレスユーザーエージェントデータだけでなく、それらのユーザーエージェントがサポートする機能および機能も含むXMLファイル（および現在はDBファイル）およびさまざまなDBIライブラリです。
WURFLを使用するには、XML設定ファイルをダウンロードして言語を選択し、WebサイトでAPIを実装します。 Java、PHP、Perl、Ruby、Python、Net、XSLT、およびC ++でWURFLを使用するためのツールがあります。
WURFLを使用する利点は、多くの人が常に設定ファイルを更新して追加することです。そのため、使用しているファイルは、ダウンロードが完了する前には古くなっていますが、1か月に1回ダウンロードすると、読者が習慣的に使用していないすべてのモバイルブラウザが利用できます問題。欠点は、もちろん、これをダウンロードして更新する必要があることです。つまり、ユーザーを2番目のWebサイトに誘導することができ、作成される欠点です。
最高のソリューションはレスポンシブなデザインです
したがって、異なるデバイスの異なるサイトを維持することが答えではない場合、何がありますか？レスポンシブなウェブデザイン。
レスポンシブデザインとは、CSSメディアクエリを使用してさまざまな幅のデバイスのスタイルを定義する場所です。レスポンシブデザインでは、モバイルユーザーと非モバイルユーザーの両方に1つのWebページを作成できます。次に、モバイルサイトに表示するコンテンツを心配する必要はなく、最新の変更をモバイルサイトに転送することを忘れないでください。さらに、CSSを書いたら、新しいものをダウンロードする必要はありません。
レスポンシブなデザインは、非常に古いデバイスやブラウザ（今日はほとんど使用されておらず、心配してはいけません）では完璧に機能しないかもしれませんが、それは付加的なものです（コンテンツを取り込むのではなく、離れて）これらの読者はあなたのウェブサイトを読むことができます、それはちょうど彼らの古いデバイスやブラウザで理想的に見えません。
