固定幅と動的幅


15

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

回答:


11

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

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

もちろん、スペースが限られているサイト(Google DocsやGoogle Mapsなど)がある場合、利用可能なスペースをすべて使用するために、可変幅スキームを使用したいと考えています。


1
テキストの読み取り幅ポイントに+1。モニターの幅が1680pxであるかどうかは関係ありません。新聞がページ幅全体にテキストを表示することはありません。
もう1人が

8

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

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

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


可変レイアウトでは機能しない機能の例を教えてください。
BenV

3
可変レイアウトでは機能が動作しないということではありません。ページのチャンクが相互に移動する方法を管理する必要があるため、可変幅レイアウトのテストと開発により多くの時間を費やす必要があります。
ベンホフマン

ああ、私はあなたの最後の文を誤解しました。今、私は分かる。
BenV

一部の可変レイアウトの問題の1つは、メインコンテンツに最小幅が設定されていないことです。そのため、ウィンドウが狭すぎると、テキストが非常に狭い列に押しつぶされ、読みにくくなります。固定幅レイアウトには、max-widthではなく幅をハードコーディングし、水平スクロールなしではメインテキストを読み取れない場合、逆の問題があります。
マリウスゲドミナス

3

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

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


1

その選択をする必要はないかもしれません。List Apartには、レスポンシブデザインに関する優れた記事があります。主なアイデアは、メディアクエリを使用して、ブラウザーウィンドウまたはビューポートサイズの変更をキャッチし、必要に応じてCSSを再割り当てできることです。読むべきことがたくさんあるので、すべてのジューシーな詳細については記事をチェックしください。しかし、で長いとそれの短い(またはそれはそれで「ワイドとナロー」である必要があります?)一見のための前後の彼らの例のページ。あなたが作る場合はきれいにポイントへページのスケールは、それはそれは少し不格好を取得し、十分狭めます。後に ページも同様に拡大縮小しますが、拡大縮小がうまく機能しないように狭くしすぎるとレイアウトも変更されます。


1

Jakob Nielsenホームページのユーザビリティに関する113の設計ガイドラインによると:

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

また、トップ10違反のホームページ設計ガイドラインの 1つでもあります。

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


0

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

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

0

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.