web - 携帯電話用のサイトをデザインするにはどうすればよいですか

Question

携帯電話から閲覧できるサイトの開発を始めるにはどうすればよいですか？たとえば、iPhoneからGmailサイトを閲覧すると、サイトは通常のサイトとは異なって見えます。これを行うには、2つの異なるサイトを設計する必要がありますか？サイトがモバイルブラウザでアクセスされているかどうかを確認するにはどうすればよいですか？

score 21 · Accepted Answer

2 つの異なるサイトを設計する必要はありませんが、モバイルユーザーがサイトにアクセスできるようにすることが重要な場合は、設計する必要があります。

この問題に対処するにはいくつかの方法があり、それぞれに長所と短所があります。あなたのサイトにはデータベースに情報があり、一連のテンプレートを使用してそのデータを公開していると思いますか? (Ruby on Rails や Django サイト、PHP サイト、ブログなど) 大量の静的 HTML ページを手作業でコーディングした場合、これはかなりの労力を必要とするものになります。

1: 同じ HTML、SCREEN と MOBILE で異なるスタイルシート

アイデア: すべてのリクエストに同じ HTML 構造を配信します。SCREEN 用と MOBILE 用のスタイルシートを作成します。

良い: プログラマーのあなたに。2 つの完全に別個のテンプレートサイトを維持するよりも、2 つのスタイルシートを維持する方が簡単です。

悪い: ユーザーにとって。モバイルデバイスで使いやすいサイトは、通常、通常のブラウザーでは非効率的です。また、デスクトップ/ラップトップ向けに最適化されたサイトは、モバイルデバイスでは悲惨な失敗をすることがよくあります。明らかに、ページのコーディング方法によって異なりますが、ほとんどの場合、通常のサイトをモバイルブラウザーにプッシュすることは、ユーザーにとって良くありません。( http://www.useit.com/alertbox/mobile-usability.htmlを参照して、Jakob Nielsen による最近のモバイルサイトのユーザビリティ調査の概要を確認してください。)

2: 別々のサイトを維持する

(Gmail はさらに 2 つ以上のシステムを維持しています! 基本的に、同じデータを処理するさまざまなコンテナーアプリケーション/テンプレートがあります。完全な AJAX ブラウザーバージョン、プレーン HTML ブラウザーバージョン、基本モバイルバージョン、ネイティブ Blackberry アプリケーション、およびネイティブ iPhone アプリケーションです。 .)

これは、モバイルとデスクトップの両方のプレゼンスを重視するサイトの新たな標準です。あなたにとってはより多くの作業が必要ですが、一般的に、ユーザーにとってははるかに優れています。

利点としては、おそらく、モバイルで機能し、javascript を持っていないまれな Web ユーザーや、アクセシビリティに重大な問題があり「完全な" サイト。

また、ユーザーベースにもよりますが、米国では、一般的に、ユーザーはデスクトップ/ラップトップにアクセスし、モバイルデバイスを補助的なアクセスに使用しています。たとえば、デスクトップコンピューターを使用して飛行機のチケットとレンタカーを予約しますが、携帯電話で予約コードを調べたいとします。多くの場合、モバイルサイトで提供する機能を制限することで問題を解決でき、一般的ではないユースケースを実行するには完全なコンピューターが必要になります。

基本的な手順:

モバイルおよび画面用の UI を設計および構築します。
2 つの異なる URL でサイトを起動します。デスクトップ版は www.yoursite.com で、モバイル版は m.yoursite.com です。(これにより、ユーザーは規則を知っていれば、m.yoursite.com を直接参照できます。)
www.yoursite.com で、ユーザーエージェントをスニッフィングし、ユーザーのブラウザーがモバイルかどうかをテストします。その場合は、ユーザーを m.yoursite.com に誘導します。
1. おそらく使用できるさまざまなサーバー言語 (PHP、Perl など) で記述されたスニファーがあります。ライセンスを確認します。これは php で書かれたスニファーの例です。
2. ユーザーエージェントスニッフィングに関するウィキペディアの記事から: 「NTT DoCoMo の I-Mode や Vodafone の Vodafone Live! ポータルなど、特に携帯電話を対象とした Web サイトは、多くの場合、ユーザーエージェントスニッフィングに大きく依存しています。これは、モバイルブラウザーが互いに大きく異なることが多いためです。モバイルブラウジングはここ数年で行われていますが、これらの新しいテクノロジを備えていない多くの古い携帯電話は依然として頻繁に使用されています. したがって、モバイル Web ポータルは、閲覧に使用する携帯電話に応じて、まったく異なるマークアップコードを生成することがよくあります. これらの違い小さいもの (たとえば、特定の画像を小さい画面に合わせてサイズ変更する) もあれば、非常に大規模なもの (たとえば、XHTML ではなく WML でページをレンダリングする) もできます。」
m.yoursite.com で、www.yoursite.com に戻るリンクを提供します。このリンクをクリックしたユーザーは、モバイルサイトにリダイレクトされるべきではありません。これを実現する方法は、実装によって異なります。

Quirksmodeをフォローして、モバイルテストに関する彼の新たな記事をフォローすることをお勧めします。

3: テンプレートは、ユーザーエージェントに応じて異なるデータチャンクを出力し、個別のスタイルシートを維持します。

(2) と同様に、これにはユーザーエージェントをスニッフィングする必要があります。(2) とは異なり、同じページロジックをすべて使用しているため、2 つの別個のサイトを維持する必要はありません。主にデータの読み取りに関するブログや Web サイトを扱っているだけの場合は、これで問題ないかもしれません。

テンプレートコードでは、次のように言うことができます

if( $useragentType != mobile ) {
    echo( 'bigBlockOfRelatedArticlesAndAds.php' );
}

これにより、ほとんどの場合、1 セットのテンプレートファイルを維持できます。また、モバイルユーザーに送信するページを合理化することもできます。これにより、ブログの投稿などを読みたいだけのときに、大きく肥大化したページが表示されなくなります。

score 6 · Accepted Answer

最近のモバイルデバイスの大部分は、単純に物事を表示する代替スタイルシートである「モバイルスタイルシート」をサポートしています。通常の方法でモバイルスタイルシートをサイトに追加し、次のmedia="handheld"属性を含めることができます。

<link rel="stylesheet" type="text/css" href="/mobile.css" media="handheld" />

次に、それらのスタイルがモバイルに適用されます。

この方法の唯一の問題は、HTML がかさばる場合、ほとんどのモバイルブラウザー (Opera Mini を除く) が遅いため、ページの読み込みに時間がかかることです。flickr や digg のような大規模なサイトが別のサイトを使用するのはそのためです。

その他の注意事項：

かさばる HTML は Opera Mini にそれほど影響を与えません。これは、外部でレンダリングを行い、特別な「画像」をデバイスに送信するプロキシを使用するためです。
シンプルでクリーンな HTML を使用して、通常のブラウザやモバイルデバイスに同じものを送信できます
mediaスタイルシートと属性の組み合わせを確認する必要があります。IIRC が上記のコードを追加すると、ブラウザーは最初のスタイルシートを無視します。最初のものに追加media="all"すると、両方が使用されます (したがって、最初からやり直すのではなく、元のスタイルをオーバーライドできます)。

score 2 · Accepted Answer

シンプルに保ち、Opera Miniを考えれば、正しく理解できます。（iPhoneは通常のブラウザよりも多くの機能を備えています...）

コンテンツに焦点を当てる
プラグインを避ける
Web標準に従ってください
コンテンツをレイアウト/デザインから分離し、可能な限りcssを使用します。
テキストと写真を使用します。

必要に応じて残りのベルとホイッスルを追加しますが、ベルとホイッスルがオフになっている場合でも、サイトのコンテンツが常に利用可能であることを確認してください。lynxのような単純なブラウザとfirefoxのような通常のブラウザでページを閲覧できる場合は、正しい方向に進んでいます。

詳細については、任意のブラウザキャンペーンにアクセスしてください。

編集：ブラウザの種類ごとに異なるcssを使用していることが明らかでない場合は、常に同じコンテンツを使用してください。素敵なデモについては、 csszengardenにアクセスしてください。

更新：cssメディアタイプへのリンクを追加します。他の人が述べているように、興味深いのはハンドヘルドオプションです。

http://www.w3.org/TR/CSS21/media.html

score 2 · Accepted Answer

モバイルブラウザでweppageがどのように表示されるかを確認するには、OperaMiniEmulatorを使用してください

score 2 · Accepted Answer

WURFLプロジェクトをチェックしてください。その意図は、開発者が複数の電話ブラウザーを対象とするのを支援することであり、Mobile Safari が登場するずっと前、HDML、WAP、および XHTML-MP の時代にさかのぼります。ただし、最新のものであり、iPhone などの最新のデバイスの機能を保存しています。400 を超えるデバイスのデータがあり、Java、PHP、Perl、Ruby、Python、.NET、C++ のライブラリがあります。モバイルアプリをどの程度ターゲットに設定するかによって、検討する必要があります。WURFL を使用しているサイトの一覧を次に示します。

Luca Passani (WURFL の共同創設者兼メンテナー) によって書かれた別の関連プロジェクトはSwitcherです。これを使用して、サイトのモバイルバージョンに自動的にリダイレクトできます。

score 1 · Accepted Answer

これを行うには、2つの異なるサイトを設計する必要がありますか？

はい

サイトがモバイルブラウザでアクセスされているかどうかを確認するにはどうすればよいですか？

あなたのプログラミング言語には、おそらくクライアントの情報を調べる何らかの方法があります。たとえば、PHPには$_SERVER、サービングサーバーと訪問先クライアントの両方のあらゆる種類の情報を含むスーパーグローバル変数があります。この場合、$_SERVER['HTTP_USER_AGENT']次の結果が得られる値に関心があります。ページにアクセスすると、次のようになります。

Mozilla / 5.0（Macintosh; U; Intel Mac OS X 10_5_6; en-us）AppleWebKit / 528.16（KHTML、Geckoなど）バージョン/4.0Safari/528.16

これは、Safari4.0を使用してMacOSX10.5.6を実行していることを示しています。さまざまなモバイルブラウザの既知のキーワードがあります。たとえば、iPhoneのブラウザの1つのバージョンには、次のユーザーエージェントがあります。

Mozilla / 5.0（iPhone; U; Mac OSXのようなCPU;en）AppleWebKit / 420+（GeckoのようなKHTML）バージョン/3.0モバイル/ 1A543aSafari / 419.3

「iPhone」はすでにそれを提供していますが、キーワード「モバイル」と「サファリ」によってさらに確認されています

score 1 · Accepted Answer

ほとんどのサイトでは、モバイルサイト用にわずかに異なるサブドメインがあります (ほとんどの場合、"m" が使用されます)。たとえば、 flickrはm.flickr.comを使用します

( .mobi TLDを使用することをお勧めしますが、使用されているのを見たことがありません)

デザインを非常にシンプルにし、グラフィックをできるだけ小さくする必要がある場合は、あまり多くのグラフィックを使用しないでください。これは設計に役立つ場合があります。

メインサイトで使用しているのと同じビジネスオブジェクトなどを使用して、おそらくモバイルユーザー向けに別のページセットを作成するでしょう。

2 つのサイトのデザインの違いがそれほど大きくない場合は、個別の CSS ファイルを提供するだけで解決できるでしょうか?

score 0 · Accepted Answer

あなたのサイトは、最大要件をサポートできる携帯電話に限定されるべきです。あなたもすべての携帯電話を楽しませることはできません。

Webサイトには異なるCSSスタイルのセットが必要であり、HTTPエージェントはCssの選択が行われる必要がある要求に従ってクライアントタイプをチェックする必要があります。

web - 携帯電話用のサイトをデザインするにはどうすればよいですか

8 に答える 8

Related

Reference