クレジット：
クレジット：
プロセスを合理化するいくつかの方法について説明しました。モバイルに最適化されたサイトを作成する過去に。今日は、さまざまな種類のデバイスの互換性をテストおよび追加するための具体的なヒントとテクニックをいくつか見ていきたいと思います。
1. 焦点を絞る
モバイル サイトにアクセスできるあらゆるデバイス上でサイトを完全に完璧に見せたいと思うのは自然なことです。ただし、これは大多数の開発者やデザイナーにとって現実的ではありません。
あらゆるプラットフォームをサポートしようとするのではなく、サイトと潜在的な顧客に対していくつかの目標を設定してください。たとえば、ほとんどのユーザーが iPhone を使用することがわかっている場合は、まず iPhone 向けに強化されたバージョンのサイトを作成することに重点を置きます。
逆に、アジア、中東、南米などの世界の地域からのトラフィックが多い場合は、Symbian に主な取り組みを集中することをお勧めします。
また、現時点では、次世代モバイル デバイスの大部分が Web ブラウザーに WebKit レンダリング エンジンを使用していることを覚えておくことも重要です。 Nokia は S40 および S60 の組み込みブラウザに WebKit を使用し、Apple は Mobile Safari、Palm の webOS、Google の Android および今後のブラウザに WebKit を使用しています。ブラックベリー 6がありますWebKitベースのブラウザ、 あまりにも。
すべてのデバイスが WebKit を使用しているからといって、すべてのデバイスが同じ方法でコンテンツをレンダリングするという意味ではありませんが、どの種類のブラウザ エンジンをテストして重点を置く必要があるかについての適切なベースラインを提供します。
2. エミュレータを使用して動作を確認する
確認したいすべての主要なデバイス タイプにアクセスできない場合でも、モバイル エミュレータを使用すると、コンテンツが他のデバイスでどのように表示されるかを把握できます。
クレジット：
私たちのお気に入りのツールをいくつか紹介します。
iBBDemo2-- この Adobe Air アプリを使用すると、iPad や iPhone で表示されるのと同じようにコンテンツを表示できます。 Android のサポートは近日中に開始されると伝えられています。このアプリは少し遅いですが、iOS デバイスに対して正確な結果を表示するのに優れています。アプリをテスト モバイル サイトに向けるだけです。
Android SDK-- Android SDK には独自のデバイス エミュレータが付属しているため、Web サイトが Android ハンドセットでどのように表示されるかを確認できます。 Android SDK をインストールするには、次のガイドを参照してください。マックまたは窓。
Blackberry Web 開発ページ-- このページでは、BlackBerry シミュレーターにアクセスでき、BlackBerry デバイス用に設計するためのヒントが含まれています。
Symbian S60 SDK-- Nokia のサイトには、S60 プラットフォームと利用可能なエミュレータに関する情報が掲載されています。
Opera Mini エミュレータ-- Opera にはモバイル ブラウザのデスクトップ バージョンと、さまざまなプラットフォームにわたる Opera Mobile の設計に関する多くのリソースがあります。
3. デバイスのサポートに複数のスタイルシートを使用する
使用されているデバイスに基づいて機能を追加または削除する特定のパラメーターを含むモバイル固有のスタイルシートをメイン サイトに含めることは、複数のデバイスにコンテンツを提供するエレガントで効果的な方法となります。
ドミニク・ハザエル＝マシュー昨年、A List Apart に素晴らしい記事を書きました。この記事では、基本事項のいくつかを取り上げ、ハンドヘルド サポートの最も一般的なパラメータのいくつかにもリンクしています。
デイブ・シェイは 2008 年に独自のソリューションを組み込みましたが、これは今でも多くのデバイスでかなり使用できます。
さらに最近では、クリス・コイエCSS-Tricks では、CSS または jQuery を介して画面サイズとブラウザーのサポートを追加する方法について説明しており、彼自身のダウンロード可能なサンプルも含まれています。
デイブ・カルフーンモバイル Web 開発に関するシリーズで、いくつかの優れた提案を行っています。
4. Firefox または Safari でユーザー エージェントを変更する
Web ブラウザーでのテスト中にサイトがどのように見えるかについてその場でフィードバックを取得したい場合は、ユーザー エージェントを変更するだけです。各デバイスには、デバイスの種類を Web ブラウザに伝えるために使用できるユーザー エージェント文字列が含まれています。
Safari と Firefox は両方とも、ユーザー エージェントを変更する簡単な方法を提供しており、他のブラウザーでコンテンツがどのように表示されるかを垣間見ることができます。 Firefox で、Chris Pederick のファイルをダウンロードします。ユーザーエージェントスイッチャー。プラグインにさらにモバイル ブラウザを追加するには、次を参照してください。このコメント。
プラグインがインストールされたら、以下に示すように、メニューから新しいユーザー エージェントを選択するだけです。
クレジット：
Safari では、以下に示すように、開発者モード (環境設定、詳細設定、「開発を表示」ボックスにチェックを入れる) を有効にし、開発メニューからユーザー エージェントを選択するだけです。
クレジット：
5. CMS を使用する
サイトに WordPress や Drupal などのコンテンツ管理システムを使用している場合、モバイル プラグインを使用するのが最善の策かもしれません。たとえば、WordPress には人気のあるWPタッチプラグイン。このプラグインには無料版と有料版があり、さまざまなデバイスで動作し、モバイル スタイルシートを使用するデバイスやページ全体をロードするデバイスを指定することもできます。
クレジット：
一方、Drupal には、適切な名前の次のようなモバイル プラグインも多数あります。モバイルプラグイン。
CMS の背後にあるコミュニティに問い合わせて、他にどのようなオプションが利用できるかを確認してください。
あなたのヒント
モバイルブラウザのクロステストはどのように行うのですか?お知らせください！
Webtrends Mobile Analytics でサポートされているシリーズ
クレジット：