web-dev-qa-db-ja.com

Webサイトのコンテンツ領域の現在のピクセル幅の標準は何ですか?

以前は960ピクセルだったのはわかっていますが、最近、クライアントにエンベロープをさらにプッシュしてもらいたいとの要望があり、この問題についていくつかの調査を行うように促されました。

17
Sam Thomas

前述のとおり、正解はレスポンシブデザインです。いくつか見てください。

http://framelessgrid.com/ (存在しなくなりました キャッシュバージョン インターネットアーカイブから)

http://Twitter.github.com/bootstrap/

http://www.getskeleton.com/

レスポンシブデザインは、使用可能な画面サイズに合わせて調整されるため機能します。そのため、ウェブサイトやウェブアプリを設計するときに、携帯電話、タブレット、ラップトップ、デスクトップを使用するときに適切に表示されることを確認できます。

エコシステムが過去にどのように見えるかを確認することは依然として重要です。 Google Analyticsを使用している場合は、昨年の訪問者の価値を見て、画面サイズで並べ替えます。これにより、ユーザー画面の寸法と、寸法の変更がそれらにどのように影響するかがわかります。

14

レスポンシブは、画面サイズが小さい場合や、携帯電話やタブレットのディスプレイに対応する場合に最適です。しかし、960(またはそれ以上)を超えることが必死に重要であると私は確信していません。

たとえば、私が使用しているセットアップは27インチディスプレイとラップトップのパネルであり、それでも幅広のレイアウトはイライラします。その理由はいくつかあります。

  1. 大きなディスプレイを購入するのではなく、1つのWebサイトを表示するだけです。 2つ(またはそれ以上)を並べて表示/操作できるように購入しました。それが大きなディスプレイのポイントであり、物事をより速く切り替えることができるため、生産性が向上します。これは、大型ディスプレイを使用している人にとってはごく普通のことです。

  2. ほとんどのウェブサイトはそれほど広くありません。私はブラウザーでタブを使用しているので、通常はcmd-Tで新しいタブを開き、検索またはURLを入力するだけで完了です。サイトの幅が異常に広い場合は、ブラウザのサイズも変更する必要があります。画面上に他のウィンドウがあることを考えると、基本的に自分のワークスペースを再配置する必要があり、面倒です。これは私の個人的なスタイルなので、一般化しないかもしれません。

  3. 実際のコンテンツが広すぎると、行の長さが長くなり、読みにくくなります。 30-40emsはテキストの適切な幅のように見えますが、標準のフォントサイズで約650pxを超えることはありません。 (読みやすくするために私が推奨する、より大きなフォントを使用する場合は、40ではなく30emを使用する傾向があります)。それでも、サイドナビゲーションまたは補助コンテンツの幅が与えられます。長い行は読みにくくなることがよく知られています。

もちろん、より広いディスプレイ向けのレスポンシブデザインを構築することもできますが、頻繁に見られるとは思いません。そして、私はあなたが960pxかそこらでデザインポイントを持っていることを絶対に確かめます。

要約すると、960を超えるというケースは説得力がありません。私がクライアントだったとしても、他の場所でお金を使うことになります。

8
Peter Bagnall

レスポンシブは素晴らしいですが、時間がかかります。私は960に固執し(私は970グリッドのファンですが)、その理由を説明します。利点について説明すると、おそらくそれが理にかなっていることに気付くでしょう。

または、応答が必要であることを顧客に納得させ、追加の作業を行い、追加の請求可能な時間を請求します(また、より複雑な作業であるため、より高い時間料金を請求します):D

3
Bryan Robinson

基準はありません。人々はこれまで以上に幅広いデバイスと画面幅でWebにアクセスしています。スマートフォン、タブレット、ミニタブレット、ノートブック、ラップトップ、デスクトップ、大規模デスクトップなど.

あなたは幅を選ぶことはできませんし、誰もがそうすることを期待することはできません。

それがレスポンシブが答えである理由です。すべての人のために設計することができます。

レスポンシブデザインには、さまざまなテクニックが使用されています。私は通常、フレキシブルグリッドを使用して設計し、2〜3のブレークポイントでレイアウトを変更します。そのため、いくつかの開始点を設定するために、これらの「標準」を考慮することができます。

ブートストラップはこれらを次のように設定します。

電話-480pxタブレット-767pxデスクトップ-979px大型ディスプレイ-1200px

ピクセルではなく、emと%の使用を検討する価値があるでしょう。

http://www.alistapart.com/articles/the-infinite-grid/ http://www.alistapart.com/articles/responsive-web-design/

3
Will

重要な考慮事項は次のとおりです。ユーザーはだれであり、画面の解像度はどの程度になると思われますか。

「コンピュータの画面が大きくなっています」というタイトルの最近のNielsen Alertboxのグラフを確認してください http://www.useit.com/alertbox/screen_resolution.html

ターゲットユーザーが「世界中のすべての人」である場合は、960を使用するのが最適です。ユーザーが米国の企業でデスクで行う可能性のあるタスクに取り組んでいる場合は、はるかに広く作業しても安全です。最近のプロジェクトでは、ユーザーが自宅でラップトップを使用している場合でも、最低でも1440x900で作業することを決定し、ブラウザーウィンドウの幅を1280と想定しました。 。 -ジム

2
Jim Gasperini

レスポンシブデザインは素晴らしいですが、あなたが探している答えではないと思います。問題の根本は、段落テキストの幅と、水平スクロールしたくないという事実にあると思います。

私にとって、完璧な段落は最大600px幅で、約540pxです。関連するコンテンツのサイドバーを追加すると、自然に全体が960pxマークになります。レスポンシブデザインでは、段落の幅を縮小してサイドバーを適切に非表示にすることができます。

結局、ウェブは狭く、人々はブラウジングしながら下にスクロールして見下ろします。横向きのコンテンツを追加すると、クライアントのクレイジーサイズのAppleモニターにもっと多くのコンテンツが収まるように見えるかもしれませんが、実際の世界で実際にそれが表示されるわけではありません。

1
Steve

ブルマからすぐに使えるサイズ。

デスクトップ> = 1068pxでは、最大幅は960pxで、水平方向の中央に配置されます。

ワイドスクリーン> = 1260pxでは、最大幅は1152pxになります。

fullhd> = 1452pxでは、最大幅は1344pxになります。

ギャップの値は24pxですが、使用できます。

960、1152、1344の値は、12と16の両方で割り切れるので選択されています。

ソース: https://bulma.io/documentation/layout/container/ マイナーエディション。

0
Hos Mercury

クライアントへの正しい応答は、サイトの分析を調べることです。次に応答できます。

選択肢A)XXピクセル。ユーザーのX%がサイトを使用できないと感じています。
選択肢B)YYピクセル。ユーザーのY%がサイトを使用できないと感じています。

0
Brian