ほとんどのデザイナーがWebページを作成する際にまず考慮すべきことは、どのような解像度を設計するかです。 これが実際にどの程度のものになるかは、デザインの幅を決めることです。 標準的なウェブサイトの幅としては、このようなものはもうありません。
解決策を検討する理由
1995年には、標準の640x480解像度のモニターが利用可能な最大かつ最高のモニターでした。 これは、Webデザイナーが、その解像度で12インチから14インチのモニターで最大化されたWebブラウザーで見栄えのよいページを作成することに重点を置いたことを意味していました。
最近の640x480解像度は、ほとんどのウェブサイトのトラフィックの1％未満を占めています。 人々は、1366x768,1600x900、および5120x2880など、はるかに高い解像度でコンピュータを使用します。 多くの場合、1366x768解像度のスクリーンを設計することができます。
私たちは、ウェブデザインの歴史の中で、我々が決断についてあまり心配する必要はないと考えています。 ほとんどの人は、大型のワイドスクリーンモニターを備えており、ブラウザウィンドウを最大化しません。 したがって、1366ピクセル以下のページをデザインすることに決めた場合、高解像度の大型モニターでもほとんどのブラウザウィンドウでページが正常に表示されるようになります。
ブラウザの幅
「大丈夫、私は1366ピクセル幅のページを作っていきます」と思う前に、この話にはもっと多くのことがあります。 ウェブページの幅を決めるときに、しばしば見落とされる問題は、顧客がブラウザをどれくらい保持しているかということです。 具体的には、フルスクリーンのサイズでブラウザを最大化するのか、それともフルスクリーンより小さくするのでしょうか？
企業標準の1024x768解像度のラップトップを使用していた同僚の非公式調査の1つでは、2社がすべてのアプリケーションを最大化しました。 残りはさまざまな理由で異なるサイズの窓が開いていました。 これは、この会社のイントラネットを幅1024ピクセルで設計する場合、85％のユーザーがページ全体を見るために水平方向にスクロールする必要があることを示しています。
最大限に活用するかしないかを考慮した後、ブラウザの境界線について考える。 すべてのWebブラウザには、800x600解像度では約800ピクセルから約740ピクセル、1024x768解像度では最大化されたウィンドウでは約980ピクセルの空き領域が縮小されるスクロールバーと境界線があります。 これはブラウザの "chrome"と呼ばれ、ページデザインのために使用可能な領域を奪うことができます。
固定または液体幅のページ
実際の数値幅は、ウェブサイトの幅を設計する際に考慮する必要がある唯一のものではありません。 また、 固定幅や液体幅を決定する必要があります。 つまり、幅を特定の数値（固定）または割合（液体）に設定しますか？
固定幅
固定幅のページは、それらが鳴るのとまったく同じです。 幅は特定の数値に固定されており、ブラウザーの大きさや大きさに関係なく変更されません。 これは、読者のブラウザの幅や幅にかかわらず、まったく同じように見えるように設計する必要がある場合には適していますが、この方法では読者を考慮しません。 あなたのデザインよりも狭いブラウザを使っている人は水平にスクロールする必要があり、ブラウザが広い人は画面上に大きな空きスペースがあります。
固定幅ページを作成するには、ページ区画の幅に特定のピクセル番号を使用します。
液体幅
液体幅ページ（フレキシブル幅ページとも呼ばれます）は、ブラウザウィンドウの幅に応じて幅が異なります。 これにより、顧客に焦点を当てたページをデザインすることができます。 液体の幅のページの問題は、読みにくいことです。 テキスト行のスキャン長が10〜12ワードよりも長く、または4〜5ワードよりも短い場合は、読みにくい場合があります。 これは、ブラウザウィンドウのサイズが大きいまたは大きい読者には問題があることを意味します。
柔軟な幅のページを作成するには、ページ区画の幅にパーセンテージまたはemを使用します。 CSSのmax-widthプロパティについても理解しておく必要があります。 このプロパティを使用すると、幅をパーセンテージで設定できますが、人間が読むことができないほど大きくならないように制限します。
勝者は：CSSメディアクエリ
現時点で最善の解決策は、CSSメディアクエリとレスポンシブデザインを使用して、ブラウザを見ているブラウザの幅に合わせてページを作成することです。 レスポンシブウェブデザインでは、同じコンテンツを使用して、幅5120ピクセルまたは幅320ピクセルのいずれで表示するかに関係なく動作するWebページを作成します。 異なるサイズのページは異なって見えますが、同じ内容を含んでいます。 CSS3のメディアクエリでは、各受信デバイスはそのサイズでクエリに応答し、スタイルシートはその特定のサイズに調整されます。