web-dev-qa-db-ja.com

固定幅と動的幅

ブラウザのサイズを変更するとページのコンポーネントが「縮小」する柔軟なレイアウトではなく、ブラウザウィンドウのサイズを変更するとスクロールバーが表示される固定幅レイアウトになっているサイトが増えていることに気付きました。
このようなStackExchangeサイトは、固定レイアウトの例です。 GMailとiGoogleは、柔軟なレイアウトの例です。どちらか一方を選択する理由は何ですか？

website-design
15
BenV

可変幅レイアウトでは、より複雑な設計を実現するのは非常に困難です。それが役割を果たしていると思います。

また、非常に幅の広いテキストを読むのは快適ではないという事実もあります。 StackExchangeサイトの列サイズは非常に管理しやすく、読みやすいです。可変幅レイアウトを使用すると、判読不能にならずに本文全体を広げることはできません。 Googleでさえ、検索結果の幅を制限しています。

もちろん、スペースが限られているサイト（Google DocsやGoogle Mapsなど）がある場合は、可変幅スキームを使用して、利用可能なすべてのスペースを使用する必要があります。

11
Kris

Fixed withは、複雑なサイトの開発者にとってはるかに簡単です。また、ほとんどの固定幅サイトの幅は約1000ピクセルです。その理由は、ブラウザーの1％のみが800x640を使用し、0％が640x480を使用しているためです。最新の統計を確認してください こちら 。ただし、これにはモバイルは含まれません。これはまったく異なる球技です。

可変幅レイアウトの価値は、最大化されていないウィンドウでWebサイトを簡単に使用できることです。

視聴者を見て、彼らが望むと思う経験に基づいて決定し、可変幅を行う必要がある場合に開発できない他の機能よりも可変幅が重要かどうかを判断する必要があります。

8
Ben Hoffman

（CSSを使用して）最小幅と最大幅を設定し、残りの部分を2つの両極端の間に流すためにパーセント幅を使用する2つの間の妥協点もあります。たとえば、左側のメニュー列を200ピクセルより狭くせずに、メインコンテンツをフローさせたい場合があります。この手法により、極端に高い解像度や極端に低い解像度で愚かに見えることなく、サイトを訪問者の解像度に合わせてスケーリングできます。結局のところ、HTMLは流れるように設計されています-HTMLはマークアップ言語であり、印刷とは異なります。

このアプローチは、ブログや大量のテキスト情報を提示するような比較的単純なデザインに適しています。確かに、私は自分でそれを使用します 個人のウェブサイト 。結局、多くの人がワイドスクリーンまたは高解像度のモニターを持っています-私の仕事用モニターは1680px幅です-デザイナーが自分に合った固定幅を決めたという理由だけで、なぜ彼らは大きな不動産を失い、水平にスクロールしなければならないのですか？画面？結局のところ、良いデザインとは、ユーザーに可能な限り最高のエクスペリエンスを提供することです。それは、デザイナーのモニターで「きれい」に見えるものだけではありません。

3
Dan Diplo

Jakob Nielsen の ホームページのユーザビリティのための113設計ガイドライン ：

67液体レイアウトを使用して、ホームページのサイズが異なる画面解像度に調整されるようにします。

また、 The 10 Most Most Violated Homepage Design Guidelines の1つでもあります。

固定レイアウトとの戦いは負けた戦いのように見えますが、繰り返す価値はあります。ユーザーごとにモニターサイズが異なります。大きなモニターを持つ人々は、ブラウザーのサイズを変更して複数のウィンドウを同時に表示できるようにしたいと考えています。全員のウィンドウ幅が800ピクセルであると想定することはできません。一部のユーザーには大きすぎ、他のユーザーには小さすぎます。

1
melhosseiny

その選択をする必要はないかもしれません。 A List Apart には優れた レスポンシブデザインに関する記事 があります。主なアイデアは、ブラウザウィンドウまたはビューポートサイズの変更をキャッチし、必要に応じてCSSを再割り当てするために、 メディアクエリ を使用できることです。そこには多くの読み物があるので、すべてのジューシーな詳細について the article をチェックしてください。しかし、その長短については（またはそれが「幅広」か「狭幅」か）、その例の before および after ページを見てください。 before ページはポイントまでうまく拡大されますが、十分に狭くすると少し不格好になります。 after ページは同様に拡大縮小されますが、拡大縮小がうまく機能しないように狭くしすぎるとレイアウトも変更されます。

1
Alan

混乱はどうですか？これにより、十分なスペースがある場合は＃content-sectionが固定幅（70em）で表示されます。それ以外の場合、セクションはビューポート/ブラウザウィンドウの80％に縮小されます。

#content {
    margin: 0 auto 2em 0;
    width: 70em;
    max-width: 80%; }
0
feeela

動的レイアウトの利点は、モバイルデバイスを含むすべての画面サイズで機能することです。ただし、これらすべてのサイズで見栄えを良くするのは難しい作業です。質問は次のとおりです-あなたの訪問者はモバイルデバイスを使用するつもりですか？

0
paulmorriss