web-dev-qa-db-ja.com

レスポンシブデザインとアダプティブデザイン

RWD(レスポンシブウェブデザイン)とAWD(アダプティブウェブデザイン)の違いを簡単に説明していただけますか?

24
hd.

アダプティブ(AWD):必ずしも流体グリッドに設定する必要はありません。特定のデバイス解像度(320、768、1024など)を対象とします。メディアクエリによって制御される、設定された幅(固定)または相対的な幅(%)を持つことができます。

レスポンシブ(RWD):流体グリッド上に構築されています。画面の解像度に関係なく、ブラウザによって異なります。コンテンツは、必要に応じて分解して再調整できます。

つまり、RWDはAWDに似ていますが、未知のデバイスと既知のデバイスの将来性を保証するために、さらに1、2ステップ進んだ点が異なります。

29
lockedown

流体レイアウト

画面幅が拡大または縮小されると、ワードラップ方式で調整されます。

アダプティブレイアウト

さまざまなレイアウトがトリガーされる事前定義されたサイズがあります。これらはブレークポイントと呼ばれます。アダプティブレイアウトは、流動的または完全に静的にすることができます。

レスポンシブレイアウト

流体とアダプティブレイアウトの組み合わせ。最適なエクスペリエンスを提供します。

プログレッシブエンハンスメント

インテリジェントな方法でテクノロジーを適用することにより、コンテンツ(およびユーザー)を尊重するプロセスlayer-upon-layer。プログレッシブエンハンスメントでは、異なるブラウザで同じエクスペリエンスを提供する必要はありません。

出典:http://bloggingexperiment.com/archives/responsive-web-design-rwd-vs-adaptive-web-design-awd.php

9
honzajde

から トピックに関する私のブログ投稿

イーサン・マルコットによって造られた「レスポンシブWebデザイン」は、「流動的なグリッド、流動的な画像/メディアおよびメディアクエリ」を意味します。 「アダプティブウェブデザイン」とは、私が使用しているように、ユーザーの機能(フォームと機能の両方の観点から)に適応するインターフェイスを作成することです。私にとって、「アダプティブWebデザイン」は、レスポンシブWebデザインが不可欠な部分である可能性がある(多くの場合、そうすべきである)「プログレッシブエンハンスメント」の単なる別の用語ですが、さまざまなことも考慮に入れるという点で、Webデザインへのより包括的なアプローチです。マークアップ、CSS、JavaScript、および支援技術のサポートのレベル。

ちなみに、「アダプティブウェブデザイン」と「アダプティブレイアウト」を区別することは重要だと思います。「アダプティブレイアウト」はメディアクエリの使用のみを意味し、プログレッシブエンハンスドな方法では実行できない可能性があるためです。ただし、モバイルファーストの方法で実現されるアダプティブレイアウトは、プログレッシブエンハンスメントである可能性が非常に高く、それによって「アダプティブWebデザイン」の手段となります。

7
Aaron Gustafson

私が見た別の定義は、魔法が起こる場所によってそれを分解します:

  • Responsive-client-side-同じページがすべてのデバイスに返されますが、表示はページの一部は、通常JavaScriptとCSS(特にメディアクエリ)を使用してデバイスに応答します。
  • Adaptive-server-side-デバイスの仕様に関する情報がサーバーに渡され、そのデバイスに適合したページが返されます。これはRWDと同じJavaScript/CSS手法のいくつかを使用しますが、コンテンツのいくつかは異なる/小さい場合があります。

出典: http://www.huffingtonpost.com/garrett-goodman/adaptive-design_b_2344569.html

この定義が、ページコンテンツの流れについて詳しく説明している他のいくつかの定義とどのように適合するかはわかりません。

6
Luke

アダプティブWebデザインとレスポンシブWebデザインの違いは、このスレッドで提案されている区別よりも広く、より重要です。違いは、ソフトウェア機能が存在する場所の問題でも、CSS条件で使用される測定単位でもありません。

どちらの用語(アダプティブまたはレスポンシブ)もブランドではないため、単語の基本的な定義から逸脱してはなりません。コンピュータサイエンスでは、応答とは、何らかの刺激によって生成されるアクション、イベント、またはメッセージです。この定義は生物学に端を発しています。光に反応した瞳孔の拡張は、レスポンシブデザインです。

適応とは、単にプログラムされた応答よりもはるかに高い機能を意味します。拡張できる瞳孔を発達させる能力は、適応設計です。適応には、履歴の保存とその後の適用が必要です。生物学では、適応には適応を保存するためのDNAが必要です。 Webデザインでは、適応はCookieまたはサーバー上のユーザーのアカウントプロファイルに保存できます。

2つのうちの単純なものから始めましょう。レスポンシブウェブデザインの正式な定義は次のとおりです。

A レスポンシブウェブデザイン表示特性を調べ、HTMLの組み込みの自動レイアウト機能を超えた方法でページの表示に瞬時に応答して、便利で機能的なものを提供します、およびさまざまな表示条件で最大限に見えるエクスペリエンス。

ポータブルデバイスは、この追加のサイズ応答性の重要性を高めています。このような設計手法の多くは、CSS(カスケードスタイルシート)またはスクリプト(JavaScriptなど)への条件の追加を中心としています。表示特性に基づく各条件は、CSSセレクターによって識別される一連のドキュメント要素(タグ)の特定のスタイルパラメーターの値を制御することにより、全体的なユーザーエクスペリエンスを向上させます。*

ディクショナリ定義またはADAPTIVEの一般的なコンピュータサイエンス定義のいずれかを使用して、アダプティブWebデザインのドキュメントレイアウトは、単純な静的サイズのしきい値よりも高い基準、つまり継続的に評価される基準に基づいてインテリジェントに変更する必要があります。アダプティブWebデザインの適切な定義は次のとおりです。

適応型Webデザイン使用パターンと使用条件を記録し、時間の経過とともに、より迅速に、包括的に、または個別にユーザーにコンテンツと機能を提供するように適応します。

ウェブデザインに関するADAPTIVEという用語の他の使用法のいくつかは、他のどの方法よりも賢くも適応性も高くない、単なる別のレスポンシブデザイン方法論にあまりにも多くの信用を与えています。

単純な適応スキームをJavaScriptにプログラムして、サーバーへのRestFUL呼び出しから返されたJSONデータに基づいてCSSを変更し、SQLまたはNOSQLを介してデータベースからユーザーのスクロールとクリックの統計を取得できます。より高度なユーザーエクスペリエンス分析では、ルールベースのシステム(DRulesやPrologなど)、ファジーロジック、ニューラルネット、または非同期で実行されるベイズスキームを使用する場合があります。

単純なルールの例は、「リンクを最も頻繁にクリックされるものから最も頻繁にクリックされないものの順に並べ替え、10回の表示ごとに、人気の低いリンクを2番目に配置して、要素が時間の経過とともに細流化するようにします」です。

些細なフィードバックフォームは、一般的なフィードバックメカニズムです。

4
Douglas Daseeco

流動的、固定、レスポンシブ、アダプ​​ティブレイアウトを区別するための最良のリンクの1つ。 http://teamtreehouse.com/library/build-a-responsive-website/introduction-to-responsive-web-design/fixed-fluid-adaptive-and-sensitive-2 。 HTMLページに適用されるスタイルの簡単な言葉で、

  1. 固定レイアウト:ピクセルを使用します。
  2. 流動的なレイアウト:パーセンテージを使用します。
  3. レスポンシブレイアウト:メディアクエリでパーセンテージのみを使用
  4. アダプティブレイアウト:メディアクエリでピクセルとパーセンテージの両方を使用
1
vinod

単に:

RWD(レスポンシブ):は、特定のデバイスを対象とするWebサイトの異なる構造とデザインです。 (主に、さまざまな構造とさまざまな機能について話しているため、サーバー側の作業について話します)

AWD(Adaptive):は、特定のデバイスを対象とする同じ構造の異なるデザインです。 (私たちは異なるデザインについてのみ話しているので、主にクライアントサイドの仕事について話している)

両方の技術は、特定のデバイスにとってより使いやすい異なるユーザーエクスペリエンスを作成することを目的としていることに注意してください

0