web-dev-qa-db-ja.com

ユーザーは(オプトアウトする機能なしで)レスポンシブデザインを強制する必要がありますか?

モバイルバージョンのサイトに自動的にリダイレクトされ、「通常のサイトを表示」リンクがない(または簡単に見つけられない)よりも悪いことはありません。これは、モバイルサイトが通常のサイトの縮小バージョンであるだけでなく、慣れ親しんでいないことです。以前は2次元のページであったものの突然の1次元と、必要なスクロールのわいせつな量です。以前のサイトのメンタルマップは正確ではなくなりました。

Boston Globeサイト(レスポンシブデザインのよく引用されている輝かしい例)では、直線的に読むことを考えていないと、スクロールの量が非常に苦痛であることがわかります。 iPhoneのRetinaディスプレイでは、デスクトップバージョンは識別可能で、ページの任意の場所にすばやくタップしてズームするだけですぐにナビゲートできます。ほとんどのレスポンシブデザインと同様に、[通常のサイトを表示]オプションは使用できません。

ユーザーをレスポンシブデザインに強制する必要がありますか?オフにすると「通常のサイトを表示」に切り替えることができますか?

以下は、各ビューでのボストングローブサイト上のiPhoneの推定ビューポートオーバーレイです。

enter image description here

=== 2012-09-12を更新===

最近いくつかのプロトタイプが登場しました:

61
Luke Charde

はい、ユーザーがそれをエスケープできるようにする必要があります。

ボストングローブの再設計は、レスポンシブデザインに関する本を書いたEthan Marcotteが担当しました。サイトのCMSの性質と組み合わせると、レスポンシブデザインの展開性、使いやすさ、柔軟性の問題に最適です。

各ビューポートは、コンテンツを昇格、降格、一般的に再配置するためにコンテンツをモーフィングする必要があります。正しく設計(およびテスト)すると、大多数のユーザーのニーズを満たすことができます。他のすべての人にとっては、メディアクエリをより大きなもの(min-width: 1000px1200pxの間)に分割することをお勧めします。このオプションを有効にしないことは、通常のサイトのすべてをより小さなフォーマットで提供していると想定することであり、mostレスポンシブデザインでは、実際にはそうではありません。

モバイルでアクセスするデスクトップユーザーの場合、ユーザーは頼りなくビューポートに完全にロックされます。これは、一部のユーザーにとって本質的にイライラすることがあります。間違ったビューポートを表示している、または一般にメディアクエリでカバーされていない新しいデバイスのような他の問題がある可能性があります。その場合、デザインは最適ではなくなります。その場合、ネイティブデバイスのページのレンダリングにフォールバックします。

編集(2012年8月13日)

私はこの問題についてイーサンと話しました、そして私達は同意したと思います。優れたレスポンシブデザインは、「デスクトップ」ビューポートから機能やコンテンツをトリミングするべきではありません。 Bootstrapなどのフレームワークの導入により、デザイナー/開発者がレスポンシブデザインに理想的な方法でアプローチしていなかったため、特定の機能(ナビゲーションメニューなど)を非表示にするレスポンシブサイトが非常にうまく機能していないと私は見ています。

さらに、新しいデバイス、ブラウザー、さらにはPPI /高解像度でさえ、奇妙な方法で応答性の高いWebサイトをレンダリングする可能性があります。最高のレスポンシブサイトはデバイス/ブレークポイントではなく任意のキャンバス用に設計されているため、これらのインスタンスはまれである必要がありますが、ユーザーが960pxまでブレークアウトできるようにすることは良いフォールバックです。

30
Nic

Jacob Neilsonは、モバイルユーザーが必要に応じて モバイルバージョンをオプトアウト できるようにすることを特に推奨しています。

ただし、これはサイトがデバイスに不適切に適応している例であることにも注意してください。あなたの携帯電話は他のすべての携帯電話と同じではありません。十分な労力が費やされた場合、中間のレイアウトである可能性があります...完全なサイトではなく、単純な携帯サイトではなく、2つを組み合わせたもの。 。より良い体験を提供します。問題は、レイアウトに費用がかかることです。ある時点で、受け取った価値は投資に値しません。

5
Myrddin Emrys

モバイル市場は急速に変化しているため、さまざまな構成すべてに対応するように設計することは不可能です。異なる可能性のあるすべての組み合わせに対処するための設計マトリックスを構築するには、多くの変数が関係しています。

3.5インチディスプレイ付きのiPhoneを使用している場合、別のビジターが720インチディスプレイ付きの4.6インチを持っている可能性があります。モバイルですか、デスクトップですか?画面の解像度に基づいてそれらはデスクトップですが、画面サイズに基づいてそれらはモバイルです。今日だけですが、明日はどうですか? Samsung Noteは720pの5.7インチディスプレイを備えているため、タブレットの市場の変化を見ることができます。また、Microsoft Windows 8は、タッチスクリーンを搭載したラップトップの全ラインを紹介します。

まず、レスポンシブレイアウトとは何かを理解しましょう。これは、レイアウトを目的のフォームからステップダウンしてコンテンツをよりよく表示するための方法ですズームする必要なし。これは、設計段階で設計者が過度に補正しなくても実行できます。これは、ソフトウェア開発の「一度構築したら、どこでも実行できる」という歴史に沿っています。

レスポンシブデザインの問題は、次の仮定に基づいていることです。

  • メディアのプロパティ(画面サイズ、向きなど)は、複数のデバイスで一般化できます。
  • 要素を積み重ねて再配置することで十分です。
  • 設計の主な目的はデスクトップであり、モバイルレイアウトは検討後に自動化されました。

だから、すべてのことを言った。レスポンシブデザインは単なるツールであり、機能する場合もありますが、機能しない場合もあります。 change元のデザインを効果的に提示しないデバイスに対応するためのレイアウトです。これは標準ではないので、モバイルデバイスがページのレンダリングの支援を必要とするとは限りません。

5
Reactgular

スタイルシートを追加、削除、または切り替える単純なトグルだけではないのですが、このアプローチにはいくつかの欠点があると思います。

ブラウザウィンドウのサイズを変更して、このデモのトグルボタンをクリックしてください。

2
Marcus Asplund

はい、ユーザーにレスポンシブデザインを強制するべきではありません。特に、eコマース業界はこれを十分に理解しています。使用しているモバイルWebサイトに含まれる機能が、デスクトップバージョンのものより少ないことに気付いたユーザーの多くは、大いに憤慨しました。その結果、多くのeコマースWebサイトは、古いデスクトップバージョンに戻す方法を提供しています。

また、特に私が移動しているときに、レスポンシブWebサイトが素晴らしいと思うこともここで言及する価値があります。それらがとてもはっきりしていてすっきりしているので、揺れる携帯電話ですべてをはっきりと見ることができます。

ソース: http://www.sitepoint.com/disable-sensitive-design-option/

1
steve

これが頭の中をぶらぶらするよりも答えになることを願っています...しかし、私はそれを試してみるつもりです...

IPhoneは、実際に最初のモバイルデバイス(少なくとも、広く分散されたデバイス)であり、WAPやその他のモバイル中心型の小型Webサイトではなく、「通常のWeb」を表示することを意図して設計されました。

スティーブジョブズ氏は、大きなドキュメントをズームイン/ズームアウトして見たいものすべてを驚くほど簡単に表示できるデバイスを作りました。よかった!

しかし...他のデバイスはそのタイプの柔軟性(Nokiaデバイス、BlackBerryなど)をほとんど提供していなかったため、多くの設計者はそれに同意しませんでした。

そこで、レスポンシブデザインが登場しました。これは素晴らしいことです。単一のWebサイトを設計して、あらゆる種類のデバイスで正常に機能させることができるからです。

悲しいかな、あなたが指摘するように、それは必ずしもエンドユーザーが望む体験ではありません。私は同意する傾向があります。

私は2つのことがこれを本当に重要な問題にしていると思います:

  • 網膜ディスプレイ(および同様の高密度画面)
  • 電話とタブレット/パッドの間にあるデバイス(小さなパッド/大きな電話)

どちらの場合も、人が持っている余分なピクセルを活用して、「フルサイト」を縦長のリニアドキュメントではなく、ズーム可能なドキュメントとして表示したいと考えるのはもっともらしいことです。

それで、ええと...答え...うーん:はい!ユーザーはこの2つを切り替えることができる必要があります。

もちろん、これは単一のレスポンシブWebサイトでも実現できます。重要なのは、xピクセル幅の画面で表示しているにもかかわらず、フルピクセル幅のレイアウトを見たいことをユーザーにサイトに知らせることです。

1
DA01

サイトのコンテンツがユーザーに完全かつ適切に提示されている場合は不要だと思います。コンテンツ中心であり、各ビューで正しく表示することです。サイトのコンテンツや組織が適切に機能しない場合、完全なレスポンシブデザインはそもそも間違いなく正しい選択ではありません。その場合、完全分割またはおそらくハイブリッドアプローチが最も適切です。

参考までに、ここにChris Morataによる RWDサイトのフルサイズビューの設定例 があります。

1
Mike Avello

2点。

1)私がデザイナーで、モバイルデバイス専用のサイトをデザインしている場合は、それを受け入れます。 7インチまたは15インチのデバイス専用のサイトを作成した場合、それを受け入れます。これらすべての状況を1つのサイトで設計するのはなぜ悪いのですか?

2)人々は、外出中に、通常は忙しく、物事の合間に、電話でサーフィンします。私の携帯電話でボストングローブのサイトにアクセスすると、コンテンツよりも少ないコンテンツが必要です。トップストーリーを1つの列に表示します。 2本指ズームはUXの悪夢です。はい、必要な場合は、完全なサイトにアクセスできます。これはモバイルサイトです。以前に述べたように実際には表示されない「フルサイト」を確認する方法がない場合でも、レスポンシブデザインの7インチまたは50インチモニターをターゲットにしない理由を考え出すのは難しいです何を意味します。

1
Greg Bowen

非常に興味深い質問です。しかし、私はその疑問を正直に述べたいと思います。一般的で、読みにくく、ズーム可能な概要は、いつコンテンツをナビゲートするのに役立ちますか?

これは、今後のWindows 8での認知ズームとまったく同じで、Metroタイルビューを縮小してタイルを再配置できます。これは ここにデモのvid です(4:05頃に探してください)。ユーザーがこのように簡略化された概要から十分な情報を得て、賢明な決定を下すことができれば、それはそうかもしれません。

そのため、この問題は単に「はい/いいえ」のレスポンシブデザインの議論よりもさらに進んでいると思います。何がいつ機能するかを発見できるように、これらのズーム機能をもっと実験する必要があると思います。

1
Paul Steffens

「完全なサイトに移動」機能を提供するプロトタイプのレスポンシブサイトを用意しました。残念ながら、それを共有することはできませんが、一般的な原則は共有できます。

CSSはLessを使用して構築されています。つまり、メディアクエリのコンテンツは、最も広いメディアクエリと同じルールを効果的に適用する2番目のスタイルシートに簡単に解析できます。この2番目のスタイルシートは、一部のラッパー要素に固定幅を設定して、サイトを「デスクトップ」プレゼンテーションに固定します。

「完全なサイトに移動」ボタンをクリックすると、セッションCookieの設定がトリガーされ、サーバー側のコードによって読み取られ、ビューポートタグが削除され、レスポンシブCSSから固定幅CSSにソースが交換され、「ワイド」の追加クラスが追加されます。 bodyタグを使用して、スタイルを微調整するためのフックを提供します。 [最適化されたサイトに戻る]ボタンをクリックすると、Cookieが削除され、ビューポートとレスポンシブスタイルシートが復元されます。

これは機能的にはうまく機能しますが、これまでのところ、すべてのユーザーテストで誰も使用していません。それが公開されたときに、これに関する分析を確認するのは難しいでしょう。

1
Colonel Sponsz

年が経つにつれて、これはますます問題になっています。驚くほど悪いデザインと決断が続いています。 30歳未満の多くの開発者は、これが黄斑変性症の人々に何をもたらすかを理解していません。人々が不平を言っているなら、はい、あなたは行動するべきです、さもなければ訴訟が続くかもしれません。標準の回避策は、RDP/VNCをデスクトップ(実際またはVM)に使用して、デスクトップを参照し、デスクトップ画面をウィンドウ表示することです。非常にシンプルなアプリやアプリでない限り、モバイルサイトを見たくありません。プレゼンテーション層の処理はデバイスの仕事です。メニューを非表示にするためだけにズームインすると、非常にイライラします。あなたが故意にお金を払わないなどの権利を行使するのを防ぐために、あなたが故意に行動しているように見えてはいけません。

0
mckenzm