http://terrymorris.net/bestpractices/
Web Design Best Practices ChecklistBackground Information
* URL:
* Target Audience:
* Purpose:
Page Layout 页面布局
1. ❏ Appealing to target audience
2. ❏ Consistent site header/logo 统一网站logo
3. ❏ Consistent navigation area 统一导航区域
4. ❏ Informative page title that includes the company/organization/site name 让人一目了然的网页标题，包括公司、组织、网站的名称
5. ❏ Page footer area includes copyright, last update, contact e-mail address 页脚区域——版权信息、上一次更新信息、联系人的邮件地址
6. ❏ Good use of basic design principles: repetition, contrast, proximity, and alignment 良好的基本设计原则：重复、对比、近似和对齐
7. ❏ Displays without horizontal scrolling at 1024×768 and higher resolutions 在1024*768或更高分辨率显示时不需要水平滚动
8. ❏ Balance of text/graphics/white space on page 在页面中的文本、图片、空白均匀分布
9. ❏ Good contrast between text and background
10. ❏ Header and nav occupy less than ¼ to ⅓ of the browser at 1024×768 resolution 1024*768分辨率下，重复信息（标题、标识横幅和导航区）所占区域不超过浏览器窗口的1/4-1/3
11. ❏ Home page has compelling, interesting information above the fold at 1024×768 1024*768分辨率下，主页第一屏包含吸引人的、有趣的信息
12. ❏ Home page downloads within ten seconds on dial-up connection 使用拨号连接时，主页在10s内下载完毕
13. ❏ Viewport meta tag is used to enhance display on smartphones
14. ❏ Media queries configure responsive page layout for smartphone and tablet display
Browser Compatibility
1. ❏ Displays on popular/current versions of Internet Explorer
2. ❏ Displays on current versions of Firefox
3. ❏ Displays on current versions of Google Chrome
4. ❏ Displays on current versions of Opera
5. ❏ Displays on current versions of Safari (both Mac and Windows)
6. ❏ Displays on popular mobile devices (including tablets and smartphones)
Navigation
1. ❏ Main navigation links are clearly and consistently labeled 主导航链接标签清晰且统一
2. ❏ Navigation is easy to use for target audience 目标受众能够方便的使用导航功能
3. ❏ If main navigation uses images/Flash , clear text links are in the footer section of the page 如果主导航区域使用了图片和多媒体，应在页脚提供清晰的文本链接（无设计障碍）
4. ❏ Navigation is structured in an unordered list
5. ❏ Navigation aids, such as site map, skip navigation link, or breadcrumbs are used 提供导航协助，比如站点地图、“跳至内容”链接或者面包屑路径
6. ❏ All navigation hyperlinks "work" — are not broken
Color and Graphics 颜色和图片
1. ❏ Color scheme is limited to a maximum of three or four colors plus neutrals 在页面背景/文本中使用最多三四种颜色
2. ❏ Color is used consistently 颜色的使用要和谐一致
3. ❏ Text color has sufficient contrast with background color 文本颜色具有良好对比度
4. ❏ Color is not used alone to convey meaning 不要单独靠颜色来表达信息（无障碍设计)
5. ❏ Use of color and graphics enhances rather than distracts from the site 颜色和图片的使用能够改善网站，而不是分散访问者的注意力
6. ❏ Graphics are optimized and do not significantly slow download 图片经过优化，不会明显拖慢下载速度
7. ❏ Each graphic used serves a clear purpose 使用的每张图片都有清楚的目的
8. ❏ Image tags use the alt attribute to configure an alternate text description img标记要用alt属性设置在浏览器或用户代理不支持图片的情况下显示的替代文本（无障碍设计）
9. ❏ Animated images do not distract from the site and do not endlessly repeat 动画图像不好使访问者分散注意力，要么不重复播放，要么只重复几次就可以了
Multimedia 多媒体
1. ❏ Each audio/video/Flash file used serves a clear purpose 所使用的每个音频/视频/Flash文件都有清楚的目的
2. ❏ The audio/video/Flash files used enhance rather than distract from the site 所使用的每个音频/视频/Flash文件能够改善网站，而不是分散访问者的注意力
3. ❏ Captions are provided for each audio or video file used 所使用的每个音频或视频文件提供文件提供文字旁白，即caption（无障碍设计）
4. ❏ Download times for audio or video files are indicated 标示了音频或视频文件的下载时间
5. ❏ Links to downloads for media plug-ins are provided 提供多媒体插件的下载地址
Content Presentation
1. ❏ Common fonts such as Arial or Times New Roman are used 使用常用字体，如Arial或Times New Roman。中午使用宋体或微软雅黑
2. ❏ No more than one web font is used
3. ❏ Techniques of writing for the Web are used: headings, bullet points, brief paragraphs 应用了Web写作技术：标题、项目列表、短段落和短句、空白等
4. ❏ Fonts, font sizes, and font colors are consistently used 统一字体、字号和字体颜色
5. ❏ Content provides meaningful, useful information 网页内容提供了有意义和有用的信息
6. ❏ Content is organized in a consistent manner 使用统一的方式组织内容
7. ❏ Information is easy to find (minimal clicks) 信息查找容易（最少点击）
8. ❏ Timeliness: The date of the last revision and/or copyright date is accurate 要提示时间：上次修订和版权日期要准确
9. ❏ Content does not include outdated material
10. ❏ Content is free of typographical and grammatical errors 页面内容没有排版或语法错误
11. ❏ Content provides links to other useful sites
12. ❏ Avoids the use of "Click here" when writing text for hyperlinks 添加超链接文本时，避免“点击这里”的说法
13. ❏ Hyperlinks use a consistent set of colors to indicate visited/nonvisited status 如果没有使用标准链接颜色，必须统一设置一套颜色以表明链接的已访问/未访问状态
14. ❏ If graphic /media is used to convey meaning, the alternate text equivalent is provided 如果使用了图片和多媒体，同时提供与该内容等价的替代文字（无障碍设计）
Functionality
1. ❏ All internal hyperlinks work 所有内部链接都正常工作
2. ❏ All external hyperlinks work 所有外部链接都正常工作
3. ❏ All forms function as expected 所有表单能像预期的那样工作
4. ❏ No JavaScript errors are generated 网页不会产生Java Script错误
Accessibility
1. ❏ If main navigation uses images, text links are in the footer section of the page
2. ❏ If main navigation uses Flash, text links are in the footer section of the page
3. ❏ Navigation is structured in an unordered list
4. ❏ Navigation aids, such as site map, skip navigation link, or breadcrumbs are used
5. ❏ Color is not used alone to convey meaning
6. ❏ Text color has sufficient contrast with background color
7. ❏ Image elements use the alt attribute to configure an alternate text description
8. ❏ If graphics are used to convey meaning, the alternate text equivalent is provided
9. ❏ If media is used to convey meaning, the alternate text equivalent is provided
10. ❏ Captions are provided for each audio or video file used
11. ❏ Use attributes designed to improve accessibility such as title when appropriate
12. ❏ Use the id and headers attributes to improve the accessibility of table data
13. ❏ Configure frames with frame titles and place meaningful content in the noframes area
14. ❏ The html element's lang attribute indicates the spoken language of the page
15. ❏ The role attribute indicates ARIA landmark roles
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
