携帯電話用のサイトを設計するにはどうすればよいですか

StackOverflow https://stackoverflow.com/questions/624262

  •  05-07-2019
  •  | 
  •  

質問

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

役に立ちましたか？

解決

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は3つ以上のシステムを管理しています！基本的に、同じデータを処理する異なるコンテナアプリケーション/テンプレートがあります：フルAJAXブラウザーバージョン、プレーンHTMLブラウザーバージョン、基本的なモバイルバージョン、ネイティブBlackberryアプリケーション、およびネイティブiPhoneアプリケーション。）

これは、モバイルとデスクトップの両方の存在を本当に重視するサイトの新しい標準です。それはあなたにとってより多くの仕事ですが、一般的にはそれはあなたのユーザーにとってはるかに良いです。

逆に、モバイル向けに機能し、JavaScriptを使用していない、または使用を妨げる主要なアクセシビリティの問題を抱えるまれなWebユーザーのフォールバックとして機能する、純粋なHTMLサイトを作成できます。 「フル」サイト。

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

基本的な手順：

  1. デザイン＆amp;モバイルと画面のUIを構築します。
  2. 2つの異なるURLでサイトを起動します。新しいバージョンでは、デスクトップバージョンではwww.yoursite.com、モバイルバージョンではm.yoursite.comです。 （これにより、ユーザーは規約を知っていればm.yoursite.comを直接閲覧できます。）
  3. www.yoursite.comで、ユーザーエージェントをスニッフィングし、ユーザーのブラウザーがモバイルかどうかをテストします。その場合、ユーザーをm.yoursite.comに誘導します。
    1. おそらく使用できるさまざまなサーバー言語（PHP、Perlなど）で書かれたスニファーがあります。ライセンスを確認してください。 phpで記述されたスニファーの例。
    2. ユーザーエージェントのスニッフィングに関するウィキペディアの記事から：＆quot;携帯電話向けのウェブサイト、 NTT DoCoMoのI-ModeやVodafoneのVodafone Live！多くの場合、モバイルブラウザは互いに大きく異なるため、ポータルはユーザーエージェントスニッフィングに大きく依存しています。過去数年間でモバイルブラウジングの多くの開発が行われましたが、

他のヒント

最近のモバイルデバイスの大部分は、「モバイルスタイルシート」をサポートしています。これは、より簡単に表示するための単なる代替スタイルシートです。通常の方法でサイトにモバイルスタイルシートを追加し、 media =＆quot; handheld＆quot; 属性を含めることができます。

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

これらのスタイルはモバイルに適用されます。

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

追加のメモ：

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

モバイルブラウザでweppageがどのように見えるかを確認するには、 Opera Mini Emulator

WURFL プロジェクトをご覧ください。その意図は、開発者が複数の携帯電話ブラウザをターゲットにし、HDML、WAP、およびXHTML-MPの時代に遡るMobile Safariが登場する前に遡り始めることです。ただし、iPhoneなどの最新のデバイスの機能を保存する最新のものです。 400以上のデバイスにデータがあり、Java、PHP、Perl、Ruby、Python、.NET、C ++のライブラリがあります。モバイルアプリをどの程度幅広くターゲティングするかによって異なります。 ここは、WURFLを使用しているサイトのリストです。

ルカ・パッサーニ（WURFLの共同設立者およびメンテナー）によって書かれた別の関連プロジェクトは、スイッチャー。これを使用して、サイトのモバイルバージョンに自動的にリダイレクトできます。

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

  1. コンテンツに焦点を当てる

  2. プラグインを避ける

  3. ウェブ標準に従う

  4. コンテンツをレイアウト/デザインから分離し、可能な限りcssを使用します。

  5. テキストと画像を使用します。

必要に応じて残りの添え字を追加しますが、添え字がオフになっている場合でもsite：sコンテンツが常に利用可能であることを確認してください。 lynxのような単純なブラウザーとfirefoxのような通常のブラウザーでページを閲覧できれば、正しい軌道に乗っています。

詳細については、任意のブラウザキャンペーン

をご覧ください。

編集：異なるタイプのブラウザーで異なるcssを使用していることが明らかでない場合は、常に同じコンテンツを使用します。 優れたデモについては、 css zen garden をご覧ください。

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

  

これを行うには、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, like Gecko) Version/4.0 Safari/528.16

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

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

＆quot; iPhone＆quot;既に提供していますが、キーワード「モバイル」でさらに確認されています。および＆quot; Safari＆quot;

ほとんどのサイトでは、モバイルサイトのサブドメインがわずかに異なります（ほとんどが「m」を使用）。例えば flickr はを使用しますm.flickr.com

（ .mobi TLD を使用することをお勧めしますが、使用されていることがわかりました）

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

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

2つのサイトのデザインの違いがそれほど大きくない場合、個別のCSSファイルを提供するだけで解決できる可能性がありますか？

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top