web-dev-qa-db-ja.com

ユーザーはレスポンシブウェブデザインを拡大できますか?

レスポンシブデザインに関しては、ユーザーは引き続きズームインまたはズームアウトできますか?

現在、レスポンシブデザインに取り組んでおり、テスターの1人がズームインまたはズームアウトできないことが不便であることに気付きました。一部のレスポンシブデザイン(Boston Globe、Polygon、Currys.co.ukなど)を確認すると、ピンチツーズームを使用できません。 Webサイトが適切に拡大縮小されている場合、ズームインまたはズームアウトの機能が無効になっていても、それでも良いエクスペリエンスを提供するのは慣例ですか?

一方で、ユーザーがズームインまたはズームアウトする必要がある場合はおそらく別の理由があり(テキストが小さすぎる、画像が良くない)、問題は別の場所にあるため(つまり、 RWDが正しくフォーマットされていません)。一方、ズームを使用するかどうかはユーザーが決定することであり、設計者に強制されるべきではありません。これは標準機能であり、ユーザーがそのビューポート用に適切にフォーマットされていない他のWebサイトを表示するときに頻繁に使用する機能です。

何か案は?

99
Misha Scholte

はい、ズームを許可する必要があります。

私は、これまでRWDプロジェクトに携わっていたことから、考えを変えました。もともと私の意見は「サイトは携帯電話で動作するように設計されていないため、人々は携帯電話でズームするだけでしたが、うまく設計されたRWDサイトには当てはまりません」ただし一部のユーザーテストの結果からだけでなく、ユーザーを最優先にするという一般原則からも、意見を変えました。

ユーザーがズームしたい理由がわかりません。あなたが示唆したように、それはいくつかの理由である可能性があります:

  • より詳細に画像を見たい
  • コピーして他の場所で使用する単語/段落を選択しようとしているので、ズームインしてより近くに表示し、選択を容易にします
  • 小さすぎて表示できないコンテンツの特定の領域を読みたいので、ズームインして表示したい
  • さまざまなモバイルデバイスの解像度は標準ではありません。それが4インチ画面であるからといって、テキストがすべての4インチデバイスで同じくらい鮮明であることを意味するわけではありません。

ユーザーが希望する理由はいくつもありますが、したいしたい、できない場合、ユーザーエクスペリエンスはズームについて気にしていないのに誤ってズームしてしまった場合

それを可能にするために必要ないくつかのマイナーな開発作業は別として、その機能を追加する際のオーバーヘッドはほとんどありません(デスクトップブラウザを使用している場合、ユーザーは好きなページをズームできることを忘れないでください)。

また、一部のレスポンシブサイトdoはズームを許可しています。 http://smashingmagazine.com/ または http://clearleft.com/ それらの一部です。

143
JonW

Kyle Schaefferによる

ズーム機能を無効にして、サイトのコンテンツを利用するユーザーの機能を強化する必要があります。ユーザーが表示しないようにデザインレイアウトをフォーマットした場合パンまたはズームする必要はありません。ズーム機能は、ユーザーがコンテンツをナビゲートするのを実際に妨げます(垂直方向にスクロールする必要があるだけです)。ただし、レイアウトのフォーマットを正しく設定していない場合、ズーム機能を無効にすると、ブラウザーの非常に重要なナビゲーション機能が削除されるため、ユーザーはさらに苛立ちます。

HTML5Rocksに関する記事 は、特定の実装について述べています。

モバイル画面向けに最適化されていないサイトに対応するために、多くの最新のモバイルブラウザーは、モバイル向けに最適化されていないサイトをより見やすくする、より大きなブラウザービューポートを設定しています。ユーザーは、必要なコンテンツをピンチして拡大できます。これはモバイル以外のエクスペリエンスでは問題ありませんが、モバイルブラウザー用にエクスペリエンスを最適化するため、ビューポートメタタグを使用して画面の幅をデバイスの幅に設定します。

小さな画面向けにコンテンツを最適化している場合でも、ユーザーがページをズームする機能(ユーザー属性をuser-scalable = noに追加することで可能)を無効にするわけではないことに注意してください。 可能な限りアクセスしやすいように、ユーザーズームを有効にしておくことをお勧めします。ただし、固定配置要素を含める場合など、ユーザーズームを無効にする使用例があります。

そして Luke Wroblewskiからの引用 もここに関係があります:

私の画面が小さいからといって、私の行動、欲望、ニーズに対する洞察が誰かに与えられることはありません。

つまり、なぜあなたしない場合にユーザーを制限する必要があるのか​​必要にします。ユーザーに決めましょう!

ユーザーがレスポンシブウェブデザイン内でズームすることは不可能ではありません。実際にはallow it(またはdisallow it)は非常に簡単です。コンテンツの構造がどの程度適切であるか、または不適切であるかによって、時々不自然に見えることがあります。

1つのオプションは、ユーザーが次のメディアクエリがヒットするまでズームをピンチすることです-これで説明されているように REMuxの概念実証 CSSトリック。

21
Roger Attrill

私は今、Event Apartに参加していますが、このような質問が出てきました。そうでなければ、ユーザーがデバイスで使用することに慣れているユーザーの機能を防止または無効にできますか?答えは満場一致でした。ベストプラクティスはこれを行わないことですが、それに対応する方法を予測して構築することができます。ちなみに、会議の別の部分では、現在いくつの画面サイズと解像度でいくつのデバイスが登場するかが明らかになりました。それで、あなたへの私の質問は、特定のデバイスであなたのサイトにズームが意味をなさないことをどうやって保証することができるのでしょうか?デバイス全体の画面サイズの範囲は3インチから27インチ以上です。

3
Scott Shipp