前端代码规范 及 最佳实践

1.

留空◊

1.

for

(

var

i
=0,j=arr.length;i<j;i++){

2.

//
Dosomething.

3.

1.

for

(

var

i
=0,j=arr.length;i<j;i++)

2.

3.

//
Dosomething.

4.

1.

for

(

var

i=0,j=arr.length;i<j;i++){

2.

//
Dosomething.

3.

plugins.js和script.js◊

plugins.js◊

01.

/*
PLUGINDIRECTORY

02.

本文件中出现的插件
[按出场顺序排序]

03.

04.

1.)
AnimateBackgroundPosition-'target='_blank'>http://plugins.jquery.com/project/backgroundPosition-Effect[/code]
05.
2.)
jQueryEasingPlugin-'target='_blank'>http://gsgd.co.uk/sandbox/jquery/easing/[/code]
06.
3.)
jQueryAjaxFormplugin-http://jquery.malsup.com/form/#download


07.
4.)
jQueryvalidationplugin(formvalidation)-'target='_blank'>http://docs.jquery.com/Plugins/Validation[/code]
08.
-password
strength


09.
5.)
StyledSelects(lightweight)-'target='_blank'>http://code.google.com/p/lnet/wiki/jQueryStyledSelectOverview[/code]
10.
*/


11.


12.
/**


13.
*
1.)AnimateBackgroundPosition-'target='_blank'>http://plugins.jquery.com/project/backgroundPosition-Effect[/code]
14.
*
@authorAlexanderFarkas


15.
*
v.1.21


16.
*/


17.
(
function
($)
{


18.
if
(!document.defaultView
||!document.defaultView.getComputedStyle){
//
IE6-IE8


19.
//SNIPPED


20.
};


21.
})(jQuery);

22.


23.


24.
/**


25.
*
2.)jQueryEasingPlugin(we'renotusingjQueryUIasofyet)-'target='_blank'>http://gsgd.co.uk/sandbox/jquery/easing/[/code]
26.
*/


27.


28.
//
t:currenttime,b:begInnIngvalue,c:changeInvalue,d:duration


29.
jQuery.easing[
'jswing'
]
=jQuery.easing[
'swing'
];


30.


31.
jQuery.extend(
jQuery.easing,

32.
{

33.
//SNIPPED


34.


35.
});

36.
;(
function
($)
{


37.
$.fn.ajaxSubmit
=
function
(options)
{


38.
//SNIPPED


39.
}


40.
})(jQuery);

41.


42.
/*


43.
*
jQueryStyledSelectBoxes


44.
*
version:1.1(2009/03/24)


45.
*
@requiresjQueryv1.2.6orlater


46.
*


47.
*
Examplesanddocumentationat:'target='_blank'>http://code.google.com/p/lnet/wiki/jQueryStyledSelectOverview[/code]
48.
*


49.
*
Copyright(c)2008LasarLiepins,liepins.org,liepins@gmail.com


50.
*


51.
*
Permissionisherebygranted,freeofcharge,toanypersonobtainingacopy


52.
*
ofthissoftwareandassociateddocumentationfiles(the"Software"),todeal


53.
*
intheSoftwarewithoutrestriction,includingwithoutlimitationtherights


54.
*
touse,copy,modify,merge,publish,distribute,sublicense,and/orsell


55.
*
copiesoftheSoftware,andtopermitpersonstowhomtheSoftwareis


56.
*
furnishedtodoso,subjecttothefollowingconditions:


57.
*


58.
*
Theabovecopyrightnoticeandthispermissionnoticeshallbeincludedin


59.
*
allcopiesorsubstantialportionsoftheSoftware.


60.
*


61.
*
THESOFTWAREISPROVIDED"ASIS",WITHOUTWARRANTYOFANYKIND,EXPRESSOR


62.
*
IMPLIED,INCLUDINGBUTNOTLIMITEDTOTHEWARRANTIESOFMERCHANTABILITY,


63.
*
FITNESSFORAPARTICULARPURPOSEANDNONINFRINGEMENT.INNOEVENTSHALLTHE


64.
*
AUTHORSORCOPYRIGHTHOLDERSBELIABLEFORANYCLAIM,DAMAGESOROTHER


65.
*
LIABILITY,WHETHERINANACTIONOFCONTRACT,TORTOROTHERWISE,ARISINGFROM,


66.
*
OUTOFORINCONNECTIONWITHTHESOFTWAREORTHEUSEOROTHERDEALINGSIN


67.
*
THESOFTWARE.


68.
*


69.
*/


70.


71.
jQuery.fn.styledSelect
=
function
(settings)
{


72.
//SNIPPED


73.
return
this
;


74.
};


Script.js◊
Script.js的用处是存放网站或应用的代码代码。再次说明，这种方式并不总是最佳解决方案，因为更大的团队和/或规模更大、功能更多的项目可以得益于将应用代码分解为模块或功能特性相关的文件。不过，对于较小较简单的应用，以及最初的原型开发，把所有工作集中到scripts.js还是靠谱的。

下面是一个简化了的例子，用到了基于标记的低调全面的DOM-ready执行模式（【译者注】这里的‘低调’原文是Unobtrusive
，是一种将Javascript从HTML结构抽离的设计概念，避免在HTML标签中夹杂一堆onchange、onclick……等属性去挂载Javascript事件，让HTML与Javascript分离，依MVC的原则将功能权责清楚区分，使HTML也变得结构化容易阅读。），看起来会类似于这样：

01.
/*
Name:Demo


02.
Author:
DemoKing*/


03.
/*demo
namespace*/


04.
demo
={

05.
common
:{


06.
init
:
function
(){


07.
//initialize


08.
},


09.
finalize
:
function
(){


10.
//finalize


11.
},


12.
config
:{


13.
prop:
"my
value"
,


14.
constant
:
"42"


15.
}


16.
},


17.
mapping
:{


18.
init
:
function
(){


19.
//create
amap


20.
},


21.
geolocate
:
function
(){


22.
//geolocation
iscool


23.
},


24.
geocode
:
function
(){


25.
//look
upanaddressorlandmark


26.
},


27.
drawPolylines
:
function
(){


28.
//draw
somelinesonamap


29.
},


30.
placeMarker
:
function
(){


31.
//place
markersonthemap


32.
}


33.
}


34.
}


变量，ID及class◊
所有的JavaScript变量必须写成全小写或驼峰法。一个例外是构造器函数，按惯例是首字母大写。所有CSS里的
id
和
class
声明都必须只用小写。不允许用连接符或下划线。

事件代理◊
在分配低调（unobtrusive）的事件监听器时，通常可接受的做法是把事件监听器直接分派给那些会触发某个结果动作的元素。不过，偶尔也会有多个元素同时符合触发条件，给每个元素都分配事件监听器可能会对性能有负面影响。这种情况下，你就应该改用事件代理了。

从性能角度考虑，jQuery的delegate()优于live()。

调试◊
即使采用了最好的校验器，浏览器的怪异性也会不可避免地产生一些问题。有几个堪称无价之宝的工具可以帮助优化代码的健全性和加载速度。很重要的一点是，你手头准备好了这些工具，不管你主要用来开发的浏览器是哪个。我们推荐先在Firefox和Safari上做开发，然后用GoogleChrome和Opera，最后针对IE用条件判断做一些额外的微调。下面列出的是一些有帮助的调试器和速度分析器：

Firefox:Firebug,Page
Speed,YSlow
Safari:Web
Inspector
GoogleChrome:Developer
Tools
Opera:Dragonfly
InternetExplorer6-7:Developer
Toolbar
InternetExplorer8-10:Developer
Tools


优化JavaScript的特征◊
编写可维护的代码
单变量模式
Hoisting：把所有变量声明统一放到函数的起始位置（在后部声明的变量也会被JS视为在头部定义，由此会产生问题）
不要扩充内置原型（虽然给Object(),Function()之类的内置原型增加属性和方法很巧妙，但是会破坏可维护性）
不要用隐含的类型转换
不要用eval()
用parseInt()进行数字转换
（规范）左大括号的位置
构造器首字母大写
写注释
不要用void
不要用with语句
不要用continue语句
尽量不要用位运算

StoyanStefanov的博文包含了以上原则并有详细说明（【译者注】这篇博文值得一看）。




易用性◊
美国政府相关法规508节：局域网和互联网信息及应用标准。

—本公司开发的接口必须符合相关法规508节的要求。

W3C的易用性检查点清单。

—本公司开发的接口必须符合第一优先级指南。

—WCAG1.0指南。




性能◊
当我们持续把web的能力发挥到极致的时候，让网页在最小开销或等待时间下可用依然是同样重要的问题。下面的章节说明如何优化网页使用户满意。


优化CSS和Javascript传输◊
在生产环境传输CSS和Javascript，必须采用很多优化措施：

遵循Yahoo性能指南
使用smush.it对图片进行无损压缩优化。还有，用YSlow可以把你所有的图片自动压缩（【译者注】YSlow不仅仅提供性能优化工具，还详细说明了性能优化的34条规则，例如不要用CSS表达式、不要用空白的src或href、使用CDN、缓存AJAX响应、不要用过滤器、减少DOM元素数量等等）。
不要在HTML中写内联脚本
<script>
块。它们会阻塞页面渲染操作，对页面加载时间带来破坏性的影响。
适当地设置缓存标题。
针对静态资源，考虑单独配置一个无cookie的子域。
CSS必须放在文档的
<head>
部分,Javascript必须正好放在
</body>
标签的前面。
CSS和JavaScript都必须以最小化方式加载。大部分人会使用YUI
压缩器做这件事。
CSS和JavaScript都必须以gzip形式传输。
CSS必须串接在一起。显然，只有具备相同媒体类型（例如屏幕或打印）的文件才能合在一起。这里的总体目标是在加载页面的时候减少因为依赖关系而产生的HTTP连接数。
JavaScript必须串接在一起。虽然用一个AJAX脚本依赖性管理器（类似于YUI3Loader）可能会比较理想，但实施起来还是挺复杂的。在这里我还是想推荐单次下载站点用到的所有脚本。（当然了，适当的缓存也是必需的，这样可以让文件在合理的时间内尽可能保持在本地）。
串接和最小化通常发生在自动build的过程中，这时候要把代码打包用于发布或生产。有很多人用一些工具做这件事，例如Ant或Maven。


优化JavaScript执行◊
在页面加载的时候，通常会有很多脚本等待执行，但你可以设定优先级。下面的顺序就是基于用户反馈设定的优先级：

改变页面视觉习性的脚本绝对要首先执行。这包括任何的字体调整、盒子布局、或IE6pngfix。
页面内容初始化
页面标题、顶部导航和页脚的初始化
绑定事件处理器
网页流量分析、Doubleclick，以及其他第三方脚本


借力CSS精灵◊
CSS精灵（Sprites）基本上就是把一批图片资源合并成单个图片文件。然后每个部分用CSS
background-position
来展现。典型的CSS看起来是这样的

1.
a.expandbox
{
display
:
block
;
width
:
75px
;
height
:
15px
;
text-indent
:
-999px
;
overflow
:
hidden
;


2.
background
:
url
(../img/sprite.png)
no-repeat
-50px
-5px
;
}


接力sprites实现:hover悬停效果是很普遍的。这种情况下你会看到类似于这样的定义：

1.
a.expandbox:hover
{
background-position
:
-50px
-20px
;
}


使用sprites可以减少页面大小，也减少了HTTP连接数，这会加速页面加载。在css-tricks.com上有更多总体性的技术和概述。尽可能地利用CSS
精灵总体来说是一项最佳实践。

除了主要的sprite之外，很多开发者还会使用一个垂直方向的sprite。这个垂直方向的sprite的宽度（以及高度）会小于或等于100px，包含了通常一个挨着一个的图标，诸如列表元素的着重号或对应功能的链接和按钮。Yahoo就用到了一些，例如这个。

有个注意事项就是别把sprite弄得太大，不管是高还是宽超过1000px都会导致用掉大量内存。你可以学习一下使用sprite的时机及内存占用，如果需要了解更多关于创建sprite的总体性提示和技巧，请参阅Mozilla
开发博客。

图片格式◊
你应该会用到四种主要的图片格式，细节如下：

JPEG.–这种格式涵盖了所有基于摄影的图片，例如主页和目录页推销广告图片，或任何颜色数很高的图片。
PNG24.–这种格式在Photoshop里用起来很方便，它输出高颜色数图片，并完全支持像素级的渐变透明度。相对来说，它是相当重量级的格式，达到KB级大小。它也是IE6唯一需要执行pngfix的格式。在那种情况下，本公司推荐使用DD_belatedPNG
脚本（这是一个pngfix，它能修正PNG24在IE6里冒出灰色或浅蓝色背景的问题。它们并不总是和
background-position
兼容）。在很多情况下，你可以使用GIF替代PNG24作为对IE6的应变方案。这在需要用PNG24做sprite的情况下尤其适用。所有的
pngfixes都会特别慢而且开销巨大，所以最好不要用它们。
PNG8.–在256色中可以抓取到如此多样的颜色，所以用JPG之前尝试一下PNG是值得的。而且，PNG比GIF有更高的可压缩度（使用类似pngcrush和pngquant的工具）。这种格式支持在几乎所有浏览器中实现渐变透明度，但在IE6中那些半透明像素会显示为100%透明。不过在很多情况下这也够用了。它也无需运行pngfix脚本，所以对于速度是优化的。Photoshop无法正确输出这些半透明文件，但是Fireworks可以。更多细节请参阅：http://www.sitepoint.com/png8-the-clear-winner/
透明GIF89a.–GIF89a提供透明度的灵活性和广泛的浏览器支持，但也有限制，它不支持渐变透明度和超过256的色深。就我们的经验而言，64的色深就可以提供质量很好的缩略图，并保持相对小的文件大小。所有低颜色数图片，例如图表或主题图形应该用PNG8格式制作，因为它是这四种格式中具有最高文件大小效率的。PNG8是我们对于大部分网站图形的主要推荐方案。

关于PNG格式、浏览器支持以及各种格式优缺点的详细信息可以在这篇优秀的文章中找到。

如需进一步优化所有这些格式，从Yahoo的Smush.It查看图片可以发现缩小它们的办法。

缓存◊
对于静态内容，浏览器应该把文件在本地缓存，在合理的前提下，保留尽可能长的时间。应该较长远期缓存的内容包括：

CSS和JavaScript
产品图片
主题图形
favicon.ico
flash.swf’s
优惠信息图片（可能缓存时间会略短）

为了最佳缓存效果，利用http头部的Expires。下面是一个远期的Expires头，它告诉浏览器这个响应在2015年5月15日之前都无需更新：
Expires:Thu,15Apr201520:00:00GMT


如果你的服务器是Apache，可以使用
ExpiresDefault
指令设置相对当前日期的失效日期。下面的例子设置失效日期为请求时间的一年之后：
ExpiresDefault"accessplus1year"


http头部的Expires必须设为据现在一个月到一年（远期）之间的值。缓存只适用于那个指定的URL，所以文件名或任何资源的改变都会产生一个新的拷贝。很多开发者使用build过程来给它们的资源增加一个版本号或时间戳。每个随后的build会开始一个全新的缓存版本，让你在使用远期缓存日期时无需担心。Google
的这篇文章里有更多关于浏览器缓存的细节信息。

把资源文件跨域分片◊
静态内容当然应该由不同于HTML所在服务器的另一个域提供访问。这是优化的方案，这样对所有静态内容的请求就无需额外的cookies头。而且为整个域编写缓存规则也就容易得多了。（同时，当前域的任何子域会继承当前域的cookies，所以使用全新的域是值得的）。

不过，对于足够多的资源（特别是图片），请求数的增加足以让页面加载变慢。很多浏览器对于他们从每个域能并发下载的资源数有比较低的限制。（在IE6和IE7，这个数字仅仅是2）。在这种情况下，我们可以把资源存放在多个子域，例如：

static1.otherdomain.com
static2.otherdomain.com
static3.otherdomain.com

GoogleSpeed上更多有关域分片的信息

避免用IFRAME◊
Iframe是能添加到指定页面的各种元素中上开销最大的一个。它们会阻塞页面让它无法触发onload事件，直到它们加载完成。有时候它们被其他机构用来处理追踪脚本。例如Doubleclickfloodlight标签就是一个iframe，管理员可以从他们的管理面板向里面增加追踪像素。在加入iFrame的任何情况下，它应该在window的onload事件被触发之后再动态加入到DOM中。更多细节请参阅
Yahoo的性能站点。

第三方集成◊

Omniture◊
我们推荐在页面加载完成（DOMready事件或window的load事件）之后，再用Javascript把OmnitureJavascript代码加入DOM中。通过使用这个技术，可以避免外部域脚本的依赖性，这种依赖性会减慢（并可能挂起）页面加载过程。

Flash◊
在所有情况下，Flash的位置必须有备选的HTML内容，以使SEO值最大化。对于XML驱动的Flash，备选HTML内容必须利用同一个XML文件，以确保数据的一致性。

所有替换内容必须使用SWFObject，但不应加入内联脚本标签。SWFObject的初始化必须在DOMReady事件后触发。最小的播放器版本必须设置为最小v9，以确保AS3兼容性。

跨浏览器性能策略◊
谈到浏览器体验，有两个主要的事实：

每个人都想要可能实现的响应性最好的体验。
加到页面上的所有内容都会使它变慢。

那么，基于这两条人生真谛，我们需要通过什么样的步骤让大家满意呢？

与客户一起确定成功的性能指标◊
这些指标必须针对你的客户和项目来定制，在线框图布局阶段之前完成。这些目标从技术角度必须是合理的，也是可测试的。

可能适用的一些目标

在支持的浏览器中，最慢的那个也必须在5秒钟之内完成从空白缓存到完全加载并初始化的过程。
悬停状态（以及其他实时变化）必须在100毫秒内响应。
动画必须流畅显示，其中跳变发生的时间<15%（包括所有浏览器）。

对于加载时间的目标，定义基准系统是很重要的。类似于PageTest的工具是个好的选择。另外，目标也可以分开多个页面来定义，例如：访问量最大的两个目标网页（比如主页和支持页面）。

如果客户对于意向设计有比合理目标更激进的目标，就必须在整个项目决策委员会中统一期望值，并让项目组了解性能指标是最关键的。

在设计阶段沟通性能的影响◊
内部

在IA、IxD和视觉设计阶段，前端工程师是负责沟通性能对于交互特性的影响或在目标浏览器上采用特定的视觉技术的角色。要给出设计师的限制条件：“如果我们使用Cufon，每个页面上用到定制字体的元素就不能超过10个。”

外部

需要设定期望值：并不是所有的浏览器都有相同的体验。它们的表现不会彼此相同，指望它们的特性完全一样也不现实。在IE7的体验中放弃一些新的特性也许是合理的。会考虑被放弃的一些特性可能是：阴影、过渡、圆角、透明度、渐变色。

当沟通某件事的影响时

尽可能详细地明确影响程度：“这对页面加载有害”vs“这会在IE中增加2秒的页面加载时间“
如有可能，提供快捷的概念验证（ProofofConcept）：”没有siFR的相似页面在2秒钟内加载，而用了siFR的用了8秒，而且在滚动时有延迟“


遵循最佳实践进行开发◊
选择那些性能优化的库和插件。基于性能目标做出明智的架构决定。同时在可能的前提下尽量减少DOM操作，设计样式要让页面在加载和初始化的时候避免视觉变化。

在QA流程中评估性能◊
QA团队也应该把性能相关的因素和视觉、功能和可用性问题放在一起来确定优先级。开发者和QA必须确定如何分配优先级。在QA过程中，成功的指标必须定期测试。

测试用的工具

YSlow,Page
Speed,Hammerhead,MSFast,PageTest

如果性能指标没有达到，有三个选择：

代码返工–重做架构，发现瓶颈，重构代码，优化指标让系统在浏览器里更快执行
放弃该特性–只对较慢的浏览器关闭它
重新设计用户交互方式–也许新的设计会有一招搞定问题的办法

我们认为，通过这个方法，在应对性能挑战的过程中，项目相关各方都有更好的机会统一期望，共同前进，并形成更加行之有效的工作流程。




浏览器测试和支持◊
今天的用户可以从相当大的范围中选择web浏览器，每种浏览器都提供了略微（或相当）不同的体验。作为开发者，我们的责任恰恰是选择我们创建的网页展示给用户的方式。本节描述我们是如何做出这当中的一些决定的。


我们支持的浏览器◊


Isobar支持任何Yahoo
浏览器支持分级中列出的A级浏览器，除了Opera之外。对此也可能会有其他的例外，基于地区市场和它们特定的指标。

我们会努力支持任何客户指定的其他任务关键浏览器(IE5.5,Opera,Konqueror,Safari3onPC,等等)，虽然我们不能保证所有功能都可能实现。

我们的测试方式◊
全面的浏览器测试对于每个web项目都是必须的。必须付出大量精力进行跨浏览器和平台测试，以确保质量和一致的用户体验。配置测试环境会是一项挑战，却是值得去做的。

在MicrosoftWindows上的测试◊

IE测试◊

由于不可能在一台PC上安装多于一个IE浏览器，IE的测试是个挑战。幸好微软最终提供了老版本IE的开发版下载。这些运行拆解版MicrosoftWindows的虚拟磁盘时不时地失效（过期）。通常隔几个月就需要重新设置它们。从你的MSD版权（如果有）获取的MicrosoftWindows开发版也会是一个选择，取决于你能够获取到的东西。

虚拟
PC–虚拟PC必须安装在你的计算机上，如果你用的是Windows7，你必须使用”XP模式”。
Microsoft
WindowsVPC映像–有多种虚拟磁盘映像，你可能需要安装多个以构成全面的测试环境，这取决于你的项目。

此外，其他不是那么有效的IE测试选项（通常是不推荐的）包括了IETester，它还是好于Multiple_IE和IE7
standalone。

Firefox◊

Firefox
3.6+也必须安装在本地–以及通过移动应用获取的3.0版本。
如果你能胜任，安装
Firefox3,3.5,和/或3.6版，和FF4安装在一起。Firefox配置管理器允许你安装到不同的目录并为每个版本保持不同的配置文件。


PC版Safari◊

使用最新的PC版Safari版本.它和
OSX版的Safari的一致性达到98%，但不是完全一致，所以如果它是必需的平台就需要测试。


Opera◊

你可以下载存档的旧版本。要运行多个版本，可以把它们安装到不同的文件夹中。


GoogleChrome和Chrome版本◊

GoogleChrome会自动更新，正常情况下绝大部分用户都会有最新版本。要是每种浏览器都这样多好啊。对于GoogleChrome就不需要担心旧版本的问题了。

在MacOSX上的测试◊
对于核心的MacOSX浏览器，MozillaFirefox,GoogleChrome和AppleSafari提供的浏览体验基本和它们的Windows版本一样。尽管如此，某些操作系统级的差异还是会出现，网站必须在两个平台上进行测试。典型的差异是关于字体渲染，所以有时候会冒出间距问题。

测试在Mac上安装的Windows环境◊

在MacOSX上测试基于Windows的浏览器有几种选择。首先，Mac提供了一个“bootcamp”分区，它允许你在Mac
上启动一个MicrosoftWindows分区。这是一个复杂但完整的测试环境。一旦你用Windows启动，就可以用通常Windows环境下的测试方法。

其他选择包括在MacOSX内部虚拟化Windows，让你可以在MacOS内部运行Windows。

Microsoft虚拟磁盘在这里的大部分选择中是可以打开或转换的，这样就能在一定程度上利用Windows用户可以用到的那些测试方法。即使你也可以同时在Mac上测试，有些人还是会认为这样更加灵活…

Parallels–
Parallels可用，而且可能已经被本公司IT部安装到你的Mac上了。
VMWare
Fusion–VMWareFusion通过它们的Fusion产品提供了同一级别的Windows虚拟化。


MozillaFirefox◊

正如在Windows上一样，你可以在一台Mac上安装和运行MozillaFirefox的多个拷贝，虽然通过配置管理器设置多个配置更为复杂一些。尽管如此，你可以通过一些小技巧，通过Automator程序创建分开的配置并顺利运行它们。

IEstandalone版会出现的bug◊
注意：IE6standalone版在某些情况下对透明度的实现是有bug的。这会导致任何应用于CSS过滤器的透明度（例如alpha透明度或者24位PNG）失效。在这种情况下必须测试透明度，你会需要本地安装的IE6。

还有人发现安装在Vista平台上的IE7和WindowsXP上的IE7确实有差异，所以，你可能会希望确保团队中的某个人也有这种配置。IETester修复了一批这样的问题，和Xenocode
浏览器的做法类似。

浏览器分辨率◊
除了适应各种浏览器，开发者还必须持续注意用户的屏幕分辨率。随着显示器屏幕越来越大，分辨率的广度也随之增加。下面是关于分辨率的一些工作准则。

1024px分辨率

估算的折叠位置在570px处。
优化宽度：960px–在两侧留出合适的内边距，960可以被很多数字整除，而且能够很好地配合IAB
广告的标准宽度
增大宽度：970px–在大部分浏览器中还会留出一些内边距。这个数字和黄金比例吻合得比较好
最大宽度：996px–在主流浏览器中还不会产生水平滚动条。基于此处的研究，如果你不希望出现水平滚动条，宽度的最大值是
1003px。

关于窗口大小的当前统计

真没劲–
1024px分辨率下的优化宽度？
浏览器、操作系统和搜索引擎的市场占有率
全球Web统计

不过，系统分辨率和浏览器尺寸并不是一样的

浏览器尺寸很重要
–实际数据|mentalized.net
我需要支持什么样的尺寸
|baekdal.com
调查结果：
只有50.4%的受访者会把浏览器窗口最大化
屏幕分辨率和页面布局




搜索引擎优化（SEO）◊
良好的web设计和开发的一个重要部分就是SEO。要想确保一个网页不仅能让搜索引擎合适地索引到，而且能让那些只有有限的web能力的人访问到，结构良好的代码是其中的关键。


注意SEO最佳实践◊
打印媒体
CSS的最佳实践。
站点/应用符合浏览器分辨率指南。
站点/应用兼容浏览器测试与支持描述的浏览器需求。
注意可用性最佳实践，例如508法规和WCAG标准

http://www.section508.gov
http://www.w3.org/TR/WCAG20/.


易于索引◊
你必须使用语义化的标记，在关闭Javascript和CSS之后它仍然是可读和逻辑的。所有页面内容必须是HTML形式；我们不希望使用iframe或Javascript来加载初始的可索引内容。
所有链接都必须指向HTML

1.
<
a
href
=
"/shelf/jordan/page/2"
>


而不是这种

1.
<
a
href
=
"javascript:loadPage(2);"
>


这样既能被搜索引擎正确索引，也能让用户在新窗口或新标签中打开链接。

优化◊
每个页面的title标签应该突出目标关键字。每个页面的title应该是独特的。标题（h1,h2,等等）应该构成文档的轮廓并代表该页面最重要的关键字。URL应该是人类可读的，其中包含主要的目标关键字：
http://domain.com/mens-shoes/basketball/jordan/jordan-mens-ajf-6-basketball-shoe/


vs
http://domain.com/ecomm.cfm?view=prod&prodId=23425


Flash和图片替换◊
总是为flash使用备选HTML内容。所有广告促销图片应该使用基于CSS的替代图片而不仅仅设定alt属性。
>对不支持flash版本的应变

<
a
href
=
"/nike/morethanagame/"
id
=
"morethan"
>


<
h4
>Nike:
MoreThanAGame</
h4
>


<
h5
>Experience
themovementandviewapparel</
h5
>


</
a
>


a#more
than{
background
:
url
(/promos/nikegame.jpg)
no-repeat
;
width
:
200px
;
height
:
100px
;


text-indent
:
-999px
;
overflow
:
hidden
;
display
:
block
;
}





附录◊
下面是引用、工具和其他与本文档相关的内容。

（【译者注】下面的内容以链接为主，是一些辅助性的材料，这次就不翻译了。如有不理解的内容，可与本人联系。）


附录A:校验器◊
W3CCSSValidation
Service
HTML
Validationfirefoxextension
CSSvalidator
Accessibility–BobbyValidation
Service

TestsindividualpagesforaccessibilityagainsteithertheW3CorSection508standards.

Accessibility–CynthiaSays
Portal

SimilartoBobby,testsindividualpagesforaccessibilityagainsteithertheW3CorSection508standards.


GoogleChrome扩展◊

FirebugLite.

HTML5Outliner.

Pendule.

WebDeveloper.



Opera扩展◊
DragonflyisOpera’sdevelopertoolsimilartoFirebug.

IE插件◊
CompanionJS,DebugBar,IE8Devtools.

Charles代理◊
Charleswatchesallrequestsandcantellyoualotofinformationaboutthem.Also
supremelyusefulisMapLocalwhichletsyouusealocalfileinplaceofagivenURL(goodforreplacingaminifiedjswithafullone).

Fiddler◊
Fromthesite:“FiddlerisaWebDebuggingProxywhichlogsallHTTP(S)traffic
betweenyourcomputerandtheInternet.Fiddlerallowsyoutoinspecttraffic,setbreakpoints,and“fiddle”withincomingoroutgoingdata.Fiddlerincludesapowerfulevent-basedscriptingsubsystem,andcanbeextendedusingany.NETlanguage.”

Speedlimit◊
SpeedlimitisaLeopard(worksinsnowleopard)preferencepaneforlimitingyournetwork
bandwidthtooneofacoupledifferentspeeds—768kDSL,Edge,3G,andDialup.Goodfortestingyourlowestsupportedspeedsorwhenyouwanttoknowhowyourappwillfunctioninrealworldspeeds.