您当前位置: 主页 / Dog 博客 / 存档

重新设计:布局和呈现

2004年2月18日星期三 (下午12:04 GMT)

布局

我不想(再次)陷入激烈的布局争论,但我认为花点时间简要提一下关于 HTML Dog 布局和通常做出此类决定的思考过程是有价值的。

正当我倾向于使用固定宽度布局时,我又重新选择了流体(我更喜欢“流体”而不是“液体”这个词,因为它和“固定”押韵)。我不会重复之前的论点,我只想说,无论你使用哪种方法,都必须做出权衡,我认为流体布局最适合 HTML Dog,但,你知道的,这并不是普遍适用的——我仍然不认为哪种布局更好。哦不……我想我又要滑进固定/流体争论的领域了……

布局仍然是弹性的(除了头部的高度,因为它是新近基于像素构建的),这不仅是因为我认为它非常酷,而且我还相信它提供了巨大的优势,特别是在可访问性方面。第三栏在弹性方面确实会造成一些问题,即字体大小(以及因此的左栏和右栏宽度)越大,中间内容区域就越压缩。然而,由于中间区域的流体性质,它至少可以大幅缩小,然后才开始出现问题。这个例子进一步突显了在弹性方法方面使用流体元素而不是固定元素的优势。

模板和风格指南

在严格的风格指南之后,为内容区域制定了许多模板。风格指南和模板是构建网站的重要工具(即使它们只是存在于你的脑海中),并且随着网站规模的增长,它们的重要性也越来越高——一致性是好的。我试图尽量保持内容区域的许多先前风格,这些风格已经经过深思熟虑,例如如何突出显示代码、示例、注释以及所有重要的标题和副标题。最大的改革在于如何分解区域。以前,有很多盒子包含,例如,主标题和你现在所在的位置、博客条目、评论以及发布评论的表单。现在它们都整合到一个区域,并通过实线或虚线分隔。我个人认为这样更清晰,效果更好。

关于使用灰色文本(例如用于突出显示评论作者和日期)已经有一些评论,并且其与背景的对比度较低是一个坏消息。一方面,这确实降低了可用性,因为它更难阅读;但另一方面,我认为它也提高了可用性,因为它使评论本身更加突出。又出现了权衡。

当然,使风格指南更易于实施和维护的一个重要因素是 CSS——只需在一个文件中进行微小更改,即可在整个网站上实现样式更改。

未来

我一直在思考的一件事是,越来越有必要关注未来的发展趋势以及用户在不久的将来(甚至现在)可能会如何浏览网页。随着集成 PDA 式显示器的高端手机的兴起和日益普及,访问网站的渠道不再局限于桌面(或笔记本电脑)。屏幕更小的设备对页面布局提出了特定要求。尽管 PC 在短期内不会消失,但适应更广泛屏幕尺寸的需求正在悄然逼近。就像许多人开始认为我们可以不再担心 800x600 这样小的分辨率一样,实际上我们可能不得不开始考虑那些变得更小的分辨率。

评论

评论1

我非常喜欢你的重新设计。它保持了网站的简洁风格,并通过第三栏增加了功能。 “您现在的位置”提示也很有用,特别是当用户链接到子页面而不是你的网站主页时。使用一些图像进行设计(例如内容区域顶部和底部的圆角)我认为是个好主意,特别是当用户在浏览器中禁用图像时,网站仍然完全可访问且可读。
但也有一些我想批评的地方。首先,根本没有打印布局。打印网站时,布局保持不变,这可能会很恼人,因为左侧和右侧导航栏占用了三分之二的页面,即使用户根本不需要这两个栏,长文本也会占用很多页面。其次,你为什么不使用链接标签来反映各个页面之间的关系?
但总的来说,你的网站仍然非常好,因为自重新设计以来内容几乎没有变化 : )。
抱歉我可能英语说得不太好,但正如我之前告诉你的,我的第一语言是德语,记得吗?

2004年2月18日星期三下午12:56 GMT,Maximilian Baumgart 说道。

评论2

也许有点跑题,但验证器正在抱怨下面的评论表单。你似乎通过“name”而不是“id”为其提供了标识符,它不喜欢这样。

2004年2月18日星期三下午1:14 GMT,Mark Harmstone 说道。

评论3

我也非常喜欢这次重新设计。

我同意 Maximilian 的观点,你应该在可能的情况下使用链接标签(我正在研究如何将它们添加到我的网站)。

我只有一个小小的、主观的批评:我不喜欢灰色条(内容区域的顶部和底部)在窗口边缘结束的方式。我觉得它们应该在边缘之前关闭。

为什么?嗯,这有一个潜移默化的影响(至少对我来说是这样)。我一直有一种感觉,我需要水平滚动,而且我一直不知道为什么,直到我意识到是灰色条——它们似乎暗示了右侧还有更多内容。

当然,可能只是我!;-)

2004年2月18日星期三下午1:20 GMT,DarkBlue 说道。

评论4

Maximillian - 我记得!感谢你指出关于打印的事情。这完全是我疏忽了,尽管我把它写在了我应该做的事情清单上……!我现在已经在 CSS 中添加了一些东西,使其更易于打印。有时间我会改进。

Mark - 谢谢你。我已修复该问题,现在一切应该都正常了。

还有,DarkBlue 先生!有趣的观点。我不太确定。这是我从未想过的事情。我暂时不会改变它,但我一定会记住。

2004年2月18日星期三下午1:36 GMT,Patrick 说道。

评论5

哇!那部手机太疯狂了

2004年2月18日星期三下午4:18 GMT,Chris 说道。

评论6

看起来很棒……但流体和固定不押韵 :p

2004年2月19日星期四凌晨12:38 GMT,haze 说道。

评论7

当然押韵……嗯……它们都以“f”开头……嗯……好吧好吧。我查了字典里的“押韵”,看看能否像方钉子装圆孔一样,把我的说法塞进官方定义里。好吧。好吧。我说错了。但你知道我的意思!!!

2004年2月19日星期四上午9:49 GMT,Patrick 说道。

评论8

流体或固定……那是头韵,是押韵的表兄弟。哦,算了,幸好你不是说唱歌手。

2004年2月19日星期四下午1:15 GMT,Dan W 说道。

评论9

头韵。“固定”和“流体”是头韵。

网站看起来不错。你 Logo 里的那头大象是怎么回事?;)

2004年2月21日星期六晚上8:17 GMT,Neal 说道。

另请参阅

^ 顶部

SiteGround: Fast, reliable, recommended hosting.