最近、皆が異なる方法でコンテンツを消費している。私の母はネットブックを持っているし、友人は27インチのiMacを持っていて、ガールフレンドと私はスマートフォンを持ち、彼女の母はiPadを持っている。

あなたのコンテンツはこれまでになく多くのデバイスとブラウザで閲覧されており、デザイナーはそのことを頭に入れてデザインしなければならない。画面サイズやオペレーティングシステムに柔軟に対応するデザイン手法は、レスポンシブWebデザインとして知られる。ここで紹介する10のサイトはフレキシブルなWebの未来を見せつけている。

Bread & Pepper

Bread & Pepperは、スパイシーなコードを使ってシンプルなインターフェースを作るソフトウェア会社だ。

- Bread & Pepper

UPPERDOg

ブラウザのサイズ調整をする度にリアルタイムでこのサイトもサイズ調整するのは素敵だ（決して跳んだり跳ねたりしない）。

- UPPERDOg

Food Sense

サイズに応じてロゴの位置まで動く。

- Food Sense (via Splashnology)

Jux

異なるアプリを作り出す代わりに、Juxは、iPhone、iPad、デスクトップのような異なるデバイスに優雅に適応するために1つのレスポンシブWebデザインに重点的に投資した。（暴露：私は、TNWの前に彼らと仕事をしていた。）

- Jux

Endloop Mobile

Endloop Mobileのサイトは、レスポンシブWebデザインのWordPressテーマを改変して作られた。

- Endloop Mobile

Gravitate

Gravitateはどのサイズでもエレガントに見える。

- Gravitate (via WebDesignDev)

Think Vitamin

Think Vitaminは、小さいサイズではサイドバーを完全に消している。

- Think Vitamin

Clean Air Works

Clean Air Worksは、小さいサイズではメニューを完全にフォーマットし直す。

- Clean Air Works (via WebDesignDev)

CSS Grid

CSS Gridのサイトはフレキシブルなグリッドを使用するという目的を中心に構築されている。

- CSS Grid

Responsive Illustration

メディアクエリを使って作ってある。“これは、レスポンシブWebデザインのテクニックを使ったインタラクティブな体験である。” このサイトについては以前に書いている。

- Responsive Illustration

私たちの社会において成長するコネクティビティは、人々をお互いに近づけながら驚異的な量の情報の流れを保ち、いくつか驚くような結果をもたらしている。しかし、この消費の新しい時代にはいくつかマイナス面があり、その中の1つがウェブサイトが現在デザインされているあり方なのだ。

モバイルデバイスを持っている人ならWebを閲覧することがいかに難しいかということを知っているが、そうでなければならないわけではないのだ。ますます多くのデザイナーがレスポンシブWebデザインの技術を活用するようになっていて、全ての新しいWebデザインに期待される手段になる日は近いだろう―まだその日が来ていないのなら！

この記事は、The Next Webに掲載された「10 Beautiful examples of responsive Web design」を翻訳した内容です。