最佳网页宽度是多少?

设计网站并将网页宽度设置为最佳宽度是值得讨论的话题。 你们中许多人注意到我最近更改了博客设计的宽度。 我将页面宽度推到1048像素。 你们中的一些人可能不同意这一举动-但我想分享一些统计数据和为什么我将主题宽度如此之宽的原因。

不过1048像素不是一个随机数。

扩大页面宽度有两个关键影响:

  • 更改YouTube宽度YouTube现在提供更大的嵌入尺寸。 如果您点击YouTube视频页面侧栏上的小齿轮,则会为您提供较大尺寸和主题的选项。 由于高清视频在Youtube上变得很普遍,因此我希望将这些视频合并到我的博客中,并尽可能详细地显示它们(而不占用整个页面宽度)。
  • 典型的广告宽度为125、250和300像素。 300像素似乎正越来越多地出现在广告收入网站上,我想将它们整齐地整合到我的侧边栏中。

当然,页面的左侧和右侧,内容和侧边栏都有一些填充…因此,我的主题的神奇数字为1048像素:

最佳网站宽度

我检查了读者的统计信息吗?

当然是! 如果我的大多数访问者运行的是较低分辨率的屏幕,那么我肯定会对扩展页面有第二个想法。 宽度和百分比从Google Analytics(分析)包中输出屏幕分辨率后(在Google中,它是“访客”>“浏览器功能”>“屏幕分辨率”),我构建了一个包含结果的Excel电子表格,并从“分辨率”字段中解析出了宽度。

Google提供的分辨率为1600×1200,因此您需要从“ x”的左边开始取所有内容,然后乘以1使其成为数值结果,以便对它进行降序排序,然后进行SUMIF并查看访问次数大于或小于您要查看的设计宽度。

= LEFT(A2,FIND(“ x”,A2,1)-1)* 1

我是否放弃了运行较小分辨率的22%的读者? 当然不是! 关于布局,其中内容位于左侧,边栏位于右侧,可以使您确保内容仍在大多数浏览器的宽度之内。 在这种情况下,我99%的阅读器运行的宽度大于640像素,所以我很好! 我不希望他们完全错过侧边栏,但这仅次于内容。

9条评论

  1. 1

    我建议使用混合布局,并且CSS容器宽度为100%。 只要边栏具有固定的宽度,页眉,页脚和主要内容区域就会调整为适合屏幕的剩余宽度。 不论用户的显示器分辨率如何,都将填充所有人浏览器窗口的100%。 这样一来,您就不必再对像素进行计数或跟踪有关显示器分辨率的用户统计信息了。

    • 2

      我真的很喜欢混合布局,鲍勃-但不幸的是,有时它们在实际内容上表现不佳。 也许我很懒,但是让我更容易知道网站中的max和min为640px。 当我写文章时,很难想象伸展运动。

      我猜只是个人喜好!

  2. 3

    本质上,我同意您的结论,但如果使用固定宽度设置,则将宽度限制为960像素。

    必须考虑垂直滚动条和其他占用额外宽度的浏览器快捷键。 通过保持在960像素以内,可以确保在1024像素宽度的屏幕分辨率上没有从左到右滚动。

    安迪·埃邦

  3. 4
  4. 5
  5. 6

    既然你有设置为1048px,您的网站会在1024屏幕上产生水平滚动条。 我认为最好将侧边栏和内容区域的宽度(和填充)略去100px,以使其适合728×1024。 这就是今天的最佳实践。

    唯一反对的情况是分析数据是否支持它……但是由于您没有在文章中提供该数据,因此我想说您的页面设计存在缺陷。

  6. 7
  7. 8

    愚蠢的人
    并非每个人都全屏使用每个窗口-实际上,我敢打赌很少。 

    我的博客有80%的访问量…那里是水平滚动条

    屏幕上出现了什么……让我们看到……什么也没有。

    因此,滚动条毫无意义。

    迷失读者的一种简单方法!

    • 9

      内容位于@ heenan73:disqus页面的中心,为读者提供了他们所需的确切信息。 如果我因为读者既能看到内容又能看到水平滚动条而迷失了他们……我不确定他们是我要找的读者。 我们的内容中肯定有一些独特之处,可将其推送到1217px,因此我将对其进行跟踪并进行修复。 这篇文章实际上是关于以前的主题写的。 感谢您引起我的注意!

你觉得呢?

本网站使用Akismet来减少垃圾邮件。 了解您的数据如何处理.