web-dev-qa-db-ja.com

Webサイトがブラウザの幅全体を使用しないのはなぜですか?

ウェブサイトはどのような理由ではない Gmailのようにブラウザの幅全体を使用するのでしょうか?

たとえば、StackOverflowは幅全体を使用しません—左右のマージンがあります。これは、ページのコンテンツ全体が列に表示され、左右に空白があることを意味します。

すべてのタイプのブラウザーでの表示に対応するなど、ほとんどの場合技術的な理由ですか、それともこの決定には設計上の理由がありますか?

41
kensen john

あなたが話している違いは、しばしば「固定幅」対「液体」または「流体」レイアウトと呼ばれます。

固定幅のレイアウトは、液体のレイアウトよりもはるかに簡単に設計できます。液体レイアウトを設計するときは、ディスプレイのより多くの側面を制御する必要があります。ウィンドウが最小幅を超えて縮小するとどうなりますか?ウィンドウのどの部分が引き伸ばすことができ、固定幅の列は何であるべきですか? 「ボディ」の最大数はありますか? (1920x1080ディスプレイではほとんど読めない液体レイアウトを見たことがあります。)

最も重要な位置を争う2番目の理由は、固定幅のレイアウトが予測可能であることです。 「クリエイティブディレクター」または「グラフィックデザイナー」がいる、Webサイトを実装している人とは異なる大胆な会社では、ワイヤーフレームまたはサンプルサイトはPhotoshopで作成され、マネージャーによって承認され、Webプログラマーに渡されます。 CMSで実装する(たとえば)。 Webプログラマーは固定幅と液体の関係を気にしていません。マネージャーが承認した方法でサイトを実装したいだけです。また、バリエーションごとに追加の承認が必要となり、ブラウザごとに異なるレイアウトを改善することができなくなります。

そして3番目に重要度の低い要素... " ヒートマップ "を測定する多くのWebサイト分析ツールがあり、リンクが機能しないため、ヒートマップを液体レイアウトに実装することは事実上不可能です。ページの予測可能な場所に表示されます。

30
ghoti

ユーザーJared Farrishに同意します。コンテンツを読みやすくするためです。段落がブラウザーウィンドウの幅全体に及ぶ場合、段落が幅で多くのピクセルを占める場合、1つの行の終わりから次の行の先頭に移動するのは目に負担になります。このため、多くのWebサイトはページの幅を制限する傾向があります。さらに、一部のWebサイトは、ユーザーのブラウザーウィンドウの幅が非常に大きい場合、メディアクエリを使用してフォントサイズを変更します。

25
Peter O.

これについては、Peter OとJared Farrishと一緒です。私たち人間が、読みながら行を追跡し、次の行に移動するのをどれほど簡単に見つけられるかと関係があります。したがって、次の行の先頭に戻るまで追跡する必要があります。そのため、新聞は紙の幅全体ではなく、記事を列で印刷します。

確かに、ここではメディアクエリを使用すると効果的です。サイトのコンテンツに応じて、さまざまな表示幅の列数を変更できます。また、ナビゲーション/補足情報を調整して、それに応じてワイド/ナロー画面に合わせることができます。

6
Antony Scott

固定幅レイアウトを正当化する最も良い理由の1つは、読みやすさです。テキストの行を読みやすくするには、70〜80文字を超えないようにする必要があります。

その上、すべての画面サイズで適切に機能する流動的なレイアウトを作成するのは大変な作業です。スケーリングの問題だけでなく、優れたUXを提供するには、ブロック全体を変更して移動する必要があります。

モバイルデバイスでボタン[collapse]に折りたたまれているナビゲーションメニューを考えてみてください。概念化して実装するのはそれほど難しいことではありませんが、-all Webサイトの要素に対してこれを行うには何が必要かを想像できます...

TLDR;テキストの行はおそらく70〜80文字を超えてはならず、流動的なレイアウトは努力/コストに見合わない場合があります。

0
Tom

それはすべてウェブサイトに依存します。より高い解像度設定で「引き伸ばされた」ように見えなくてもレイアウトが見事に維持されるように、「推奨/最小」解像度として表示されるものもあれば、純粋な美学のためのものもあります。

約6年前の「今月の味」とは、中央に列だけがあり、両側に空白/グラデーションの大きな境界線があったWebサイトでした。

0
Deco

それは複数の解像度のためです。ページ全体を使用する場合は、解像度(Gmailなど)に基づいてコンテンツのサイズを変更する必要がありますが、どの状況でも可能ではありません。それがWebサイトに固定幅を使用する理由です

0