Webサイトの場合、可変幅レイアウトと固定幅レイアウトのどちらが良いですか？
画面解像度が異なるため、ウェブサイトを閲覧するユーザーエクスペリエンスは異なる場合があります。固定幅でウェブサイトをレイアウトする方が良いですか？ （もしそうなら、標準解像度には異なる静的幅があるべきですか？）それとも、ウェブサイトは常に可変幅でレイアウトされるべきですか？
簡単な答えはここにはないと思います。結局のところ、それはあなたが何を構築しているのか、誰のために構築しているのかに依存するからです。固定幅サイトと可変幅サイトには、それぞれ長所と短所があります。
ここで指摘しておきたいのは、固定サイトと流動サイトのモバイルエクスペリエンスについては触れません。モバイルサイトは、デスクトップサイトをモバイルプラットフォームに移植するのではなく、モバイルデバイスに固有のデザインが最適です。
固定幅-利点
固定幅サイトは、より一貫したエクスペリエンスであり、可変幅サイトよりも開発が高速です。また、幅、線の長さ、タイポグラフィサイズなどのハードな値を設定できるため、デザイナーがプレゼンテーションをより詳細に制御できるようになります。可変幅のサイトよりも最終的に管理が簡単です。
固定幅-欠点
一方、固定幅デザインは、エッジケースが表示されると失敗し始めます。現在、1024px幅の解像度のモニター用にサイトを設計することは非常に一般的ですが、低解像度のマシンを使用している人もいます。現在、960pxグリッドを使用して設計されたアプリケーションに取り組んでいます。今日の分析を見てみると、ユーザーの3％が800 x 600のモニターを使用しており、合計で約5％が1024 x 768未満の解像度を使用していることに気付きました。これらのユーザーは、サイトの幅が固定されているため、かなり悪い体験をしているでしょう。 。
流体幅-利点
流体の幅により、ユーザーの設定に基づいてデザインを拡張できます。デザインはそれらに適応します。これは良いことです。これにより、サイトは比例したネガティブスペースを維持できるので、サイトが雑然としたり、開きすぎたりすることはありません（そのように特別に設計されていない限り）。
流体の幅-欠点
残念ながら、流動的な幅の設計はEdgeケースにも影響を受けません。幅が細くなりすぎたり、幅が広すぎたりすると、特にテキストの場合、悪いことが起こります。短すぎたり長すぎたりする行の長さは、本質的に判読できません。さらに、画像やFlashオブジェクトなど、多くの形式のメディアは、流体幅の設計でスケーリングすることが困難です。 IE画像のサイズを変更するにはJavaScriptが必要です。そうしないと、画像がピクセル化されます。
レスポンシブWebデザイン
一部の人々は例を示しましたが、まだこの手法を名前で言及していません。 Ethan Marcotteは最近、ユーザーの画面解像度に基づいて完全に変更できる流動的なレイアウトを説明する用語を作り出しました（詳細は こちら を参照）。これは固定幅と流動幅のハイブリッドです。メディアやラインの長さが制御不能にならないように最小値と最大値を設定でき、デザインをユーザーの設定に合わせて調整することもできます。もちろん、この手法にも独自の利点と欠点があります。ユーザーの設定用に特別に選択されたレイアウトが提供されていますが、このタイプのサイトは開発が困難です。すべてのブラウザがこれを行うために必要なメディアクエリをサポートしているわけではありません。さらに、基本的には複数のレイアウトを開発し、構築と維持にかかる時間を延長します。
「これを常に使用する」または「これを使用しない」という毛布を単にレイアウトすることは不可能だと思います。決定を下す前に、常に自分のニーズを評価すべきだと思います。ほとんどの場合、固定幅のレイアウトが目的を果たしますが、流動的またはレスポンシブなレイアウトは、非常に難しいという犠牲を払って、はるかに優れたユーザーエクスペリエンスを提供できると感じています。
100％の可変幅を使用する場合の問題は、最小および最大の画面を持つユーザーには実際にうまく表示されないことです。私は通常、最小/最大幅を設定することにより、標準のメインコンテンツセクションを設計し、次に重要な（固定）コンテンツを中央に配置します。次に、画面全体に拡大/縮小する可変幅のデザイン要素（重要ではないため）を設定できます。
このようにして、多くの解像度で見栄えが良い一方で、重要な情報は常に（うまくいけば）正しく表示されます。
私はウェブデザイナーではありませんが、流動的なレイアウトにするのが理想的です。つまり、現在の幅に応じて自動的に（そして動的に）変化するレイアウト。そうすることで、電話などの幅の狭いデバイスだけでなく、さまざまなディスプレイ幅もすべてサポートされます。
ブログの投稿 最後に、流動性のあるHicksdesign は、このテクニックを説明し、実証しています。 3つの列、2つの列、1つの列のレイアウトがあり、ブラウザウィンドウの幅に応じて選択されます。
行の長さが長くなりすぎると、テキストが読みにくくなります。したがって、可変幅のサイトでは、読みやすさを維持するために、テキスト領域の少なくとも最大幅が必要です。
可変幅のサイトの見栄えを良くするのはかなり難しいです。
作業内容にもよりますが、固定幅のサイトに傾く傾向があります。その理由は、UIをより適切に制御し、画面サイズ全体で一貫性を保つことができるためです。流体幅の多いサイトの多くは、モニターの設計に応じて、モニターのサイズが大きくても小さくてもひどく見えます。
私の一般的なルール：
- サイトの使いやすさがインターフェイスに大きく依存している場合、および/またはコンテンツがほとんどテキストの場合：固定幅
- サイトのインターフェースは最小限であるが、コンテンツが主に視覚的である場合（たとえば、写真サイトやマップアプリなど）、流動性を追求します。
ここにいくつかの長所/短所の大きな内訳があります： http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one- for-you /
可能な限り、オブジェクトの特定の高さと幅をpxではなく%に設定するようにしています
可変幅を考慮に入れるか、より広い画面に別のレイアウトを提供することをお勧めします。
固定幅を使用する場合は、それが小さなものではないことを確認してください！イエローページをスキャンするようなサイトの読み取りを可能にする、幅が500または600ピクセルのサイトをいくつか見ました。
私は長い間、利用可能な幅に基づいて代替のレイアウトを提供するThe Man In Blueのアプローチのファンでした： こちらのライブデモを参照
landscapeの向きでWebサイトのレイアウトを設計することができます。 1920x1080（これが最も一般的）の大きな解像度で、ますますワイドスクリーンモニターが使用されています。その上に縦長の固定レイアウトを表示するブラウザーウィンドウを最大化しようとしたことがありますか？これは、画面の半分から3分の2が背景の色や画像で満たされたようなものです。
Windows 7では、ウィンドウのサイズをすばやく画面の半分に変更して、横に固定できるのが便利です。 WindowsKey + Left/Right
固定幅の場合、ウェブサイトがモニターには小さすぎると考える人もいれば、モニターには大きすぎると考える人もいるので、可変幅が適切な方法です。
それはウェブサイトの内容に依存します。大量のテキストがある場合、テキストを広げることができ、ユーザーがより効率的に読むことができるため、可変幅の方が理にかなっています。外観が重要なマーケティングWebサイトのような場合は、固定幅のWebサイトを美しく見せるのが非常に難しいため、固定幅を使用してください。
固定サイズのレイアウトを設計する際に想定することは、一部のユーザーにとって間違っています。誰もが満足できるエクスペリエンスを提供する唯一の方法は、柔軟で応答性の高いデザインを使用することです。
2つの問題（重複を避けるための試み）：
ブラウザーがフルスクリーンであるとは限りません。画面解像度を報告する分析は、ストーリーの一部のみを伝えます。
ユーザーが同じフォントサイズを使用しているとは限りません。フォントサイズで読み取るには幅が広すぎる行は、フォントサイズを数ノッチ大きくする必要がある人にとっては、幅が広すぎて読み取れない場合があります。逆に、フォントの設定に基づいて固定幅を設定した列は、ユーザーが1行に5ワード程度表示することを意味する場合があります。
すべてのユーザーが使用できるようにするには、Webデザインでブラウザーが提供するすべてのスペースを使用する必要があります。ユーザーが自分のエクスペリエンスを最適化するためにブラウザーのサイズを変更したことをユーザーに信頼してください。その後、それらの範囲内で作業する必要があります。このアプローチは、30インチモニターと7インチタブレット（およびモバイル専用バージョンを作成しなかった場合は電話）でも機能します。