web-dev-qa-db-ja.com

レスポンシブデザインの意味は何ですか？

「レスポンシブデザイン」を使用する多くのウェブサイトを聞いたことがあります。

これは何ですか、なぜ誰かがそれを使用する必要があるのですか？

website-designresponsive-design
7
Rana Prathap

レスポンシブデザインは、システムの設計（表現とレイアウト）でデバイスのレイアウトに応じて応答/適応する設計哲学です。デザインの応答性を維持する主な理由は、一連のデバイスを使用して、アプリケーションをより大きなユーザーベースに到達させることです。

使いやすさとアクセシビリティの向上：

レスポンシブデザインは、製品の使いやすさを向上させます。数年前、モバイルインターネット通信デバイスが登場する前、開発者はアプリケーションをさまざまな解像度の画面と互換性があるように使用していました。これは、デザインをレスポンシブにすることとも呼ばれます。ますます多くのユーザーがモバイルデバイスで情報を消費する今日の世界では、変化するビューポートとハードウェアを処理する必要があります。

一般的な考えとは異なり、デザインをレスポンシブにするとは、必ずしもアプリケーション全体をユーザーの画面に表示することを意味するわけではありません。その意味は：

  1. 表示される情報量をインテリジェントに剪定し、
  2. アプリケーションの使用中のユーザーエクスペリエンスを向上させるために、デザインを調整します。

たとえば、デスクトップでWebアプリケーションを開いた場合、すべての銃を燃やして、利用可能な画面に多くの情報を表示し、各コンポーネントが最適なスペースを占めるようにすることを検討できます。ただし、モバイルデバイスに切り替えるときは、すべての情報を画面上の限られた領域に絞り込んでしないでください。

代わりに

  1. 重要度の低い情報のチャンクを削除します。
  2. プロセッサを多く使用するコンポーネント（頻繁に更新/再描画/再計算する必要のある要素）の数を減らします。そして
  3. テキストコンテンツを減らして、非常に重要なコンテンツのみを強調表示する

同様に、デスクトップ上のニュースアプリでは、ニュース記事のスニペットと、記事の見出しとサムネイルが表示される場合があります。ただし、モバイルでは、見出し、タイムスタンプ、発行元などを表示するだけで済みます。

また、今日のモバイル画面はデスクトップのような解像度を誇っていますが、これらのデバイスの物理的な寸法はまだ小さいことを理解する必要があります。したがって、ユーザーが情報を簡単に利用できるようにするには、開発者はフォントサイズを大きくする、サムネイルのサイズと配置を大きくするなどの手順を実行して、小さな画面でも情報を読みやすく（アクセス可能）にする必要があります。

より良いアイデアを得るために、 mediaqueri.es にリストされている例を見てください。

17
Vikram Deshmukh

レスポンシブデザインとは、ウェブサイトの特性（幅、データの配置など）が画面の幅に応じて調整されるタイプのデザインを意味します。これは、スマートフォン、タブレット、またはラップトップを使用してユーザーにさまざまなWebページを提供していることを意味します。これは、コードに実装された特性です。これは特定のデザインパターンとは関係ありません。

Webサイトの外観に関係なく、レスポンシブデザインを作成できます。機能は設計者によって実現されますが、これは設計の側面ではなく機能の側面です。

次の2つの理由により、レスポンシブデザインが必要です。

  1. 使いやすさ：スマートフォンユーザーの急増に伴い、Webサイトがより使いやすい方法でコンテンツを提供することがますます必要になっています。
  2. スピードが重要： GoogleはSEOの要素としてモバイルページの読み込み時間を発表 。したがって、モバイルデバイスに固有のデザインを使用すると、モバイルデバイスのページの読み込み時間を短縮し、ランキングを向上させることができます。
2
Rana Prathap

レスポンシブWebデザイン（RWD）は、さまざまなデバイス（携帯電話からデスクトップコンピューターまで）にわたって、最適な表示エクスペリエンス（サイズ変更、パン、およびスクロールを最小限に抑えた、簡単な読み取りとナビゲーション）を提供するサイトの作成を目的としたWebデザインアプローチです。モニター）。

詳細： http://en.wikipedia.org/wiki/Responsive_web_design

1
Vivek Pandey

簡潔な定義を追加するには：

A sensitive Webサイトrespondsレイアウト、コンテンツ、インタラクションを変更して、特定のデバイスに最適に対応することで、特定のデバイスに表示されます。

1
DA01

[〜＃〜] rwd [〜＃〜] [レスポンシブWebデザイン]は、ユーザーの画面解像度（ビューポート）に応じてレイアウトを調整できるようにWebサイトを開発するという概念です。メディアクエリ。

レスポンシブウェブデザインは、調整可能な画面解像度と自動的にサイズ変更可能な画像だけでなく、デザインについてのまったく新しい考え方に関するものです

レスポンシブWebデザインは、設計と開発が3つの主要な技術的機能に基づくユーザーの行動と環境に対応する必要があることを示唆しており、レスポンシブWebデザインの中心です。

  • メディアクエリとメディアクエリリスナー
  • 相対的なサイズ設定を使用する柔軟なグリッドベースのレイアウト
  • 動的なサイズ変更またはCSSによる柔軟な画像とメディア

メディアクエリを実装するには3つの方法があります。@importルールを使用して、他のスタイルシートからスタイルルールをインポートします。

@import url(style600min.css) screen and (min-width: 600px);

メディアクエリをスタイルシートに直接配置します。たとえば：

#nav     {  float: right; }   #nav ul { list-style: none; }  

@media screen and (min-width: 400px) and (orientation: portrait)        
 {                 
    #nav li { float: right;   margin: 0 0 0 .5em; border:1px solid #000000 }         
 }

@media screen and (min-width: 800px)        
 {             
        #nav { width: 200px; }   #nav li   { float: left; margin: 0 0 0 .5em; border: none;  }     }
 </ code>

画像のサイズ変更のためのHTML5属性：

<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

Data-fullsrcは、480ピクセルを超えるすべての画面に使用されるカスタムHTML5属性です

//この手法は、IE8 +、Safari、Chrome、Operaなどの最新のブラウザー、およびこれらの同じブラウザーを使用するモバイルデバイス（iPad、iPhoneなど）で完全にサポートされています//

ビューポート：[メディアクエリのテスト]

<meta name="viewport" content="width=device-width">

iPhoneとiPod Touchは、Webデザインが小さな画面に合わせて自動的に拡大縮小するというものです。これはAppleのシミュレータでのみ機能するため、Apple固有のメタタグを使用して問題を修正し、Webサイトのセクションの下に配置できます。

 <meta name="viewport" content="width=device-width; initial-scale=1.0">

これはRWDには十分かもしれません。完全な調査が必要な場合、Flexible GridsおよびFlexible Images and Mediaは追加されます。

柔軟な画像とメディア

これはCSSのオーバーフロープロパティに似ています

img, object { max-width: 100%; }

TIP： IEでは、この最大幅はサポートされません。そのため、別のIEスタイルシートに100％の幅で記述する必要があります。

1
rajmathan

開発者の観点から見ると、レスポンシブサイトはアダプティブサイトとは少し異なり、ビューポートサイズに基づいて表示エクスペリエンスも変化します。レスポンシブサイト/デザインはフローし、ビューポートの幅に基づいて流動グリッドに適応します。一方、アダプティブサイト/デザインは、事前定義されたビューに「スナップ」して、そのビューポートに一致させます。ちょうど私の2セント...

0
julie p

レスポンシブウェブデザインは、モバイルデバイスやデスクトップサイズに関係なく、すべてのデバイスとすべての画面サイズで動作するのに適したWebサイトを構築する方法です。レスポンシブWebデザインは、誰にとっても直感的で満足のいく体験を提供することに重点を置いています。デスクトップコンピューターと携帯電話のユーザーはすべて、応答性の高いWebサイトから恩恵を受けます。

より多くのあなたはそれが非常に便利なリンクで見つけることができます。

http://learn.shayhowe.com/advanced-html-css/responsive-web-design

0
adhikari