Reponsive Web Design：すべてのデバイスで同じ量のデータをダウンロードしますか？

増え続けるモバイルユーザーやタブレットユーザーに対応できるように、ブログやウェブサイトをワードプレスでデザインし直したいと考えています。

レスポンシブデザインについても聞いています。レスポンシブウェブデザインでは、モバイルデバイスだけでなくコンピューターの画面にも同じ量のデータがダウンロードされますか？

また、多くの大手マーケティング会社がレスポンシブウェブデザインに投資しておらず、モバイル向けに最適化された別のウェブサイトを引き続き利用しているのを見てきました。では、レスポンシブウェブデザインやモバイル向けに最適化された別のウェブサイトは何をするべきでしょうか？

ALA 306の Ethan Marcotteによって定義されているように、「レスポンシブデザイン」という用語は、ユーザーの画面サイズに応じてHTMLに異なるスタイルルールを適用する手法を指します。レスポンシブデザインの詳細については、こちらがMike Bollingerの素敵なデッキです。

このモデルでは、画面が小さい場合でも大きい場合でも、まったく同じHTMLをクライアントに送信します。ただし、CSSで参照されるリソース（主に画像）が特定の画面解像度で表示されない場合は、ダウンロードできない場合があります。たとえばhigh-res.png、CSSで使用できる大画面の場合と小画面のlow-res.png場合-Webクライアントは、アクティブなスタイルの画像のみをダウンロードすることを選択できます。（現在両方をダウンロードしている少なくとも1つの重要なクライアントについては@DBUKのコメントを参照してください。クライアントが賢くなれば幸いです！）

この手法はあなたの場合には意味があるかもしれませんし、別のモバイルサイトを作成するほうが意味があるかもしれません。

デバイスが異なれば、使用状況も異なります。携帯電話はいつもあなたのポケットの中にあります-ユーザーはどのようにあなたの食料品ラインであなたのサイトを使いますか？サイト全体を送信しますか？それともいくつかの機能？それともまったく異なる機能ですか？iPadをさりげなく見ながらテレビをソファに置いているとどうなるでしょうか。

モバイルデバイスは、プロセッサが遅く、メモリが少なく、接続速度が遅い傾向があります（これらすべての「真実」は毎年真実でなくなります）。パフォーマンス上の理由から、別のモバイルサイトを厳密に送信することをお勧めします。

一般的に、静的（テキスト）でコンテンツ主導のサイト（つまりブログ）であるほど、既存のHTMLとレスポンシブデザインを使用する可能性が高まると思います。よりインタラクティブでマルチメディアでユーザー主導のサイト（つまり、ストア）であるほど、個々のデバイスの種類に合わせて個別のサイトを調整する可能性が高くなります。

また、この時代には、モバイルエクスペリエンスをサイトとアプリのどちらにするべきかという問題もあることを忘れないでください。

すべてのデバイスに同じマルチメディア要件があるわけではないため、レスポンシブデザインでは、すべてのデバイスに同じ量のデータをダウンロードしないでください。モバイルサイトは高解像度の画像を使用し、デスクトップ/ラップトップ/タブレット用のサイトよりも本質的にグラフィカルではないはずです。また、モバイルサイトと通常のサイトを組み合わせる場合は、これを考慮する必要があります。そうしないと、サイトの応答性が低下しますね。

Slidedeck peteorpeterへのリンクは、フィラメントグループによるResponsive Imagesスクリプトに言及しています。これにより、JavaScriptを使用して、理想的には複数のバージョンをダウンロードすることなく、適切なデバイスに適したサイズの画像を提供できます。レイアウト画像アセットの場合、これは通常、さまざまな画面解像度に対してさまざまなスタイルを指定するメディアクエリを介して行われます。

多くの企業がサイトを更新するのに長い時間がかかると思います。レスポンシブ、そしてモバイルファーストのアプローチは、間違いなくその瞬間の流行語です。

上記のポスターで述べたように、携帯電話/低解像度デバイスには高解像度の画像を使用する必要があります。メディアクエリは、すべての低い解像度をターゲットにするのに役立ちます。ただし、モバイルサファリではdisplay：noneルールが無視され、デスクトップバージョンの画像もダウンロードされると聞きました。また、レスポンシブ画像のルートを下ると、モバイルプロセッサに大きなプレッシャーがかかります-1ピクセルあたり3バイト... ダウンロードされている余分なコンテンツを回避するためのソリューションはたくさんあります-かなりハッキーです-https : //docs.google.com/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE & hl=en_US#gid= 0

レスポンシブWebデザインの欠点に関するいくつかの情報については、http: //www.webdesignshock.com/sensitive-design-problems/をチェックしてください。ただし、そのブログ投稿があなたを先延ばしにしないでください。Book Apartはこの問題について素晴らしい本を書いた-http ://www.abookapart.com/products/responsive-web-design。電子書籍版を入手する価値は間違いありません。