Web design standards checklist
Quite simply, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly.
This is not an uber-checklist. There are likely many items that may be added. Moreover, it must not be viewed as a list of items that must be addressed on every site that you develop. It’s only a guide that can be used:
* to show the breadth of web standards
* as a helpful tool for developers during the production phase of websites
* as an aid for developers who have an interest in moving towards web standards
The checklist
1.Quality of code
1. Does the website use a correct Doctype?
2.Does the site use ids or unneeded classes?
3.Does the site have any links that are broken?
4.How can the site perform in terms of speed/page size?
5.Does the website have JavaScript errors?
6. Amount of separation between presentation and content
7. Availability for users
8. Are “alt” attributes used for all descriptive images?
9. Does the website use menus that are visible jump?
10. Does the site use forms that are accessible?
2. Does the site function in text browsers such as for instance Lynx?
1.Does the website function nicely in Hand Held devices?
2. Does the site include detailed metadata?
3. Does the site function well in a range of browser window sizes?
1. Fundamental Usability
2.Can there be a clear visual hierarchy?
3. Are degrees that are heading easy to recognize?
4. Does the website have easy to comprehend navigation?
5. Does the site use consistent navigation?
6.Does the site use language that is appropriate and consistent?
7. Have you got contact page and a sitemap page? Are they easy to find?
8. For large sites, is there a search?
9.Will there be a link to the house page on every page in the website?
10. Are visited links clearly defined with an unique colour?
4. Site direction
1. Does the site have a helpful and meaningful 404 error page that functions from any depth in the site?
2. Is there adequate colour brightness/contrasts?
3.Is colour used for critical info?
4. Are all links illustrative (for blind users)?
5. Accessibility for apparatus
6. Does the website work across older browsers and modern?
7. Does the site use friendly URLs?
8. Does the site have a favicon?
1.1 Does the website use a right Doctype?
Tool: http://www.w3.org/QA/2002/04/valid-dtd-list.html
1.2 Does the website use a Character set?
a browser) is unable to find the character encoding used in a Web document, the user may be presented with unreadable text. This information is especially important for those keeping and extending a multilingual website, but declaring the character encoding of the document is essential for anyone producing XHTML/HTML or CSS.
Tool: http://www.w3.org/International/tutorials/tutorial-char-enc/
Tool: http://www.w3.org/International/O-charset.html
Valid code will render better than invalid code. Browsers are getting to be more standards compliant, and it’s also becoming necessary to write valid and standards compliant.
Tool:http://validator.w3.org/
1.4 Does the site use Valid CSS?
You have to make sure there are not any errors in your CSS or your HTML, since mistakes in either location can result in document appearance that is botched.
Tool: http://jigsaw.w3.org/css-validator/
1.5 Does the website use any CSS hacks?
Basically, hacks come down to personal choice, the quantity of knowledge you have the specific design you’re attempting to achieve, of workarounds.
1.6 Does the website use unnecessary classes or ids?
I have found that developers learning new skills frequently end up with great CSS but inferior XHTML. Specifically, the HTML code is often filled with unneeded divs and ids. This results in style sheets that are bloated and fairly meaningless HTML.
1.7 Is it built on Semantic markup?
Semantically right markup uses html components for their specified function.
Tool :http://www.w3.org/2003/12/semantic-extractor.html
1.8 Does the website have any broken ? that are links
Users gets frustrated and possibly leave your site away if the link doesn’t work. Also, broken links can also keep search engines from properly indexing your site.
Tool: http://validator.w3.org/checklink
1.9 How does the website perform in terms of speed/page size?
Don’t make me wait… That is the message we are given by users in survey after survey. Broadband users can suffer the slow-loading blues.
Tool – https://developers.google.com/speed/pagespeed/insights/
1.10 Does the website have JavaScript errors?
Internet Research for Windows lets you turn on a debugger that allow you to understand there are javascript errors in your website and will pop up a fresh window.
2. Amount of separation between display and content
Tool – http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-style-sheets
The purpose for web developers would be to remove all display errors in the html code, leaving it correct and clean.
Try this easy test. Look in a browser that supports simple increments of font size at your web site. Now raise the font size of your browser. And again. And again, Look at your website. Does the page layout holds good? It’s not safe for programmers to presume that everybody browses using default font sizes.
3.4 Does the website use observable jump menus?
Refer – http://www.w3.org/TR/WCAG10-TECHS/#tech-group-links
Forms are not the simplest of things to use for individuals with handicaps.
http://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.html
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-table-headers
3.7 Is there adequate colour brightness/contrasts?
Refer – http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-contrast
3.8 Is colour alone for vital ? that is info
Ensure that information conveyed with colour can also be available without colour, for example.
Refer – http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-convey
3.10 Are all illustrative?
Link text should be significant enough to make sense when read – either by itself or included in a sequence of links. Link text also needs to be terse.
Refer – http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-meaningful-links
4. Availability for apparatus.
4.1 Does the website work acceptably across modern & old browsers?
Before beginning to construct a CSS-based layout, you should determine to what degree you mean to support them and which browsers to support.
Your website may be visited by a number of people with a browser that doesn’t support CSS or a browser with CSS. In content is structured nicely, this is not going to be a problem.
A number of people browse sites with images switched off – particularly individuals on slow connections. Content still ought to be reachable for these individuals.
4.4 Does the website work in text only browser?
That is like a mix of CSS and pictures switched off. A text-based browser (lynx) will rely on content that was nicely organized to supply significance.
It’s possible for you to take any (X)HTML doc and just fashion it for print, without needing to reach the markup.
This really is a difficult one to cope with until hand held apparatus support their media type that is right. Nevertheless, some layouts function better in present handheld apparatus.
4.7 Does the website contain comprehensive metadata?
Refer – http://www.w3.org/Metadata/
Metadata is structured information which is created especially to describe another resource.
4.8 Does the website work well in a variety of browser window sizes?
It’s a typical assumption amongst programmers that typical display sizes are raising. Some programmers presume the typical screen size is 1024px wide. But what about users with users and smaller screens with hand held devices?
5. Fundamental Usability
5.2 Are heading degrees simple to recognize?
Refer – http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-logical-headings
5.3 Is the the simple of website’s to comprehend?
5.4 Is the the consistent of website’s?
Visitors will find it simpler to browse between pages and locate tips if each page on your own website has a consistent style of presentation
5.5 Does the website use consistent language?
The utilization of simple and clear language promotes effective communication. Attempting to run into as articulate can not be easy to read as grammar that is badly written, particularly when the language used is not the visitor’s primary language.
5.6 Does the website have a page? contact sitemap page and Are they easy to locate?
Most site maps don’t convey multiple levels of the information architecture of the website.
5.7 For big websites, is there a search program?
Some folks is not going to use them, and while search tools will not be wanted on smaller websites, site-specific search tools let users a choice of navigation choices.
5.8 Is there a link to every page in the website?
Users like to return to the home page of a website after browsing to content within a website. So have a better navigation structure to Homepage
5.10 Are seen links clearly
Most significant, understanding which pages they have already seen frees users.
6. Website direction
You have requested a page – by typing an URL into the address bar or clicking on an out of date link and you have found yourself at the center of cyberspace nowhere.
6.2 Does the website use friendly URLs?
Among the worst components of the net from an user interface point of view is the URL. Yet, if they are not long, rational, and self-correcting, URLs can be useable
In case a user gets no website and types your domain name with no www, this could disadvantage both you and the user.
6.4 Does the website have a favicon?
Favicons are undoubtedly not essential. But if they aren’t present, they are able to cause 404 errors in your logs (website data). A 404 error may be created if a favicon is not accessible.