最近Webサイトが設計されている「最も一般的な」幅と高さはどれですか。


9

私はグループプロジェクトに取り組んでおり、同僚にオンラインアプリケーションのビジョンに関する図面を提出してもらおうとしています。このアプリケーションはPC経由で表示されます。業界標準はないのではないかと思いますが、固定幅レイアウトのサイトには一般的なアプローチが必要だと私は確信しています。業界で最も一般的なプロポーションの感覚を知る必要があります。

このプロトタイプは単純なままにするため、ブラウザーや画面幅などは検出されません。そのため、簡単な答えが得られることを期待して、簡単な方法でこれを尋ねると思いました。

Webページが最近設計されている「最も一般的な」幅と高さは何ですか。図面を基にして特定の比率の比率を選択した理由を同僚に伝えたときに、出典を特定できれば非常に役立ちます。

私がこの質問をした方法に注意してください:

  • 最も一般的な画面解像度は求めていません。
  • 私は最も一般的なブラウザを求めていません。

固定サイズのレイアウトに関して、ほとんどのWebサイトが選択している寸法を知りたい。人々は通常スクロールするので、高さが「標準」の一部ではないかもしれないことを知っています。その場合は、最も一般的な幅で十分です。

回答:


9

あなたが言ったように、それは非常に流動的であるので、標準の高さはありません。デザインを最もよく視覚化するのに役立つものを使用してください。

幅が960ピクセルの場合、固定幅デザインの現在の「標準」のようです。ウェブサイトがその幅でレイアウトを探索することに専念していること十分に一般的です。

(私はあなたが流動的なデザインを使用することについて誰かが怒りたくないと思いますか?)


3

設定すべき標準の幅は実際にはありません。1024x768のモニターを使用する人の数は過去数年間で大幅に減少しているため、960の幅はそれほど重要ではありません。非常に多くの新しいデバイス(スマートフォン、タブレット、ラップトップおよびデスクトップ)の登場により、ケースごとに多数のスタイルシートを作成する必要があります。

CSSメディアクエリを使用すると、ユーザーの画面解像度に基づいてスタイルを変更できます。私は、すべての視覚的スタイルを処理する一般的なスタイルシートを使用してサイトを作成し、モバイル、タブレット、標準デスクトップ/ラップトップ、およびページを構成する超ワイドスクリーン用に個別のサイトを作成する傾向があります。

いくつかの例については、W3.orgのこのページを確認してください-http ://www.w3.org/TR/css3-mediaqueries/

これは手間がかかりますが、ユーザーがサイトをブラウザするために何を使用しても、可能な限り最高のエクスペリエンスを得ることができます。


1

@ジョン・コンデが言ったこと。それに加えて、ターゲットオーディエンスが誰であるかを考慮に入れる必要があります。たとえば、私のウェブサイトがテクノロジーブログまたはガジェットブログである場合、ターゲットユーザーが通常のユーザーよりもテクノロジーに精通している可能性が高いため、1200ピクセル以上の幅のレイアウトで撮影できます。または、ウェブマスター向けのサイト/ブログ/フォーラムに重点を置いている場合は、もう少し幅を広げます。

1日の終わりに、あなたの集団の人口統計を把握し、最終的にそれらのために何がうまくいくかに従ってください。

覚えておくべき非常に重要な2つのこと...

1)デザインが900+ pxで動作する場合、人口統計がそれを許容できる場合でも1200+ pxに拡大する理由はありません。

2)ターゲットの解像度を持たない可能性のあるユーザーに対応できる適切な構造があることを確認します。


ポイント#2に同意しません。1366pxの幅のディスプレイでは、おそらく過去数年間に販売されたほとんどのラップトップで最も一般的な幅であるため、2つの900pxウィンドウを隣り合わせにして同時に両方を表示することはできません。ただし、900pxのレイアウトが1つしかない場合は、水平スペースの34%が空白で無駄になっています。その場合、1200pxが理想的な幅になります。そうです、そこにある、それを伸ばす理由は。
nhinkle

@nhinkle:ポイント2を実際に読んだとは思いません。2。900pxのウィンドウを2つ並べることで、応答はどうなりますか さらに、ジョンRが求めていることを理解するために、質問を適切に読んでください。これは、次のような極端なユースケースについての議論ではありませんあなたが隣同士に2つの900pxの窓を持っているしたいか、私の場合には、設計を行うために1600pxモニター(それらの2)を望みます。むしろそれは、あなたや私のではないユーザーの大半についてです...
アディル

申し訳ありませんが、2つ目ではなく1つ目のポイントに返信するつもりでした。ご迷惑をおかけして申し訳ございません。しかし、私の主張は今も変わりません。大多数のユーザーは、900pxのレイアウトが多くのスペースを浪費しているほど広いディスプレイを持っています。あなたの答えであなたが言ったことのほとんどに同意しますが、あなたの最初の「心に留めておくべきこと」は実際には当てはまりません。ユーザー層に1200ピクセルの余裕がある場合は、その1200ピクセルを使用する必要があります。そうしないと、300ピクセルが無駄になります。
nhinkle 2011年

@nhinkle:あなたは私のポイント#1を誤解しています。私のデザインが900px以内でサイトを簡単に表示できる場合、なぜ1200pxに拡大するのですか?また、ユーザーの13%は画面解像度が1024x768のままです。Grantedthatは少数ですが、十分に大きいため、不快になり、売り上げ、広告のクリック、見込み客などのビジネスモデルが失われます...(引用データ:w3schools .com / browsers / browsers_display.asp
Adil

私はあなたの要点を理解します。私のポイントは、ユーザー全体で1200px幅のレイアウトを使用するのに十分な広さの画面がある場合は、そうする必要があるということです。たとえば、スタック交換サイトは約1000ピクセル幅に最適化されていますが、多くのユーザーが投稿ソースとマークダウンプレビューを並べて表示するオプションをリクエストしました。w3schoolsはWebユーザーの代表的なサンプルではありませんが、それとは別に、この議論は1200がデザインに適合すれば論理的であるサイトに関するものでした。
nhinkle
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.