25の最もレスポンシブなウェブサイト

2012年には、レスポンシブWebデザインが本当に主流になりました。 2年後 A ListApartに関するEthanMarcotteの独創的な記事 、それはもはや単なる概念ではありませんでした。いくつかの主要なライトを尋ねました レスポンシブウェブデザイン –記事の最後にあるリストを見つけることができます–過去12か月間に立ち上げられた最もレスポンシブなウェブサイトを選択するために、そしてここに彼らが思いついたものがあります。

それは印象的なミックスであり、クライアントが首をかしげることなく自由に歩き回ることができる個人的なプロジェクトから、Microsoft、Disney、Currys、Starbucksなどの革新的なクライアントの仕事、そしてBBCによる将来に優しい社内の仕事までさまざまです。次のウェブと時間。こちらがアルファベット順です...

01. Ableton

「Futuraがこんなに勇敢に使われているのを見たことがありません!」デザイナー、講演者、作家が叫ぶ エリオットジェイストックスEdenspiekermann ベルリンを拠点とする音楽ソフトウェア開発者のための Ableton 。 「しかし、それは大胆な画像と鮮やかなカラーパレットと組み合わせて機能します。」



レスポンシブウェブサイト:Ableton

ステファニー・リーガー 、デザイナー兼共同所有者 Yiibu 、エジンバラに拠点を置く小さなモバイルデザインコンサルタントは、次のように同意します。 'これは、ゴージャスで楽しく、楽しいブランドサイトです。サイトの一部は少し重いですが、聴衆、ブランドの性質、音楽やビデオを組み込む必要性を考えると、彼らは素晴らしい仕事をしたと思います。ソフトウェア比較テーブルの列ラベルを回転させて小さな画面にうまくフィットさせるなど、クリエイティブな(そして実用的な)デザインのタッチをたくさん探してください。

02. Adobe & HTML

' アドビのウェブ関連商品を紹介するこのサイト 、実際にはもっと アダプティブレイアウト 実際のレスポンシブデザインではなく」とデザイナーと開発者は説明します スティーブン・ヘイ 。 「パフォーマンスは大幅に向上する可能性があり、モバイルのページ上部のスペースの大部分を占めるナビゲーションは好きではありません。

レスポンシブウェブサイト:Adobe&HTML

ここでこのサイトに言及する理由は、アダプティブレイアウトとコンテンツの両方が、印刷デザインソフトウェアの巨人であるアドビが最新のWebとそのデザイナーのニーズを認識し始めていることを示しているためです。アドビは、そのデザインのルーツを持っており、このサイトをグラフィカルに魅力的な本格的なレスポンシブデザインに変える機会があります。

03.別のイベント

'新しく再設計された 離れたイベント ゴージャスなだけでなく、素晴らしく細工されています」と言います ティム・カドレック 、Web開発者および作成者 レスポンシブデザインの実装 。 '[開発者]は可能な場合はSVGアイコンを使用し、必要に応じてPNGにフォールバックします。

最高のレスポンシブウェブサイト:別のイベント

画像は表示されると遅延読み込みされます。たとえば、下にスクロールすると イベントページ スピーカーの画像が微妙にフェードインしているのがわかります。これらすべてに加えて、魅力的でクリーンなデザインです!」

04.BBCニュース

'2012年の最もレスポンシブなサイトは BBCニュースモバイルウェブサイト 」と言います ポールロバートロイド 、デザイナー Clearleft .netの毎月のレスポンシブコラムの著者。 「レイアウトに関してはまだデスクトップブラウザにスケールアップしていませんが、本当の意味でレスポンシブです。

レゴスターウォーズ5月4日

最高のレスポンシブウェブサイト:BBCニュース

「モバイルファーストの考え方で設計されており、さまざまなデバイスの特性に美しく対応するように拡張できます。これは、プログレッシブエンハンスメントの素晴らしい例です。レスポンシブ画像については多くの議論がありますが、BBCのアプローチは非常に実用的です。マークアップは、ヘッドラインストーリー用の単一の画像のみを参照し、条件付き読み込みは、より高性能なデバイスのみが他のストーリー用に高度に最適化された画像を受信することを意味します。このサイトには、どのデバイスからでもアクセスできるだけでなく、非常に高速です。

「来年は、ビジュアルデザインやレイアウトよりもパフォーマンスに重点を置いてほしいと思います。その点で、BBCニュースモバイルサイトは他の人がフォローするための素晴らしい例です。

05.ビルド2012

「今年の私のお気に入りの部分の1つは、AndyMcMillanとKyleMeyerが新しいものを思い付くのを見ることです。 会議サイトを構築する 、 '熱狂する レーガンレイ 、リードデザイナーおよび3分の1 パラベル

最高のレスポンシブウェブサイト:ビルド

「彼らは2012年版に対応し、これまでの最善の努力だと思います。」

06.目次

' コンテンツマガジン イーサン・マルコット自身がクリエイティブディレクターとして不公平なアドバンテージを持っているかもしれませんが、私の選択が公平でなければならないと誰も言いませんでした」と述べています。 マット・マーキス 、で働くデザイナー/開発者 フィラメントグループ ボストンで、創設者兼議長 レスポンシブ画像コミュニティグループ W3C用。

最高のレスポンシブウェブサイト:コンテンツ


'コンテンツは、美しいタイポグラフィと全体的なデザインを誇り、コンテンツを(予想どおり)前面と中央に任意のサイズで保持します。デザインは、ブレークポイントに応じてさまざまな方法でコピーをラップする問題ごとのイラストによって裏付けられています。イラストはデザインを引き立てますが、気を散らすものにはなりません。読むことは本当に喜びです、そしてそれは本当にこの「ウェブデザイン」のものがすべてであるものです。

07.CSS-トリック

'再び:選択 クリス・コイエの名前が載っているサイト 少し浮気のように感じますが、フェアのフェアです。男は獣であり、彼はこの再設計で地獄の仕事をしました」とマット・マーキスは笑います。 「クリスは自分のサイトで非常に多くの有用な情報を管理しています。彼は、論理的であらゆる画面サイズで使用できるだけでなく、多くの個性を備えたデザインで管理しています。

最高のレスポンシブウェブサイト:CSS-トリック

「ここでの名誉ある言及はクリスに行きます」 codepen.io (編集時にまだ完全に応答していません)これは、クイックデモとテストケースを作成するための非常に便利なツールです。そこには素晴らしい仕事がいくつかあります。」

08.カリーズ

' カリーズ 多くのエージェンシーや個人のサイトが持っているデザインのレベルと私たちが考えるレベルを持っていないかもしれませんが、私はレスポンシブデザイン技術のより広い普及へのその重要性のためにそれを選んでいます。レスポンシブデザインを採用した、私が見た最初の本当に大規模なeコマースサイトです」と説明します。 ジェームズ・ヤング 、クリエイティブディレクター オフロードコード

レスポンシブウェブサイト:カリーズ

「あらゆる形状とサイズの大量のコンテンツと製品を処理しながら、さまざまなデバイスで優れたエクスペリエンスを提供し、使いやすい購入プロセスが含まれています。これらはすべて、明確に検討されている単一のコードベース内にあります。ウェブチームをカリーズします。」

09. dConstruct 2012

'信じられないほどのスピーカーラインナップは別として、 dConstruct サイト自体は美しく細工されたレスポンシブエクスペリエンスです」と述べています。 キャラハンです 、オハイオを拠点とする小さな代理店の社長 Sparkbox

レスポンシブウェブサイト:DConstruct

'サイトの私のお気に入りの詳細はナビゲーションです。ビューポートエクスペリエンスを小さくするために追加された図像に注意してください。これは、タッチターゲット領域に実際の注意が払われたことを示しており、より小さなデバイスでサイトを表示しているユーザーに暗黙の値[配置]を示しています。これはモバイルファーストの考え方です。よくやった @clearleft ! '

10. Disney.com

'メディアが複雑なサイトの場合 ディズニー レスポンシブになり、ウェブ上でマルチメディアコンテンツを配信するためのアプローチの有効性を実際に示しました」と覚えています。 スコット・ジェール 、フィラメントグループのウェブデザイナー/開発者。 「このサイトの控えめでクリーンなデザインは、サイトでインラインで表示できるディズニー映画やテレビの豊富な画像と、Ajaxと history.pushState 微妙で不快感のないページ遷移を実現します。

レスポンシブウェブサイト:Disney.com

「このサイトは、タッチデバイス用のジェスチャー駆動型カルーセルや小さな画面でのキャンバス外のページプッシュナビゲーションなど、優れたコンテキストインタラクティビティも階層化しています。」

11.ほつれ、問題3

' 争いの第3号 「ウェブのオリジナルストーリーテリングマガジン」は、今年私が見た私のお気に入りのレスポンシブデザインであり、おそらくこれまでで私のお気に入りでした」とスコットジェールは回想します。 「カバーアートワークのデザイン要素がレイアウト全体で再利用される美しいレスポンシブカバーデザインに加えて、この号の各記事には、印刷雑誌で見られるように、独自のカスタムアート指向デザインがありますが、頻度は低くなります。ウェブ上で。

レスポンシブウェブサイト:Fray

'多くのレイアウトには、細かく調整されたCSSが組み込まれており、'中かっこ '記事のタイトルや署名欄が歪んでいて、全体に引用符がオフセットされているなど、美しい効果が得られます。ただの警告:サイトの主題は大人を対象としています。

12. Gov.uk

スティーブンヘイは言う: ' Gov.uk デザインは視覚的にシンプルですが(実際には画像はありません)、その意図が明確です。情報をすばやく見つけるのに役立ちます。政府のWebサイトの場合、これは簡単な作業ではありません。このサイトは応答性が高いだけでなく、使用するデバイスに関係なく、よく考えられたコンテンツと構造がより明確なユーザーエクスペリエンスにつながることを示す完璧な例であることが大好きです。

レスポンシブウェブサイト:Gov.uk

「政府が情報にアクセスできるように提示することは非常に重要です。このサイトのシンプルさは、他の政府機関が従う例になると確信しています。」

13.Herokuステータス

「HerokuはWebアプリケーションのデプロイメントサービスであるため、このサイトは非常に技術的な対象者に偏っています」と、2番目に選択したScottJehl氏は言います。 ' Herokuのステータスサイト 現在のインシデントのステータス通知とレポートのタイムラインを使用して、サービスの稼働時間を監視するための単なる場所です。

レスポンシブウェブサイト:Heroku

「小さな画面のプレゼンテーションは保守的ですが、非常に機能的で意味的に豊富で、すっきりとデザインされたリストプレゼンテーションを備えています。ただし、より広いビューポートでは、タイムラインは垂直方向のデータ視覚化に変形し、インシデントはボックス化され、曲線のHTML5キャンバス描画線を介して時点にリンクされ、コンテンツがより魅力的になります。

14.ロッタ・ニエミネン

' ロッタの賢いサイト 画面の左側と右側が隣接するセクションからコンテンツをからかうので、探索を奨励します」とエリオットジェイストックスは熱狂します。

レスポンシブウェブサイト:Lotta Nieminen

「これがさまざまな幅で壊れるだろうと半分は思っていましたが、動作は常に一貫しており、メディアクエリとJavaScriptを組み合わせて、個々の列を適切にスタックおよびサイズ変更します。」

15.マイクロソフト

'新しい マイクロソフト サイトは多くの理由で私にとってエキサイティングです」とベン・キャラハンは明かします。 「マイクロソフトのような巨人がこのようにレスポンシブウェブデザインに遅れをとっているのを見るのは、私たちが過去2年間でどれだけ進んだかを実際に示しています。デザインは明らかにメトロスタイルを取り入れており、ほとんどの企業サイトにはないレベルの清潔さとスペースを提供してくれます。かなりの量のナビゲーションもあります。これは、さまざまなビューポートやインタラクションモデルで使用できるようにするための実際の課題になる可能性があります。ドロップダウンが遅れているという事実が大好きです クリック または 接する [イベント]ではなく :ホバー 。近い将来、より大きな解像度であっても、これはもっと多く見られると思います。よくやった @paravelinc ! '

このサイトで働いていたレーガン・レイは、次のように述べています。 'トレントとデイブは控えめすぎて、パラベルの角を鳴らすことができないので、そうします。マイクロソフトにとってこのようなエキサイティングな時期に、私たちは小さな役割を果たしてうれしく思いました。大企業がレスポンシブデザインを採用している好例だと思います。」

16.ポリゴン

' ポリゴン は、その兄貴を置くめちゃくちゃリッチなレスポンシブゲームサイトです( IGNGamespot 、など)恥ずかしいことです」と賞賛します デイブ・ルパート 、の主任開発者 パラベル との共同ホスト ShopTalk クリス・コイエと。 「大きなグラフィックは、ゲーマーにうずきを感じさせます。インテリアポストは、アートディレクションとレスポンシブアーキテクチャの驚くべきブレンドです。

17.暴動

エリオットジェイストックスのコメント: 'シンプルで中央に配置された1ページのサイトは、レスポンシブデザインに簡単に変換できるように見えるかもしれませんが、すべてをシームレスに再調整するには、スキル、配慮、鋭い目が必要です。 暴動 のサイトはまさにそれを行っています。」

18.スキニーネクタイ

'私は何も所有していませんが スキニーネクタイ 、80年代の残り物のほんの一握りがどこかの収納棚に隠れていることを除けば、このサイトは美しく実行されていると思います」とベン・キャラハンは言います。 「より複雑なサイト、この場合はeコマ​​ースエクスペリエンスでレスポンシブテクニックが使用されているのを見るのも励みになります。このサイトのナビゲーションは、すべてのビューポート解像度で一意ですが、スペクトルの小さい方で非常にうまく機能します。その視覚的な性質は、このサイズの店舗にとって完全に賢明であり、 :ホバー タッチデバイスで。よくやった @falkowski ! '

19.スターバックス

'レスポンシブ Starbucks.com 素晴らしいですが、私たちにとってさらに刺激的なのはWebベースです スタイルガイド それはそれに付属しています」 トレントウォルトン 、Paravelの創設者は指摘します。 「.psdや.pdfよりもはるかに優れた流動性/レスポンシブレイアウトのパワーを伝えます。」

20.タットリー

「このリストに危険なタイムシンクを含めたところです」と、この一時的なタトゥーサイトについてマットマーキスに警告します。そのため、事前にあなたやあなたの上司に謝罪します。でデザインを閲覧するのに恥ずかしい時間を費やしました タットリー さまざまなデバイスにまたがっており、特定のブレークポイントでしか得られないエクスペリエンスを望んでいることは決してありません。彼らは自分たちのサイトが膨大な範囲のデバイス/ウィンドウサイズにうまく変換されることを確認するために素晴らしい仕事をしました、そしておそらくもっと重要なことに、彼らは私に自分を悪者のように見せるための確実な方法を提供します。とにかく、一度に数日間です。」

21.次のWeb

「私はまだ粘着性のあるサイドバーのファンではありませんが、このサイトはかなり素晴らしいです」とデイブ・ルパートは認めています。 「空白とタイポグラフィは本当にリラックスした環境を作り出します。訪問すると気持ちよく安心します TNW タブレットで:それは素晴らしい感触と良い読書体験を持っています。

22.デザインの形

「フランク・チメロの反応の良い読書体験への取り組みは、すべてのレベルで刺激を受けています」とトレント・ウォルトンは言います。 '彼のオンライン版 デザインの形 読むのが楽しいです。目立たないチャプターナビゲーションはうまく機能し、メディアクエリ フォントサイズ スケーリングはすべてを素晴らしく比例させます。

デジタルアートを改善する方法

23.時間

'ボストングローブのリードに続いて、 時間 レスポンシブニュースウェブサイトの世界にその実装でそのマークを付けました」とスティーブンヘイは称賛します。 「モバイルで「完全なウェブサイト」へのリンクを提供しているニュースウェブサイトが世界で1つ少ないという事実はすでに十分ですが、サイトはモバイルで本当に見栄えがします。それはずっと時間のアイデンティティです。一部のテキストは一部のデバイスでは少し小さいかもしれませんが、開発者はスケーリングを続けています。常に良い考えです。拡大縮小された画像を提供するなど、パフォーマンスを向上させるためにいくつかの手順を実行できますが、それでも、それは正しい方向への一歩です。

24. United Pixelworkers

「私はの大胆なシンプルさのファンです United Pixelworkers 小さな画面のソリッドグリッドレイアウトとナビゲーション処理はうまく機能します」とJamesYoung氏は言います。 「カリーズサイトと同様に、これは私の主要なタスクであるグッズの購入をどのデバイスでも簡単に完了できるeコマースサイトです。

「Shopifyにジャンプして購入を完了するのは残念です。少なくともブランドのチェックアウト完了ページをすぐに見たいのですが、それでもTシャツを購入するのは非常に簡単です。」

「レスポンシブeコマースは難しいですが、Pixelworkersはそれを理解しているようです」とDaveRupert氏は付け加えます。 '素晴らしいホームページ、素晴らしい製品ページ、素晴らしいチェックアウトフロー。あなたが素晴らしいレスポンシブeコマースサイトを作成することを探しているなら、これはあなたのバーです。

25.ノートルダム大学

「私はいくつかのものが大好きです ノートルダム大学 ボンネットの下で起こっている」とティム・カドレックは絶賛する。 'RESSを使用して、小さな画面のページの重みを減らします。また、ジオロケーションを使用してキャンパスツアー機能を強化します。サイトがあなたがキャンパスにいることを検出すると、最も近い場所を特定し、徒歩での道順を示します。これは、ユーザーのコンテキストとデバイスの機能を使用してエクスペリエンスを向上させるのに役立つ方法です。

この記事のために2012年の非常にお気に入りのレスポンシブサイトを選択してくれたすべての貢献者に感謝します:Ben Callahan、Elliot Jay Stocks、Tim Kadlec、Paul Robert Lloyd、Mat Marquis、Scott Jehl、Stephanie Rieger、Stephan Hay、James Young、そして全体パラベルの:トレントウォルトン、デイブルパートとレーガンレイ。

いくつかのサイトをチェックするように促されたことを願っています。コメントで私たちの選択についてどう思うか、そしてどのサイトが今年あなた自身のお気に入りだったかを教えてください。

これが好きですか?これらを読んでください!