最適なWeb​​ページの幅はどれくらいですか?

Webサイトを設計し、Webページの幅を最適な幅に設定することは、持つ価値のある会話です。 最近、ブログのデザインの幅を変更したことに多くの人が気づきました。 ページ幅を1048ピクセルに押し出しました。 この動きに反対する方もいらっしゃるかもしれませんが、テーマの幅をこれほど広くした理由について、いくつかの統計と理由を共有したいと思います。

ただし、1048ピクセルは乱数ではありませんでした。

ページ幅を拡大する上で、XNUMXつの重要な影響がありました。

  • YouTubeの幅を変更するYoutubeは現在、より大きな埋め込みサイズを提供しています。 Youtubeビデオページのサイドバーにある小さな歯車をクリックすると、テーマだけでなく、より大きなサイズのオプションが表示されます。 より高解像度のビデオがYoutubeで一般的になりつつあるので、私はそれらのビデオをブログに組み込み、(ページ幅全体を消費することなく)できるだけ詳細に表示したいと思いました。
  • 一般的な広告の幅は125、250、300ピクセルです。 300ピクセルは広告収入サイトでますますポップアップしているようで、私はそれらをサイドバーにきちんと組み込みたかったのです。

そしてもちろん、ページ、コンテンツ、サイドバーの左右にいくつかのパディングがあります…したがって、私のテーマのマジックナンバーは1048ピクセルでした。

最適なWeb​​サイトの幅

読者の統計を確認しましたか?

はい、もちろん! 私の訪問者の大多数が低解像度の画面を実行している場合、私は間違いなく私のページを拡大することについて考え直したでしょう。 幅とパーセンテージAnalyticsパッケージから画面解像度を出力した後(Googleでは[訪問者]> [ブラウザー機能]> [画面解像度])、結果のExcelスプレッドシートを作成し、解像度フィールドから幅を解析しました。

Googleは1600×1200の解像度を提供しているため、「x」の左側からすべてを取得し、1を掛けて数値結果にする必要があります。これにより、降順で並べ替えてから、SUMIFを実行して訪問数を確認できます。あなたが見ているデザイン幅よりも大きいか小さいです。

= LEFT(A2、FIND( "x"、A2,1)-1)* 1

より小さな解像度を実行している読者の22%を放棄しましたか? もちろん違います! コンテンツを左に、サイドバーを右に配置したレイアウトの良いところは、コンテンツが大多数のブラウザーの幅内にあることを確認できることです。 この場合、私の読者の99%が640ピクセルを超える幅で実行されているので、私は元気です! サイドバーを完全に見逃してほしくないのですが、それはコンテンツの二次的なものです。

9のコメント

  1. 1

    ハイブリッドレイアウトと100%のCSSコンテナ幅をお勧めします。 サイドバーの幅が固定されている限り、ヘッダー、フッター、およびメインコンテンツ領域は、画面の残りの幅に合わせて調整されます。 ユーザーのモニター解像度に関係なく、すべてのブラウザーウィンドウを100%埋めます。 そうすれば、ピクセルをカウントしたり、モニターの解像度に関するユーザー統計を追跡したりする必要がなくなります。

    • 2

      ボブ、私はハイブリッドレイアウトが本当に好きですが、残念ながら、実際のコンテンツではうまく機能しないことがあります。 私は怠け者かもしれませんが、私のサイトでは最大値と最小値が640pxであることを知っている方が簡単です。 私が投稿を書いているとき、ストレッチは想像するのが難しいです。

      個人的な好みだと思います!

  2. 3

    基本的に、私はあなたの結論に同意しますが、固定幅の設定を使用している場合は、幅を960ピクセルに制限します。

    追加の幅を占める垂直スクロールバーやその他のブラウザショートカットバーを考慮する必要があります。 960ピクセル以内にとどまると、1024ピクセル幅の画面解像度で左から右へのスクロールが発生しないことが保証されます。

    アンディエボン

  3. 4
  4. 5
  5. 6

    あなたが持っているので1048pxに設定すると、サイトで1024画面に水平スクロールバーが表示されます。 サイドバーとコンテンツ領域の幅(およびパディング)から100pxをスキミングして、728×1024に収まるようにしたほうがよいと思います。 それが今日のベストプラクティスです。

    これに対する唯一のケースは、分析番号がそれをサポートしている場合です…しかし、あなたはあなたの記事でそのデータを提供しなかったので、あなたはページデザインに欠陥があると思います。

  6. 7

    私は今、15×1024の解像度の768フィートのモニターを使用しています。水平バーが表示されますが、嫌いです。

  7. 8

    愚かな男
    誰もがすべてのウィンドウを全画面で使用しているわけではありません。実際、使用しているウィンドウはほとんどないと思います。 

    私はあなたのブログを80%のウィンドウで持っています…そしてそこに、水平スクロールバーがあります

    そして、画面の外にあるもの…見てみましょう…何もありません。

    したがって、スクロールバーは無意味です。

    読者を失う簡単な方法のXNUMXつ!!

    • 9

      コンテンツは@ heenan73:disqusページの中央に配置され、読者に必要なものを正確に提供します。 読者がコンテンツと水平スクロールバーの両方を見ることができるために読者を失った場合…彼らが私が探している読者であるかどうかはわかりません。 私たちのコンテンツには間違いなく1217pxにプッシュするユニークなものがあるので、それを追跡して修正します。 この投稿は実際には前のテーマについて書かれています。 私の注意を引いてくれてありがとう!

どう思いますか?

このサイトはAkismetを使用して迷惑メールを減らします。 コメントの処理方法を学ぶ.