Web Design Reference 网页设计自给自足篇

更新：原来的Anime Connection风格已经发布，WordPress使用者请自行去抓。

iRoll

设计这个主题的原因是想测试自己到底能给网页减多少负，提多少速，并在保持原来风格怪异的基础上省点带宽费用。基本的设计参考有两个，我自己的知识和MDC上的Tips for Authoring Fast-loading HTML Pages。原文是英文，这里大致解释一下以供各位参考。

Reduce page weight – 减少页面大小

为页面瘦身是最重要的提速方式，通过去掉页面上的空白，将内嵌的CSS与JS代码变为外部文件，我们能在不改动其他页面元素的情况下减少页面大小。包括HTML Tidy等等工具能帮助你快速达到类似的效果。

店长附记：登录Google或者Yahoo看页面代码，你就会发现它们移除了所有的多余空白。当然是否这样做是你的选择，因为对于个人网站来说去除1-2KB的空白也许不能产生多大效益。此外CSS的优化参考David Peralty的CSS Optimization，JS的减肥计划自然要用Dean Edwards的Packer。

Minimize the number of files – 减少读取文件的数目

减少一个页面上的文件引用减少读取一个页面所需的HTTP链接请求。

浏览器的缓存设定决定了读取页面时是否发送一个包含If-Modified-Since请求的header，询问文件（图像，CSS，JavaScript）的最后被更改时间。减少引用文件自然省去了许多同类的请求。

店长附记：减少JavaScript和CSS数量对帮助加速很有好处，很多浏览器都默认要检查全部的引用文件，所以强制缓存并不一定有效。另外你使用类似WP，MT乃至Drupal之类有许多插件的CMS作为发布平台，并且和客栈一样常常会有链接速度较慢的读者来访，考虑融合分散的JS与CSS以减少等待的痛苦。

Reduce domain lookups – 减少域名查询

无论你是在引用图像或是CSS，每个新域名都需要耗费浏览器的额外时间来进行DNS查询。

这也许并不实际，但减少页面里的非同域文件数绝无坏处。

店长附记：如果你的网站有多个域名，考虑统一使用某个域名；同时如果带宽和空间允许，使用服务器作为图片源比使用Flickr之类的服务更快捷。

Cache reused content – 缓存要重复使用的内容

确保你尽可能的缓存了站点内容，并设置了合适缓存过期值。

店长附记：如今的动态系统一般都配置了缓存系统，需要用户操心的事情并不多。WordPress系统已有一定的缓存功能，其中包括了对插件CSS和JS的支持，如果遇到流量特大的情况请用有WP-Cache，要进一步了解WordPress内置的缓存机制请用WordPress Cache Inspect。

Optimally order the components of the page – 优化页面的读取顺序

首先展示页面文字内容，减少用户苦苦等待的时间。所有对内容显示起作用的CSS和JS都应该在第一时间下载。任何需要等待页面读取结束才能执行的DHTML都应留待最后读取。

店长附记：将DHTML类型的JS放到页面底部，body标签的上方。

Reduce the number of inline scripts – 减少内嵌代码的数量

因为HTML分析器必须假设内嵌代码会更改页面构成，所以使用内嵌代码可能会耗费资源。同时古老的JS技术，例如documnent.write()也应该避免。使用W3C的DOM确保你的代码尽可能少的影响页面读取。

店长附记：Widget，现在很多Web2.0网站都提供Widget，但并不是每一个都使用了W3C的标准，它们可能会给你的页面读取带来负面影响，慎用为好。

Use modern CSS and valid markup – 使用标准的CSS和置标

使用现代的CSS可减少所需置标语言（例如HTML）的大小，同时省去不少无必要的图片（例如纯文字/单色图片）。使用标准的置标语言也减少浏览器修正错误的时间。

店长附记：当今很多JavaScript库都依赖标准的页面来正常工作，HTML上的错误很可能造成“上梁不正下梁歪”。同时使用标准的设计说明你至少还在意浏览器间的兼容。

Chunk your content – 分割你的页面

这里指不要大量使用table嵌套，使用div代替或者将table独立分开。

店长附记：使用tbody能暂时缓解浏览器必须读取整个table才能渲染的问题，长期来说table嵌套将是个开发者的噩梦。

Specify sizes for images and tables – 指定图片和表格的大小

如果浏览器能在读取页面的时候决定图片的大小，那它在读取图片的过程中就无需再调整页面。这不仅加快了页面的渲染，也防止页面在读取过程中变形。

店长附记：如果你的页面上有很多图片，请注意这样做可能增加你的页面大小，请估量两者间的利与弊。

Choose your user agent requirements wisely – 选择你要兼容的浏览器

尝试让你的页面在所有浏览器上都有一样的外观可能带来不必要的累赘。理想的兼容对象包括IE5.5+，Gecko 1.0.2+，Opera 7+和Safari。事实上当你使用了以上的技巧之后，大部分“现代”的浏览器都应该能正常浏览你的网站。

店长附记：早期的Gecko类浏览器（Netscape，Mozilla等等）和Trident类（IE）都有严重的渲染问题，可能要使用浏览器特有的CSS标签才能达到基本统一的效果；兼容早期Opera的最大问题则是它对透明度的不支持；Safari的问题一般出现在JavaScript的使用上。

该文还提供了优秀页面的常规结构，有兴趣的可以去看看。这篇文章写于2003年，所以在部分内容上也许已经开始落后，请自行调整适用的部分。

说完了概括性的思维方式，谈谈在设计这个风格时我考虑的其他问题。

1. wrapper div的使用。

很多人设计网页时喜欢使用一个div包住所有body内的元素，称之为wrapper。

但你知不知道wrapper的存在意义是什么？它也是一个属于IE的hack，由于IE6以下的版本不支持设置body上的width属性，我们没有办法直接限制页面大小为固定的宽度。因此开发人员选择利用一个隐形的div来弥补IE失去的功能。

到了IE6，虽然不需要wrapper就可以限制body宽度，但遇上被设定了position的元素时出现了新的bug。所有被定义了absolute的元素都不能超出body上设置的宽度（因此会被挤压或者撑开页面）。这和W3C的标准要求又不同，因此wrapper继续在开发者中流行……

到今天wrapper甚至成为了很多人的一种习惯，也有不少设计依赖类似的wrapper才能完美实现。其中包括之前很多人提及的将sidebar与content高度对齐的设计。Roger Johansson和Alex Robinson都有详细介绍符合W3C标准的高度对齐的文章，各位可自行去查看。

但无论使用那种对齐方式，我们都要使用wrapper，而它的最大问题是巨型div的渲染需要先读取内容，而将速度较快的content和速度较慢的sidebar放在一起不利于页面显示（类似于table嵌套的渲染问题）。

2. 文字注脚的实现。

说实话这个功能是在好早前就有的了，但一直没谈过，现在来解释下原理。

最早发现使用这个技能的网站是著名的cssZenGarden，他们的官方设计目录使用了这样的技巧。

基本原理是用一个设定了position: relative的div包住一个图片和一个span文字串，剩下的问题可以通过手动试调span的position解决。也因为使用了非static的属性，这个div会有不能padding/margin的限制，只有运用在固定宽度的图片上才能保证好看。

当然为了方便著想我自己写了个小插件，可以自动将图片转换成类似的结构，方便写帖子的时候使用。可到这里下载。


使用办法：[关键词 '图片链接地址' '图片代替文字' '图片注脚' ] 关键词默认为image


CSS的设计，到本站的style.css下查找.preview与.numero两个class即可。

3. Widget管理的简易。

原来我的sidebar一直使用不规则的div结构，这和WordPress的widget设定有出入，就算自定义了widget结构也很难调整到正常使用。所以这次专门回归到ul+li的结构，今后使用默认设定会方便许多。

4. 对屏幕分辨率的支持。

原来我一直使用1280px最佳的设定，但其实最多人使用的分辨率还是1024px，而且800px的用户也还占惊人的15%。我觉得为了大众方便还是有必要回到向下兼容的时代。另外我也发现其实1280px是浪费sidebar了，目前根本没必要使用3列的结构。

5. PNG的渲染问题。

鉴于最近我发现PNG在不同OS和不同浏览器上的渲染有一定差异，如无透明的必要基本不使用。另外我发现网上流行的behavior修复PNG并不能完全解决老IE上的问题……谁来解释一下？

大概这么多了，最后推荐几个有用但在国内可能比较少人关注的参考资源。

• on having layout – 基本就是对IE可恶的渲染系统做个深刻的解释；

• Taming Your Multiple IE Standalones – 如何试调IE6的绿色版；

• Smashing Magazine – 从页面设计到系统开发都有的资料收集库；

• Steal These Buttons – 我们站点图片的来源之一，请不要盗链；

• Kuler – 用户提供Adobe Photoshop的配色方案；

• 24ways – 每年24条网页设计小技巧，为圣诞节倒数；

• HTML Dog – HTML/CSS的解释，比伪装的w3cschools那要好多了。

• Useit – Jakob Nielsen，网页易用性的教父。

回忆

最后问个，有人需要我们的老风格吗？有的话我去发布一下。

完。