web-dev-qa-db-ja.com

レスポンシブデザイン:1024pxより大きくする必要がありますか?

幅が916pxから320pxまでの、ウェブアプリ用の6つのレスポンシブバリエーションがあります。一部の内部テストの実行中に、6人に2人が、960pxで停止するのではなく、アプリがより大きな画面にも応答することを希望すると述べました。このグループは、1024ピクセルまたは1280ピクセルの解像度を持つ可能性が高い将来のユーザーを正確に表すものではありませんが、ほとんどのユーザーが行うと思うことに私がやっていることを適用している可能性があります(私は大画面ですが、ブラウザが最大化されることはありません)。

たとえば、1260pxに対応するための対応策を検討する必要がありますか?ほとんどの人がこれらの言及された解像度を持っていますが、「フルスクリーン」でブラウザを使用する割合に関するデータはありますか?

30
Yisela

簡単に言えば、すでに6つの異なるモバイル画面解像度を考慮している場合は、多くの大きな画面解像度も考慮に入れる必要があります。

長い答え:これは複雑すぎます。 28の「標準」解像度があります そして、それらすべての専用レイアウトを作成するには、非常に貴重な時間がかかります。代わりに、次のようにしてください ゴルディロックスアプローチ :「狭い」、「普通の」、「広い」の3つの画面サイズ。必要に応じて(そしてリソースがある場合)、4または5に増やすことができますが、応答性のあるブレークポイントを流体セクション(つまり、パーセンテージで設定された幅)と混合すると、ほぼすべての画面でカバーできます。実際の例(4つのブレークポイント)は Microsoftの新しいWebサイト を参照してください。

41
dnbrv

可能なデバイスではなく、コンテンツが決定を指示するようにします。

大きいバージョンを作成した場合、サイトはより使いやすく/より良くなりますか、それとも単に大きくなりますか?答えが「はい」の場合、そのためにどれだけの労力が必要であり、何パーセントのユーザーがそれを利用できるでしょうか。

また、追加バージョンを作成することに決めた場合、レスポンシブデザインで私が目にする最大の間違いは、垂直解像度を忘れることです。 Appleは、11インチおよび13インチのMacBook Airを多数販売しています。ワイドスクリーンが広く、垂直方向のスペースが非常に限られています。幅が広いからといって、本当に幅が広くて背が高いヒーローが欲しいとは思わないでください。画像が大量の重要なコンテンツを画面から押し出しています。

9
Brian Behrend

「受け入れられた」回答に同意しますが、言及されている質問「1024pxより大きくする必要がありますか?」には正確に回答しません。

すべてのページでレスポンシブ/フルイドデザインを行う余裕がないとしましょう。正直に言うと、マイクロソフトでさえこれを買う余裕はありません。どうやら、あなたが彼らのホームページを離れるとすぐに、それは960pxに戻ります。理解できます。私たちはウェブデザイナーとして、できるだけ早く仕事を終わらせなければならないことがあります。

では、1024pxより大きくすべきでしょうか?そろそろ時間だと思います。

過去4年間、私の会社はこの最小解像度のパラダイムに合わせるために960pxのWebサイトとeコマースを作成してきました。しかし、時代は変わりました。私は1024px幅の解像度がほとんどなくなっていると思います。

私は、世界中のどこからでも適切な量のトラフィック(50万回のアクセス)を受け取り、desktopユーザーの5%未満であるeコマースサイトの分析を読んで、少し研究をしていました解像度は1024px以下でした。また、これらのユーザーがコンバージョンに至る可能性は、モニターに費やす金額と密接に関連していると思います。

数か月前から、私のチームと私はアップグレードして、神話を後にすることにしました。現在のところ、妥当な最小解像度は1280x768です。現在、デザインの幅は1060ピクセルまたは1180ピクセルのいずれかであり、より多くのスペースと柔軟性を提供して、よりクリエイティブになりました。より多くの部屋は、私たちがコミュニケーションしようとするメッセージにもっと息を吹き込みます、そして、どういうわけか、より良い経験を持つためにユーザーにも。

私はあなたが何を考えていなければならないか知っています:iPadはどうですか?確かに、iPadのサポートは人生においても一般的にも重要です。私たちのための迅速な解決策は、あなたのウェブサイトをiPadの画面解像度に合わせる次のマークアップです。それはかなり素晴らしいです!

<meta name="viewport" content="width=1180">

これはすべて、私の意見にのみ基づいています。実際に他の人の考えを知りたいです。

7
Carlos Martinez

読みやすさの問題を引き起こすテキスト行の長さを増やして、余分な幅を埋めないようにします。

Smashing Magazineのように、幅の広い範囲を巧みに埋めるのは困難であり、リソースを消費するため、問題を解決できるかどうかは、コンテンツとリソースに依存します。私は問題を強制しません。

2
obelia