レスポンシブウェブデザイン

サムネイル|アプリのレイアウトが画面のサイズによって変わる thumb| コンテンツは水のごとしは、レスポンシブウェブデザインの原則を説明した格言。レスポンシブウェブデザイン (、 RWD) はウェブデザインの手法のひとつで、デスクトップ版のウェブページを閲覧者の画面サイズまたはウェブブラウザに応じて表示できるようにする。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることも、そのタスクに含まれる点を理解しておくことが重要である。また、最近の取り組みでは、閲覧のコンテキストの一部として閲覧者の「近さ」をRWDの延長部分と見なしている。ニールセン・ノーマン・グループは、「コンテンツ、デザインそしてパフォーマンスは、すべてのデバイスでユーザビリティと満足を確保するために必要である」と述べた。

RWDでデザインしたサイトは、比率ベースのフルードグリッド、フレキシブルイメージ @mediaルールの拡張であるCSS3メディアクエリを以下のように使用することで、レイアウトを表示環境に適応させるW3C @media rule。フルードグリッドは、ページ要素にピクセルやポイント等の絶対単位ではなく、百分率等の相対単位を使用する。可変サイズの画像もコンテナ要素の外にはみ出さないように、相対単位を使用して表示する。メディアクエリにより、サイトを表示しているデバイスの特徴 (ブラウザの幅が最も一般的) に基づいて、ページに異なるCSSスタイルを使用できる。今やモバイルトラフィックがインターネットトラフィック全体の半分以上を占めるため、RWDはますます重要になっている。そのためGoogleは2015年にモバイルゲドンを発表し、モバイル機器から検索した場合、モバイル機器に優しいサイトの評価を引き上げ始めた。これには、モバイル機器に優しくないサイトが最終的に不利になる効果がある。RWDは、ユーザーインターフェースプラスティシティの一例である。

関連概念

モバイルファースト、控えめなJavaScript、プログレッシブな拡張

いずれもRWDに先立つ関連概念である。基本的な携帯電話のブラウザは、JavaScriptやメディアクエリを理解しない。そのため推奨される方法は、グレイスフル・デグラデーションに依存して複雑で画像を多用したサイトを携帯電話で動作させるのではなく、基本のウェブサイトを制作してからスマートフォンやパソコン用に拡張することである。

ブラウザ、デバイス、モバイル機器推定に基づくプログレッシブな拡張

ウェブサイトでJavaScript非対応の基本的なモバイル機器のサポートが必須の場合、ブラウザ (ユーザーエージェント) 判定 (別称「ブラウザ・スニッフィング」) とモバイル機器判定の2つの方法により、(プログレッシブな拡張の基礎として) HTMLやCSSの特定の機能がサポートされているかどうか推定される。ただし、こうした方法の信頼性はデバイス能力データベースを併用しない限り完全ではない。

より高機能な携帯電話やパソコンに対しては、、jQuery、jQuery MobileといったJavaScriptフレームワークを使用して、ブラウザがHTMLやCSSの機能をサポートしているかを直接調べる (あるいはデバイスやユーザーエージェントを判定する) 方法が一般的である。を使用して追加機能をサポートすることもでき—たとえばRWDに必要なメディアクエリのサポート、Internet ExplorerでのHTML5サポートの改善といったことが可能である。

機能判定の信頼性も完全ではない可能性がある。判定項目によっては、ある機能が実装されていないか、もしくは利用可能であると報告されながら実装が実質的に利用不可能なほど不十分である場合もあり得る。

課題とその他のアプローチルーク・ウロブルスキーは、RWDとモバイル設計課題の一部を要約し、マルチデバイスのレイアウトパターンのカタログを作成したWroblewski, Luke (2011年5月17日). Mobilism: jQuery MobileWroblewski, Luke (2012年2月6日). Rolling Up Our Responsive SleevesWroblewski, Luke (2012年3月14日). Multi-Device Layout Patterns。ウロブルスキーによると、単純なRWDによるアプローチと比べて、デバイスエクスペリエンスやRESS (REsponsive web design with Server-Side components, サーバサイドコンポーネントを使用したレスポンシブウェブデザイン) によるアプローチは、モバイル機器にさらに最適化された体験をユーザに提供できるというWroblewski, Luke (2012年2月29日). Responsive Design ... or RESSWroblewski, Luke (2011年9月12日). RESS: Responsive Design + Server Side ComponentsAndersen, Anders (May 9, 2012). Getting Started with RESS。SassやIncentivatedのMMLといったサーバサイドのダイナミックCSS実装は、使い勝手向上のためデバイス能力データベースと連動してデバイス (一般的には携帯電話) の差異を処理するサーバベースのAPIにアクセスすることで、こうしたアプローチの不可欠な要素となり得る"Responsive but not completely mobile optimised | Blog". Incentivated. 。RESSは開発がさらに高価で、単なるクライアントサイドのロジック以上の費用が必要となり、そのためより予算の大きい組織に使用が限られる傾向にある。Googleは、スマートフォンのウェブサイトに対して他のアプローチよりレスポンシブウェブデザインを推奨している"Building Smartphone-Optimized Websites". Google.。

多くのサイト運営者がレスポンシブデザインを実装し始めたが、RWDにとって現在の課題は、一部のバナー広告やビデオがフルードではないことである"Google:The Evolution of Responsive Websites".。ただし、検索連動型広告やディスプレイ広告は、特定のデバイスプラットフォームターゲットと、デスクトップ、スマートフォン、基本的なモバイル機器用の様々な広告サイズのフォーマットをサポートしている。異なるプラットフォームには異なるランディングページURLが使用できるがSnyder, Matthew; Koren, Etai. 、あるいはAjaxを使用して1つのページ上で様々なプラットフォーム用の広告を表示できる。CSSテーブルにより、固定とフルードのハイブリッドレイアウトが実現可能となるJavaScript and Responsive Web Design Google Developers。

現在RWDデザインをバリデーションし、テストする方法は多くあり、モバイルサイトバリデータとモバイルエミュレータYoung, James (2012年8月13日). Top responsive web design problems... testing. .net Magazine.からAdobe Edge Inspectのような同期型テストツールまで存在するBest mobile emulators and RWD testing tools. The Mobile Web Design Blog. (November 26, 2011)。Chrome、FirefoxとSafariの各ブラウザとChromeコンソールは、レスポンシブデザインのビューポートリサイズツールを提供している (サードパーティも提供している)。 Rinaldi, Brian (2012年9月26日).Browser testing... with Adobe Edge Inspect.。

歴史ブラウザのビューポート幅に適応するレイアウトを特色とした最初のサイトは、2001年後半にローンチしたAudi.comで、レイザーフィッシュ社のユルゲン・シュパングル、ジム・カルバッハ (インフォメーションアーキテクチャ)、ケン・オリング (デザイン)、ヤン・ホフマン (インターフェース開発) から成るチームが作成した。ブラウザの能力が限られていたので、Internet Explorerではレイアウトがブラウザ内で動的に適応できたが、Netscapeではリサイズ時にページをサーバから再読み込みしなければならなかった。

キャメロン・アダムスは2004年にデモを作成した (現在も閲覧可能)Kalbach, Jim (July 22, 2012). "The First Responsive Design Website: Audi (circa 2002)." 。2008年には「フレキシブル」、「リキッド」 Adams, Cameron (September 21, 2004). Resolution dependent layout: Varying layout according to browser width. The Man in Blue.、「フルード」、「エラスティック」といった多くの関連用語がレイアウトを説明するのに使用されていた。CSS3メディアクエリは、2008年後半と2009年前半のプライムタイムにほぼ間に合った。イーサン・マルコッテは、A List Apartの2010年5月の記事で、レスポンシブウェブデザイン (Responsive Web Design, RWD) という造語 (フルードグリッド、フレキシブルイメージ、メディアクエリを意味すると定義) を新しく提唱した。マルコッテは、2011年にレスポンシブウェブデザインの理論と実践を『Responsive Web Design』という題の短い本で説明した。レスポンシブデザインは、『.net』誌の「Top Design Trends for 2012」で、第1位のプログレッシブエンハンスメントに続き、第2位にランクインした15 top web design and development trends for 2012. .net magazine. January 9, 2012。

Mashableは、2013年をレスポンシブウェブデザインの年と呼んだ Cashmore, Pete (2012年12月11日). Why 2013 Is the Year of Responsive Web Design。他の多くのメディアは、モバイルアプリケーションの費用効果が高い代替案としてレスポンシブデザインを推奨している。

脚注

レスポンシブウェブデザイン

Źródło i licencja