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