流動的なレイアウトがオプションではないと仮定すると (それはまったく別の議論であるため)、サイト レイアウトの推奨される幅はどれくらいですか? 異なるサイズの長所と短所は何ですか?
10 に答える
960px
で表示できるように常に維持しており1024x768
、2、3、4、5、6、8、10、12、15、16、20、24、30、32、40、48、60、 64、80、96、120、160、192、240、320、および480 ...したがって、サイトのデザインを(3分の1の規則を使用して)きれいに分割できます。
数年後に編集:流動的なレイアウトを使用できない場合は、CSSメディアクエリを 使用して、コンテンツを無数のデバイスに応答できるようにすることを検討してください。2012年にそれらすべてを支配するために1ピクセル幅を主張できるかどうかはわかりません。
ユーザーが現在使用している画面解像度に関する簡単な統計については、http://browsersize.comをご覧ください。http://setmy.browsersize.comを使用すると、ブラウザのサイズをすばやく変更して、特定の画面解像度でのWebサイトの表示をエミュレートできます。レイアウトが少なくとも最も広く使用されている画面解像度(1024 x 768)を満たしていることを確認してください。
また、必ずしも最大の水平方向のスペースを占めることを目的としないでください。テキストの幅(1行あたりの単語数)は、理想的には使いやすさの特定のしきい値を超えてはなりません。
非常に一般的な1024×768の画面解像度では、ほとんどの固定レイアウトWebサイトは、コンテンツの左右にあるすべての使用可能なスペースを使用しません。柔軟なレイアウトは水平方向のスペースをより有効に活用しますが、使用可能な行の長さを維持するのに苦労します。ユーザビリティの専門家は、一列に並べるべき単語が非常に多いと言っています。8〜12語が理想的な行の長さのようです。印刷媒体、特に新聞は、さらに短い行を使用することを躊躇しません。なんで?できるので、複数の列にテキストを配置することによって。
ここで動議を分割することに投票します。画面サイズが X であるからといって、X またはそれに近いものが Web サイトに最適なデザインであるとは限りません。
ウェブサイトの目的は、選択する幅に大きく関係しています。
多くのマーケティング専門家は、より狭い列がより多くの訪問を売り上げに「変換」すると考えています。これは、ページが狭い方が人の注意を引きやすいからかもしれません。
一方、画像専用のサイトは、アクセスするブラウザーごとに最適な解像度で表示する必要があります。
統計でよく引用されるモニターの解像度は、ブラウザー ウィンドウの内側の幅と必ずしも同じではないことに注意してください。ユーザーは追加のサイドバー/ツールバーを持っている場合があり、最大化されていないブラウザー ウィンドウを使用します。画面が大きくなればなるほど、1 ページだけですべてを使用する可能性は低くなります。
非常に長い行のテキストは読みにくくなります。最適値は 25 ~ 30em です (多くの要因によって異なりますが、単純に最大値を求める必要はありません)。
モバイルブラウザには、ズームに使用する「仮想」画面解像度があり、Opera Mini/Mobile および Mobile Safari では最大 960px です。
サイトにアクセスする可能性のある最小の画面よりも幅が広い固定幅を使用すると、残りのコンテンツにアクセスするために横にスクロールしなければならないユーザーを苛立たせ、イライラさせます。
かつてはそうでした800px
。しかし、ますます多くのサイトが を使用し始めています1000px
。これは、多くの場合、訪問者のローエンドの解像度が1024x768
. 追加の 24 ピクセルにより、ブラウザのクロム、パディング、マージンなどを操作するための余地が残されます。
ある程度の見通しを示すために、小さな画面のネットブックの新しい波でさえ、解像度は1024x768
.
しかし、何よりも、@warren が示唆するようにオーディエンスを知り、それを利用してください。
また、クライアントが特に要求しない限り、950 から 980 ピクセルのレイアウトを使用し、常に中央に配置します :)
複数のレイアウトを開発し、Javascript を使用して、訪問者の window.innerWidth に応じてレイアウトを切り替えることができます。
とはいえ、私は通常 950px から 980px の間のものを使用します。
デスクトップとラップトップに関連する場合、最適なパフォーマンスとクロスモニターの互換性のための Web サイトの最大幅は 960px です。
方法と理由の詳細については、次の記事を参照してください。
これらの統計によると、幅1024ピクセル以上でほとんどのユーザーをカバーできます。