我在所有当前版本的桌面浏览器中打开了相同的 6 个标签,然后截取了仅包含标签本身 UI 的屏幕截图。 这些截图来自运行 OS X Lion 的 Mac。





一些事实
- 如果用户打开了 1-3 个标签(约 1200 像素,此网站的平均值),每个标签平均有 26 个可见字符。
- 所有浏览器都保持着这个平均可见字符数(26 个),直到大约 5 个标签,然后该数字开始缩小。在 6 个标签时,您将获得大约 18 个字符。
- IE 9 从 4 个标签开始缩小,在 6 个标签时,每个标签平均只显示 3 个字符。
- 除了 Safari 之外,所有浏览器都显示网站图标。
- 除了 Safari 之外,所有浏览器都将标签放在顶部(URL 栏上方)。
一些意见
- 空间有限,请珍惜。
- 您可以很大程度上依靠网站图标来识别您的网站,因此请不要从网站标题开始,而是从下一个最重要的内容开始。除非您的 Safari 流量很多(请记住,您网站的统计数据是最重要的)。
- Safari 应该克服困难,在标签中添加网站图标。
不错的统计数据。IE 是否也是在 1200 像素下截取的?看起来小很多,而且看起来也不像是最近的版本(那是 Windows XP 或 Windows 7 上的 IE8 或 IE9 吗?看起来更像是 Windows 98 上的 IE6 或 IE7,使用的是 800×600 的显示器 :P)
我发现浏览器放弃了全宽标题栏很有趣。在 Firefox 和 Safari 的早期测试版中,曾经有一个标题栏位于标签栏上方(标签栏仍在地址栏上方,标题只是显示了两次。一次是在顶部的全宽栏中(其中包含关闭/最小化/最大化控件),另一次是在标签内。)
这样做主要的好处是可以看到完整的标题,而无需悬停并等待工具提示(我知道从您最近的 Pseodo Elements 演讲中,您非常喜欢那些原生工具提示 ;-), 不是!) 才能看到完整的标题。这个全宽栏也使得移动整个窗口更容易(因为拖动标签意味着将标签拉到一个新窗口中),您必须在微小的 4-5 像素边缘上非常巧妙地移动鼠标才能实际抓住窗口并移动它。
IE9 将标签显示在地址栏旁边,因此它损失了大约一半的屏幕宽度。
我不明白为什么还有很多网站不费心替换 CMS 的默认网站图标,或者根本没有网站图标。
自从 Opera 6.10 以来,这让我很烦。
谷歌在 2009 年就承认了网站图标的重要性,并将他们的网站图标替换为一个更丑陋但更容易扫描的图标。 http://googlesystem.blogspot.com/2009/01/new-google-favicon.html
如果您喜欢“应用程序标签”,网站图标将是一个很大的优势。上面提到的浏览器中哪些支持 Firefox 风格的应用程序标签?
Google Chrome、Mozilla Firefox 和 Opera 都有相同的“固定”标签功能。
您确定那是 IE9 的截图吗?:)
抱歉再次评论。
在 IE9 中,URL 输入与标签在同一行,但您可以轻松地将标签放在单独的一行,从而为标签提供更多空间。
我只想提一下,我不是 IE 粉丝。作为一名网页开发者,我实际上讨厌 IE,但您应该在这里讲清楚事实。
重点是“默认”,我没有更改任何默认设置,因为(我非常确定)大多数用户从未更改过它们。
我不得不使用 browserstack.com 运行 IE 9。这是一个上下文示例: http://cl.ly/ADYc
不用担心,IE9 即使在普通(非经典主题)Windows 上看起来也很糟糕。不知道他们为什么决定从 IE8 的主题更改,IE8 的主题真的很漂亮简洁。
标签位于顶部是一件比较近的事情——Opera 已经使用它们很多年了,但直到 Chrome 出现后,Firefox/IE 才决定它们一直都是正确的。
哈哈——任何机会都可以对 IE 歪歪嘴!说真的——你从哪个博物馆里抢来的这个尘封已久的 IE 版本?另外——你把它缩小到 420 像素了 :-) 如果你只是说你在看正常的浏览器,并且把 IE 排除在外,我们会理解的!
它确实是 IE 9,IE 的当前发布版本。请参阅上面的截图。
我刚看了 IE 9 的截图。这是一个完整的截图。
IE 9 截图
这基本上是 IE 从用户窗口中获取更多页面空间的方式。他们没有将标签和 URL 栏叠加起来,而是将它们并排放置,以减少浏览器占用的空间。这是一种与其他浏览器竞争的方式。但它们在我们的标准中仍然得分很低……我认为 IE 在未来几年内将变得过时,除非他们推出一些能够震撼所有其他浏览器的大功能,比如支持所有可能的功能甚至更多。
总之,抱歉一直在谈论 IE 和它有多糟糕,这是一篇好文章。网站图标是一个很好的方法,可以区分标签。它使您更容易在一片标签海洋中找到您要找的标签,就像我的爸爸,他通常会打开大约 50 个标签,却没有使用 Firefox Panorama 对它们进行分组(这是一个很棒的功能)。由于缺乏网站图标,以及 Opera 正在成为更好的浏览器,Safari 现在在我的浏览器列表中排名很低。
首先,作为一名 Web 开发人员,我讨厌 IE :p 但这很难让人相信“这些截图来自运行 OS X Lion 的 Mac”,应该写“这些截图来自运行 OS X Lion 的 Mac 和 VM Fusion 上的 IE”,或者“这些截图来自运行 OS X Lion 的 Mac,并且 IE 在我的旧咖啡机上运行,而我的咖啡机运行的是 Windows(随便说一下)”:p
哇,谁会想到这么多人会出来为 IE 辩护?无论如何,需要记住的是,即使人们的显示器分辨率为 1200,也不意味着他们的浏览器是全宽的。
我完全同意网站标题的说法,但让我恼火的是,几乎所有 CMS 的默认 title 属性都以网站名称开头。有太多关于唯一标题重要性的信息,但它们仍然默认使用网站名称。
感谢您进行上述研究。有趣的发现。
您真的应该在 IE 截图上花更多心思,以确保它是一致的。我的意思是,这没什么大不了的,但它确实看起来像你是在说,“无所谓。我不在乎 IE。”
这是一个比较图片。您可以验证我的截图宽度为 1200 像素。这也是使用默认设置。
http://i.imgur.com/5PeNR.png
我打开了 IE 9。我打开了我在所有其他浏览器中打开的六个相同的标签。我截取了标签的屏幕截图。我对 IE 的感受无关紧要,这就是它的样子。(上下文: http://cl.ly/ADYc)
好吧,IE9 从 Windows 主题获取图形,所以它的外观在很大程度上取决于主题。
同样,在 Apple 操作系统中截图有点不公平——所以这里有一个“Win7 默认”屏幕: http://www.shrani.si/f/t/d8/2qXEkoi4/ie9.png
建议:由于大多数浏览器甚至不同版本的浏览器使用不同的文本渲染,因此在帖子中添加一个文本渲染示例会很好……
是的,我认为任何来到你网站的 Chris 都不可能支持 IE,但你提供的 IE9 屏幕截图与 Windows 默认安装时显示的不一样。不幸的是,我有一台 Windows 7 电脑,我必须将显示设置改为 Windows 经典模式,并将屏幕分辨率降低才能使它看起来像那样。
(再次说明,背景:http://cl.ly/ADYc)
我们也要记住,外观对我收集的信息并不重要。重要的是位置和大小。IE 9 的选项卡在数量较少时实际上会稍微大一些,但会更快更大幅度地缩小。
当然,我完全理解这篇文章的要点,外观不是一个重要方面。这只是我和其他人的第一反应,似乎觉得你故意试图让 IE 看起来很糟糕。
我不确定为什么,但有件事告诉我,Safari 唯一能够显示网站图标的方法是他们手动批准每一个网站图标。
我刚在 Windows 7 上安装了 Safari 5.1 - 它在每个选项卡上都显示网站图标,直接开箱即用 - 所以我想知道为什么 Mac 用户要遭受这样的待遇…
将网站名称放在标题的最后位置有一个额外的好处:据说是对 SEO 更有利,因为网站标题总是相同的,将其放在最后位置可以更容易地区分同一个网站上的多个页面。
我一直很喜欢 Glims for Safari,它可以在选项卡上添加网站图标。
除了它会自动恢复你的最后一个会话之外,还有更多窗口管理选项(全屏最大化的快捷键)、实时搜索建议等等。它通过向 Safari 添加额外的偏好设置来实现。
如果你还没有听说过它,你应该去看看。 http://www.machangout.com/
我个人讨厌选项卡上的网站图标。但是,我可能是为数不多的 Safari 用户之一了。/耸肩
我也使用 Safari 作为我的主要浏览器。其他浏览器都太花哨,太笨重了。
实际上,我已经在我的 Firefox 书签中关闭了网站图标(并将选项卡放在它们下面,这在某种程度上占用了更少的空间)——但我无法在 Chrome 中找到可以做到这一点的设置或扩展;我也无法在任何一个浏览器中找到从选项卡中删除它们的设置。
此外,Safari 占用的屏幕空间最少(包括选项卡、书签、地址栏和标题栏,它比 Chrome 短一个像素)。如果你把 Safari 的状态栏算进去,Chrome 会稍微小一些,但 Chrome 和 Firefox 的“每秒闪烁十次的闪光/不闪烁”状态栏太烦人了,我无法使用这两个浏览器。
我需要下载 Opera。我会看看那里能定制什么。
非常感谢你解释得很好的教程!我是一个初学者,我正在从这个网站学习一切 :)!
你怎么潜入进来的?
太棒了;)
有没有办法改变标题栏本身的属性?比如颜色、背景等等?另外,每个其他带有标题的 html 元素都使用
title=""为什么文档使用<title>而不是<html title="">?我认为可能是出于多种原因。
从历史上看,我认为非常早期的 HTML 版本没有很多属性。只有少数几个,比如<a href=””>,后来是<img src=””>
我认为在语义上它们应该是不一样的,因为 title 属性是所讨论元素的标题,而 title 元素是整个文档的标题。
此外,在文档开头添加更多文本可能会干扰浏览器对字符集的检测,如果浏览器需要查找<meta charset=”utf-8″>。
是的,Safari 绝对应该添加网站图标。这样可以更容易地识别选项卡。苹果应该做得更好。
六个月前,当我买我的第一台 Mac 并启动 Safari 时,最先注意到的就是没有网站图标。
不得不说,我认为 Firefox 在选项卡方面做得最好。Chrome 看起来有点奇怪,顶部有一个斜坡!
我想现在所有浏览器都使用它们,这意味着它是最好的方法 - 有没有其他解决方案?
有没有人发现 FF 选项卡在首次启动时与关闭窗口后重新打开时的外观不同?
我的意思是
http://twitpic.com/4dx2gc/full
http://twitpic.com/4dx333/full