web-dev-qa-db-ja.com

Webサイトで最高の最大幅のコンテンツコンテナは何ですか?

Bootstrap 3/4またはその他のフレームワークに続いて、メインコンテンツの最大幅の点で不一致に気づきました。例えば:

  • bootstrap 3では、コンテナの最大幅は1170pxです。
  • bootstrap 4では、コンテナの最大幅は1140pxです。
  • Microsoft Webサイトでは、現在の最大幅は1600pxです

グーグルアナリティクスからのデータは、ほとんどのユーザーが1366x768の画面解像度を約12.76%持っていることを示しています。

標準と画面の解像度に基づいて最適な最大幅を決定するために使用できる原則/ルールは何ですか?

ありがとう

8
Juan Jardim

「最適な」最大幅はコンテンツによって異なります。 Web Accessibility Initiative は、行の最大長を80文字にすることを提案しています。コンテンツのレイアウト、デザイン、フォントの選択、レスポンシブな動作に応じて、最適な幅は異なります。たとえば、3列のレイアウトでは、適切な行の長さを維持しながら最大1600pxを使用できる可能性がありますが、1列のレイアウトでは同じことを行うのに苦労します。

原則として、私はコンテンツに基づいて最大幅を設定することを試み、Pectoralis Majorが述べたように、視聴者の画面サイズに基づいて異なるレイアウトを提供します。

6

標準と画面の解像度に基づいて最適な最大幅を決定するために使用できる原則/ルールは何ですか?

Max-widthが大きすぎると、ユーザーに恐ろしい体験をもたらす可能性が非常に高くなります。それはあなたが幅を生きることをいとわないものですか?

重要なデータ、ナビゲーション、UI(購入ボタンなど)を表示するためにユーザーに水平スクロールを強制したくない場合は、最大幅を狭くする必要があります。

幅が広すぎるかどうかは、デザインとユーザーベースに大きく依存します。それでも、素晴らしいデザインを表示したいので、ユーザーを投棄しないようにする必要があります。

一方、あなたまたはあなたの会社が、1600ピクセル以上のディスプレイを使用するユーザー向けのスタイルを作成するために時間とお金を費やすことをいとわないのであれば、先に進んでください。

3
Mayo

これは、最大解像度を参照するための私のお気に入りのサイトです: https://www.hobo-web.co.uk/best-screen-size/

重要なポイントは、次のことです。

  • 1。柔軟な最大値少し補足しますが、それでも関連性があります。最大解像度に関係なく、レスポンシブデザインを使用することを強くお勧めします。これにより、最大解像度がユーザーのディスプレイよりも大きい場合でも、ユーザーは引き続きアクセスできます。
  • 2。地域サイトはグローバルに表示されていますか、それともローカルにしか表示されていませんか? Hoboは、地域ごとに異なる米国、英国、および世界規模の解決統計を提供します。彼らは頻繁に結果を更新するので、この回答で直接参照する意味はありません。これは常に変化していて、私を導くことに注意してください...
  • 3。すべてのケースは異なります。リンクされた統計は良い出発点ですが、サイトの訪問者を分析する必要があります。独自の分析により、サイトにアクセスする最も一般的な解決策を示すことができます。たとえば、サイトがPCゲーマー向けである場合、かなりの数のユーザーが4Kディスプレイを実行しています。そのため、それらの最大解像度は高くなります。サイトがビジネス向けである場合、予算の制約が原因で古いハードウェアが実行されている可能性があり、古いモニターでは解像度が低くなります(モニターはビジネスの世界ではほとんどアップグレードされません)。これは、古い統計が既にあるサイトの再設計には最適ですが、新しいサイトにはあまり適していません。そのため、上記の2の地域統計は、適切な出発点になります。

最大幅は、ユーザーの解像度の幅全体に及ぶ必要はないことに注意してください。 4Kディスプレイを使用しているユーザーは、左側と右側に大きな空白の列が表示されることに慣れています。ここに、これらのマージンに関する やや関連する質問 があります。

3
Davbog

標準と画面の解像度に基づいて最適な最大幅を決定するために使用できる原則/ルールは何ですか?

すべてのユーザーがサイトを快適に閲覧できるように、さまざまな画面解像度に複数のバージョンを提供できます。

12.76%は87,24%に比べてそれほど多くないので、すべての人にその解像度を使用しても意味がないので、携帯電話、タブレット、および小さい/大きい画面解像度のバージョンを提供する必要があります。

2