Webページのレイアウトは、2つの異なる方法で行うことができます。
- 固定幅レイアウト - ページ全体の幅が特定の数値で設定されているレイアウトです。
- Liquid Layouts - 閲覧者のブラウザの幅に応じて、ページ全体の幅が柔軟なレイアウトです。
両方のレイアウト方法を使用するのには良い理由がありますが、各方法の相対的な利点と欠点の両方を理解していないと、Webページに使用する方法を決めることができません。
固定幅のレイアウト
固定レイアウトは、Webデザイナーが決定した特定のサイズで始まるレイアウトです。ページを表示するブラウザウィンドウのサイズに関係なく、その幅は変わりません。固定幅のレイアウトにより、デザイナーはほとんどの状況でページがどのように見えるかをより直接的に制御できます。デザイナーはレイアウトを細かく調整し、ブラウザやコンピュータ間で一貫性を保つことができるため、印刷された背景を持つデザイナーに好まれることがよくあります。
液体レイアウト
液体レイアウトは、現在のブラウザウィンドウのサイズのパーセンテージに基づいたレイアウトです。現在の視聴者がサイトを見ているときにブラウザのサイズを変更しても、ウィンドウのサイズに合わせて柔軟になります。液体幅のレイアウトにより、任意のWebブラウザウィンドウまたは画面解像度によって提供されるスペースを非常に効率的に使用できます。彼らは、ページを見ている人に関係なく、サイズと相対的なページの重みが一定しているので、できるだけスペースを少なくするために多くの情報を持っているデザイナーに好まれることがよくあります。
ステークには何がありますか？
あなたのウェブサイトデザインのために選ばれた方法はあなたのデザインだけでなく、あなたのサイトの応答性と適応性にも影響します。あなたが選択した内容に応じて、あなたのテキストをスキャンしたり、探しているものを見つけたり、時にはサイトを使うことさえできる、読者の能力に影響を与えます。また、レイアウトスタイルは、ブランディング、不動産の可用性、サイトの美しさを通じたウェブサイトのマーケティング活動にも影響します。
固定幅レイアウトの利点
- 固定幅のレイアウトでは、誰が見ているかにかかわらず同一に見えるページを作成することができます。
- イメージなどの固定幅の要素は、ページ全体の幅にこれらの要素が含まれるため、小さいモニタでテキストを圧倒しません。
- Webブラウザがどれほど広くても、スキャンの長さはテキストの大きな部分に影響されません。
液体レイアウトのメリット
- 液体幅のレイアウトは、使用可能なスペースを満たすために拡大または縮小します。
- 使用可能なすべての不動産が使用され、デザイナーはより大きなコンテンツをより大きなモニターに表示できますが、より小さなディスプレイでは実行可能なままです。
- リキッドレイアウトは相対幅の一貫性を提供し、ページがより大きなフォントサイズのような顧客が課した制限に動的に対応することを可能にします。
固定幅レイアウトの欠点
- 固定幅のレイアウトは、小さなブラウザウィンドウで水平スクロールを引き起こす可能性があります。そして、ほとんどの人は水平にスクロールしたくない。
- また、大型モニターでは空白が広がり、使用されていないスペースが多くなり、垂直方向にスクロールする必要が生じる場合があります。
- 固定幅のレイアウトでは、フォントサイズに対する顧客の変更をうまく処理できません。フォントサイズを少し増やしても問題ありませんが、大きくするとレイアウトが損なわれる可能性があります。
液体レイアウトの欠点
- 液体のレイアウトは、ページの様々な要素の幅を正確に制御することを可能にする。
- その結果、テキストの幅が広すぎて快適にスキャンできないか、小さすぎるブラウザでは単語がはっきりと表示されないことがあります。
- 液体レイアウトは、画像などの固定幅要素が液体カラム内に配置されているときに問題を抱える可能性があります。イメージに十分なスペースがない状態で列がレンダリングされると、デザイナの指示を無視して列幅が増加するブラウザがありますが、他のブラウザではテキストとイメージが重なって正しい割合になります。
結論
可能な限り少ないスペースで情報を伝える必要のある多くのサイトでは、液体レイアウトでうまくいくでしょう。これにより、大型モニタが提供するすべての不動産を活用しながら、より小さなディスプレイを短絡させることなく利用することができます。
すべての状況でページがどのように見えるかを正確に制御する必要のあるサイトでは、固定幅のレイアウトを使用すると効果的です。これにより、閲覧しているサイズのモニターに関係なく、Webサイトのブランディングが一貫して明確になります。
レイアウト設定
多くの人が混在したアプローチを好みます。彼らはテキストの大規模なブロックに液体レイアウトを使用するのが好きではありません。そうすれば、小さなモニタではテキストを読むことができないし、大きなものではテキストを読み取れなくなる可能性があります。したがって、ページのメイン列を固定幅にする傾向がありますが、ヘッダー、フッター、およびサイド列を柔軟にして、残りの不動産を占有し、大規模なブラウザーの容量を失うことはありません。
一部のサイトではスクリプトを使用してブラウザウィンドウのサイズを決定し、それに応じて表示要素を変更します。たとえば、非常に広いウィンドウでそのようなサイトを開くと、左側にリンクの列が追加され、小さなモニターの顧客には表示されないことがあります。また、広告を囲むテキストの折り返しは、ブラウザウィンドウの幅にも依存します。十分な幅がある場合、サイトはテキストを囲みます。そうでない場合、広告の下に記事のテキストが表示されます。ほとんどのサイトではこのレベルの複雑さは必要ありませんが、小さな画面での表示に影響を与えることなく、大きな画面を活用する方法を示しています。
