网站设计Hack名人堂

我们网站设计师一直都是一群狡猾的人，如果需要实现特定的外观或功能，我们通常可以拼凑出一个解决方案。即使没有特定的标准或工具来指导我们，情况也是如此。这就是网站设计技巧的概念发挥作用的地方。

黑客是创造性的，通常是迂回的方法，使一个网站的外观或工作在一定的方式。有时，它们带有负面的含义。例如，基于Html表格的布局被嘲笑为屏幕阅读器无法访问。但并非所有的黑客都是坏的。

事实上，他们的部署是为了挑战极限。网络总是有它的局限性，网站设计师们试图利用黑客来绕过它们。

有了这些，让我们来看看过去几年来最有用、最流行的一些网站设计技巧，这些灵感来自于与其他设计师在Twitter上的讨论。尽管他们并不一定能满足我们今天所拥有的标准，但他们在自己的时代是名人堂。

布局：HTML表格和CSS浮点数

我们的第一批选择将一起进入这个虚拟名人堂。尽管它们各自的峰值使用时间相隔数年，但它们本质上是用来完成相同的事情的：多列布局。

HTML表格

在CSS出现之前，早期的网站都是单列的。没有填充或边距，也没有将内容放置在水平列中的标准方法。直到一些有进取心的人决定使用表来实现这个目的。

当然，HTML表格是用来保存表格式数据的，而不是页面布局。但在CSS出现之前，它们实际上是一种有效的方法。

CSS漂浮

表有很多缺点——包括前面提到的可访问性问题。它们在浏览器中呈现也很慢。因此，当CSS浮动被引入时，它被视为网站设计师的游戏规则改变者。

浮动不是HTML标记，所以它们更容易访问，可以提高性能。突然之间，多栏布局通过CSS成为可能，并且可以更好地适应屏幕大小等东西。

然而，浮舟并没有把我们带到应许之地。如果您希望列具有相同的高度，则必须实现额外的clearfix hack。

这些物品中的每一件在今天仍然非常有用，当它们被用于最初的目的时。但是对于布局来说，谢天谢地，他们的日子已经结束了。

元素间距：非突破性空格和Spacer.gif

注重细节的网站设计师经常寻找将元素空间缩小到精确像素的方法。再说一次，这在当时并不容易。因此，使用不间断空格（＆nbsp;）和spacer.gif可以更好地控制间距。

非突破性空间

想要将一个元素水平移动，但没有居中或右对齐?添加一些不间断的空格就可以了。

然而，这并不是一门精密的科学。每个空间的实际大小取决于字体族和字体大小。即使考虑到这些差异，这次黑客攻击看起来仍然会因访问者使用的浏览器和操作系统而有所不同。

Spacer.gif

这种更精确的间距技巧通过创建一个透明的.gif图像(通常命名为spacer.gif)并将其放入页面中来实现。简洁之处在于，因为这是一个透明的图像，设计师可以将高度和宽度设置为任意像素，而不会对外观或性能造成负面影响。

CSS使得这两种方法都过时了。但你不知道WordPress Gutenberg编辑器有一个Spacer块它做的事情几乎一样?它只是表明，需求仍然存在。

字体设计：基于图像的文本

这个需求非常简单，早期的网站基本上局限于用户系统上安装的字体。当然，除了诸如Times New Roman、Georgia、Arial和Helvetica这样的基础字体，设计师无法知道用户使用的所有字体。

随之而来的是一个糟糕的决定——在Photoshop中创建充满文字的图像。虽然这允许使用几乎任何字体，但它是以牺牲可访问性为代价的。此外，使用图像代替HTML标题标签还会破坏页面的语义——可能会破坏搜索引擎优化。

粘性标题和导航：框架

HTML框架可能是超前的，因为我们曾经使用它们完成的许多任务现在都是通过CSS和Javascript完成的。

这个概念相当简单，布局中的每个单独的"框架"实际上是它自己的页面。这是一种将页眉、页脚或导航从网站的其他内容中分离出来的简单方法。例如，对导航进行更改意味着在单个文件中进行单个更改。它与服务器端include所做的类似，只是包含了一些其他的设计优点。

其中最主要的是创建"粘性"标题和导航的能力。当用户滚动内容时，他们仍然可以轻松地浏览站点。

这项技术达到了它的目的，但还远远不够理想。对于不同的屏幕大小，它的适应性不是很好，对于搜索引擎优化也不是很好。还有一些安全问题，可能从一个恶意的URL加载帧。

图像优化：切片图像

在宽带普及之前，图像优化是至关重要的。即使是50kb的映像也可能会在慢速连接上拖累页面。

软件巨头Adobe提供了一个有趣的解决方案。通过他们的图像备份软件，设计师可以将一张图像分割成任意数量的小块。每个单独的片段可以被优化，理论上可以让它们快速下载。

但这还不是全部，然后，软件可以将这些切片导出到一个HTML表中。从那里，您可以复制并粘贴该HTML到您的页面。

这种技术的问题有两方面，首先，表布局可能会花费额外的时间来渲染——可能会破坏已经实现的任何优化。其次，维持它可能是一种真正的痛苦。例如，向大型标题图形添加导航项可能需要重新使用一组全新的切片——因此需要更改模板。

虽然图像优化仍然很重要，但庆幸的是宽带让我们在处理大文件时有了更多的回旋余地。即便如此，现代版本的Photoshop仍然提供图像切片和HTML导出。

放置Internet Explorer：＜!--[if IE]＞

直到今天，仍然经常听到网站设计师诅咒Internet Explorer的存在。它的传统依然存在，部分原因是一些用户根本不会放弃它。

正因为如此，我们似乎永远都在绕过IE的许多专有怪癖和限制。多年来，这包括使用条件注释来检测IE用户并提供替代样式。

它在某种程度上是通用的，因为您可以将样式应用于IE的所有版本＜!--[if IE]＞，或针对使用较旧版本的样式＜!--[if lt IE 11]＞。您也可以反向使用它，以查找大于或等于特定发行版的版本＜!--[if gte IE 10]＞。

微软肯定对网站设计师有些同情，因为它允许这些有条件的评论在IE中工作。谢天谢地，他们的新Edge浏览器不需要这些废话。

要记住的网站设计技巧

当然，名人堂里的这些技巧并不是网站设计师们唯一使用的方法。有无数的变通方法帮助我们完成看似不可能的事情。但这个列表的与众不同之处在于它们的广泛使用，在某些情况下，还得到了大公司的支持。

也许关于它们，我们能说的最好的事情就是它们起了作用。我们利用它们作为达到目的的手段。当然，它们可能是通过磨损的管道胶带粘在一起的，但将这种高尚的设计真正呈现在浏览器中感觉像是一个真正的成就。

更棒的是，他们为今天的网络铺平了道路。此列表中的大多数项都已被HTML和CSS标准取代，这对每个人都有好处。

标签： 网站设计