web-dev-qa-db-ja.com

レスポンシブWebデザインはどれほど重要ですか?

最近、レスポンシブWebデザインを使用することの長所と短所についてさまざまな意見を聞いたことがありますが、小さな地理的領域を対象とするスモールビジネスがレスポンシブWebデザインを実装する必要があるかどうか疑問に思っていましたか?

これに関していくつかのサブ質問があります:

  1. 異なるディメンション/デバイスに個別のコードを使用するのではなく、レスポンシブWebデザインを使用する方が良いでしょうか?

  2. SEOに潜在的に(正または負に)影響する可能性はありますか?

  3. この設計方法を使用してビジネス向けにWebサイトを最適化するときに遭遇する主な問題は何ですか?

29
lifetimes

モバイルインターネットの使用は広くあります デスクトップの使用量を超えると予測されています 今から2年以内に、何らかのビジネス向けのモバイル最適化を検討する必要があります。

多くの点で、これは小規模なローカライズされたビジネスに特に当てはまります。予想通り、多くのモバイル検索は近くの物を見つけることに焦点を当てる傾向があります-店やレストランなどを見つけることを考えてください。

2012年5月現在、レスポンシブデザインは Google推奨 スマートフォン向けのデザインにおける業界のベストプラクティスです。主な利点の1つは、1つのサイトを実行していることです。それは、設計、構築、保守、および宣伝を行う1つのサイトです。効率的です。

SEOの観点からは、別のモバイルサイトをホストしています。 m.example.comは、2つの個別のサイトを最適化し、2つの場所にビジネス価値(PageRank、権限など)を分割する必要があることを意味します。ユーザーエージェントの検出を介して同じURLでコンテンツを提供することでこれを回避できますが、これは作業の重複を処理せず(2つの別個のサイトです)、さらに技術的な課題ももたらします。ユーザーエージェントの検出が機能し、最新の状態に保たれるようにし、検索エンジンが適切なコンテンツを適切なインデックスにインデックス付けするなど。

全体として、レスポンシブデザインはエレガントなソリューションです。

他の質問に答えるには:

  1. 上記にも触れましたが、モバイル市場の発展の速さも考慮してください。モバイルソリューションの柔軟性が高いほど、遅れをとる必要がなくなります。

  2. 比較対象に依存しますが、上記のように、他の2つの主要オプションのいずれかに、重大なSEOの課題が付随しています。

    「クローキング」、つまり、ほとんどの実装でのレスポンシブデザインに固有のコンテンツを検索エンジンから隠すという問題について、いくつかの懸念がありました。しかし、これは主要な検索エンジンのいずれからも明確に答えられていませんが、Googleが「ベストプラクティス」と見なしていることは、Googleがコンテンツの正当な隠蔽を識別できることを示すものと見なすことができます操作上の理由から、デバイスの最適化の理由やその他の正当性の低い隠蔽。

  3. 主な課題は、モバイルユーザーに表示するコンテンツを決定することだと思います。サイトによっては問題にならないかもしれませんが、多くの場合は問題です。ここで重要な考慮事項は、モバイルユーザーが何をしようとしているかを理解することです。たとえば、iPhoneを使用している人は、おそらく迅速で簡単な情報や取引を望んでいます。 iPadを使用している同じ人は、よりゆったりとしたブラウジングエクスペリエンスに興味を持つ可能性が高くなります。
21
GDav

その背後にある考え方は、デバイスに関係なく訪問者に最適なブラウジング体験を提供することです。モバイルデバイスを使用する訪問者の数が減少するのではなく増加する可能性が高いため、そのルートに行くのはまったく理にかなっています。

ブログやCMSには手頃な価格の(安いとは言えない)テーマが数多くあり、すぐに試して、気に入ったものがあるかどうかを確認できます(すべての顧客のデバイスまたは一部のデバイスで確認してください)。

  1. 特別な理由がある場合は、常に1つのコードベースに集中してください。理由としては、「ウェブアプリ」のような専門的なウェブサイトを提供したい場合があります。

  2. SEO:いいえ。レスポンシブレイアウトと同じくらい良い面も悪い面も。

  3. 最初はもう少し計画を立てる必要があります。最小のデバイスで表示されるコンテンツはどのようなものですか?コンテンツの順序はどうですか?そういうもの。または:私のコンテンツは、サポートされているすべてのディメンションで見栄えが良いですか?また、ブラウザスケーリングされた画像だけでなく、実際にサイズ変更された画像を配信するために、各次元の画像サイズを最適化することもできます。 CMSがそれをサポートしていない場合、さらに作業が必要です。

外部ソースからの広告を含める予定がある場合は、指定されたフォーマットが適切に再生されるかどうかも確認する必要があります。

編集:

GoogleアナリティクスなどのWeb分析の履歴データがある場合は、モバイルユーザーと非モバイルユーザーの数を簡単に検索し、使用されているデバイス(実際のハードウェアまで)を特定し、画面解像度を確認できます(「彼らは実際に私のページを見るのか、それともその一部だけを見るのか、スクロールしなければならないのか?」)。

2番目の編集:

この投稿によると 「モバイルウェブサイトとレスポンシブデザイン:ビジネスに最適なソリューションは何ですか?」 "Googleアナリティクスブログで、レスポンシブデザインを念頭に置いて設計されたサイトの長所は次のとおりです。

  • 更新のしやすさ
  • 検索エンジン向けに最適化
  • 変換コードとリダイレクトコードを追加する

別のモバイルサイトの長所:

  • モバイルユーザーのニーズに合わせた設計
  • Quickeサイトの作成
  • 素晴らしいDIYオプション

公式のGoogle Webmaster Centralブログの記事 「レスポンシブデザイン-メディアクエリの力を活用する」 では、「レスポンシブデザイン」が実際にどのように実装されているかを紹介しています。

「モバイル向けに最適化されたウェブサイトの構築」 Google Developersで:

「Googleは、ウェブマスターがレスポンシブウェブデザインを使用する業界のベストプラクティスに従うこと、つまり、すべてのデバイスに同じHTMLを提供することをお勧めします[...]」

12
initall

最初に「レスポンシブデザイン」(RD)が流行語であることを理解することが重要だと思います(私がRDを持っている要素にWidth:100%を置くと、誇張して)、その重要性appear本当に重要なのは、最終的には他のすべてと同様に条件付きだからです。

RDを実装する必要はありますか?

それに答えるには、いくつかの定義を述べる必要があります:

  1. 対象読者は誰ですか
  2. あなたのターゲットはどんな観客ですか
  3. あなたのウェブサイトの目的は何ですか
  4. あなたのウェブサイトはどこからアクセスされますか(ほとんどの場合)
  5. 等.

これはマーケティング分析に非常に似ています。それは、適切な視聴者に適切なメディアを用意することです(おそらく、視聴者はほとんどの場合コンピュータの前に座っているか、最新のiPhoneを持ち歩いているなど)。両方を行うのであれば、もちろんRDが中心です。

異なるディメンション/デバイスに個別のコードを使用するのではなく、レスポンシブWebデザインを使用する方が適切ですか?

UIの複雑さと使用方法に依存します。典型的なページは、ほとんどの場合、さまざまなディスプレイに異なるCSSセットを使用してレンダリングできます。ただし、より複雑または洗練されたUIには異なるアプローチが必要な場合があるため、使用するデバイス(たとえば、マルチタッチインターフェイスなどのGoogleマップ)に応じて異なるページ構造と戦略を提示するのが賢明です。

SEOに(正または負の)影響を与えることができますか?

SEOは設計よりもcontentについてです。ただし、デザイン/レイアウトは重要ですが、デザイン/レイアウトはグーグルだけが知っていますが、一般的にコンテンツが高品質の場合、実際のデザインよりも重要です。

この設計方法を使用してビジネス向けにWebサイトを最適化するときに遭遇する主な問題は何ですか?

間違った対象者向けに設計する。可能であれば、ターゲットを分析し、最新の技術データを提供します(プラットフォームに関する情報を提供する訪問者ログなど)

新しいテクノロジーは常にリスクを伴います、ref。 FacebookのHTML5問題。この時点では完全には成熟しておらず、IE6と標準の問題に類似したさまざまな問題を引き起こしています。

できるだけシンプルにしてください。派手なWebページは、ユーザーが実際にページを使用する必要があるまで、非常に短い時間しか価値がありません。クリックするたびにフェードが終了するまで1/2秒待たなければならない場合、ユーザーはすぐに失われます。そういうもの。

3
epistemex

私は他の答えをざっと読みました、私が冗長なら許してください...私はこの時点で毎日8時間以上レスポンシブデザインをしています...モバイルユーザーが「ユニーク」を持っているので、クライアントはそれを望んでいます経験上、私の雇用主はそれを望んでいます。なぜなら、Googleが推奨する方法として自慢しており、合理化されているからです。 (そして、GoogleがSEOに最もうまくいく可能性が高いことを行う方法として自慢している場合)

異なるディメンション/デバイスに個別のコードを使用するのではなく、レスポンシブWebデザインを使用する方が良いでしょうか?

私はそれが良いと言います、はい。ほとんどのコードは同じコードであるため、iPhoneアプリ、droidアプリ、iPadアプリ、Kindleアプリを書くよりも作業が少なくなります。

SEOに潜在的に(正または負に)影響する可能性はありますか?

設計の点から、私はそれが中立だと感じています。ただし、統計の点から、レスポンシブデザインは非常にうまく機能しています。クライアントはそれらを愛し、顧客はそれらを使用するのが大好きです。

この設計方法を使用してビジネス向けにWebサイトを最適化するときに遭遇する主な問題は何ですか?

最初に行うのは少し難しいです...メディアクエリの調査を行う必要があり、できればテストするモバイルデバイスが必要です。デスクトップでウィンドウのサイズを変更することは重要ですが、モバイルデバイスがインターネットをレンダリングする方法は、予想とは異なる場合があります。たとえば、ヘッダーにbgリピートを使用し、デスクトップでは表示可能領域全体にまたがるレスポンシブサイトを設計しました。ただし、iOSでは何らかの理由で不足しています...

レスポンシブデザインを学び、試すことをお勧めします。ジャンプスタートのためにこのサイトをチェックしてください: http://html5boilerplate.com

タイトルの質問に答えるために:それは重要であり、それを意識し、それをどのように設計するかを知る必要があり、それを使用しないことに決めた場合は、クライアントが設定される可能性があるため、その姿勢を守る準備ができているはずですこのデザインを持つことに。私の経験から、クライアントも顧客もレスポンシブデザインを愛しています。幸せな顧客と幸せなクライアントは私がそれを追求する理由の十分です:)

2

私は別の視点でチャイムを作りたいです:

いいえ、必須ではなく、推奨されていません。ターゲットオーディエンスが誰であるかによります。アナリティクスを見て、モバイルからの割合を確認してください。モバイルユーザーの割合は、デスクトップユーザーに比べて大幅に低下していますか?

私が仕事をしている例を挙げると、サイトは反応しません。ただし、トラフィックの90%はデスクトップユーザーからのものであり、直帰率とイベント完了率はデスクトップ、モバイル、タブレットでほぼ同じです。

それを変更するコストの正当化ができるまで、それを行うための経済的インセンティブはありません。ユーザーの50%がモバイルを使用しているなどの抜本的な発言は、すべてのユーザーが対象ユーザーである場合にのみ適用されます。それ以外の場合は、完全に無関係で、従うべき悪いロジックです。

ターゲットにするモバイルユーザーの割合のみを確認する必要があります。特にB2Bアプリケーションの場合、ほとんどの人は空き時間に携帯電話を見ることはありません。月曜日から金曜日のデスクトップコンピュータではトラフィックが発生します。

1
Ryan

レスポンシブWebデザインは非常に重要です。新しいサイトを作成する場合は、サイトをレスポンシブにする必要があります。すでに、トラフィックの50%がモバイルデバイスとタブレットからのものであり、これが成長するだけでなく、インターネット利用の明らかに支配的な形式になりつつあります。

地理的に狭い地域をターゲットとする中小企業にとって、それはさらに重要です-新しい中小企業にとってSEOは非常に困難になりますが、製品が良ければ、あなたがしていることを共有する人を最大限に増やすことができます。

ソーシャルメディアを読むことになると、人々は現在、主にモバイルデバイスを使用しています-一般的には、朝はベッドで、夜はベッドで。

サイトがモバイルデバイスで使用できない場合、関連するオーディエンスにヒットした共有は無駄になります。 これは望ましくありません。それを避けることが重要です。

レスポンシブコードまたは個別のコードについて:レスポンシブデザインの主な欠点は、個別のコードベースほど高速ではないことです。この速度の低下は、サイトが他のサイトよりも0.2秒遅い理由について他の要因がユーザーの心に浮かぶ可能性がある小規模なローカルビジネスの場合、確かに無視できます。

レスポンシブデザインの大きな利点は、同じコードベースを維持できることです。これにより、メンテナンスコスト、テストコスト、および開発コストが削減されます。

最近のSEOの大きな特徴は「サイトの品質」です。サイトの品質を測定することは困難ですが、一般的に言えば、Googleはバウンス率とサイトでの時間を使用してこれを測定します。サイトがモバイルを嫌う場合、トラフィックの50%が直帰率が高く、エンゲージメントの低い訪問者が多くなります(ページ上で10秒未満)。

これにより、Googleのペナルティが発生する危険性があります。GooglePandaと新しい(先週) Exact Match Domain のペナルティを見てください。どちらも「低品質」のサイトにペナルティを科します。

この方法を使用してビジネス向けにWebサイトを最適化するときに遭遇する主な問題は、それが新しい流行語であり、誰もがそれを必要とすることです。

たとえば、最近、約1日ですべてのデバイスに完全に反応するショップ、フォーラム、Q&Aセクション、その他のさまざまなページ、ブログなどを含むWebサイトを作成しました。

必要なことの基本は次のとおりです。

  1. ボディのパディングとマージンを調整します
  2. 代わりに、左側または右側のサイドメニューをドロップダウンに移動し、おそらく上部のオプションボタンの下に隠します。
  3. コンテナのサイズを変更し、可能な場合は幅100%を使用します
  4. すべての画像を幅100%に変更します
  5. 電話で必要のないものを決定し(広告?)、それらを削除します(表示:なし)

サンプルコードを次に示します。

@media screen and (max-width:480px) {
body {
margin:5px;
padding:0px;
}
.advertbox {
display:none;
}
}

これは、「advertbox」のクラスを持つものをスマートフォンから削除し(最大幅480px)、身体の余白を減らします。

新しいサイトを作成する場合、すべてのデバイスに適したニースクリーンクラスと優れたスタイリングを使用して、クリーンなデザインを確実に構築できるため、これを組み込むのはさらに簡単です。

これがお役に立てば幸いです!

1
Dave Hilditch