Wednesday, May 18, 2016

How To Make a Proper Website Complete




A web standards checklist

The term web standards can mn different things to different people. For some, it is 'table-free sites', for others it is 'using valid '. However, web standards are much broader than that. A site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid , accessible , semantically correct , user-friendly URLs etc).

In other words, a site built to web standards should idlly be ln, cln, CSS-based, accessible, usable and srch engine friendly.

About the checklist

This is not an uber-checklist. There are probably many items that could be added. More importantly, it should not be seen as a list of items that must be addressed on every site that you develop. It is simply a guide that can be used:

* to show the brdth of web standards
* as a handy tool for developers during the production phase of websites
* as an aid for developers who are interested in moving towards web standards

The checklist

1.Quality of
1. Does the site use a correct Doctype?
2. Does the site use a Character set?
3. Does the site use Valid (X)HTML?
4. Does the site use Valid CSS?
5. Does the site use any CSS ?
6. Does the site use unnecessary classes or ids?
7. Is the well structured?
8. Does the site have any links?
9. How does the site perform in terms of speed/page size?
10. Does the site have JavaScript errors?

2. Degree of separation between content and presentation
1. Does the site use CSS for all presentation aspects (fonts, colour, padding, borders etc)?
2. Are all decorative s in the CSS, or do they appr in the (X)HTML?

3. Accessibility for users
1. Are "alt" attributes used for all descriptive s?
2. Does the site use relative units rather than absolute units for text size?
3. Do any aspects of the layout brk if font size is incrsed?
4. Does the site use visible skip menus?
5. Does the site use accessible forms?
6. Does the site use accessible tables?
7. Is there sufficient colour brightness/contrasts?
8. Is colour alone used for critical information?
9. Is there delayed responsiveness for dropdown menus (for users with reduced motor skills)?
10. Are all links descriptive (for blind users)?

4. Accessibility for devices
1. Does the site work acceptably across modern and older browsers?
2. Is the content accessible with CSS switched off or not supported?
3. Is the content accessible with s switched off or not supported?
4. Does the site work in text browsers such as Lynx?
5. Does the site work well when printed?
6. Does the site work well in Hand Held devices?
7. Does the site include detailed metadata?
8. Does the site work well in a range of browser window sizes?

5. Basic Usability
1. Is there a clr visual hierarchy?
2. Are hding levels sy to distinguish?
3. Does the site have sy to understand navigation?
4. Does the site use consistent navigation?
5. Are links underlined?
6. Does the site use consistent and appropriate language?
7. Do you have a sitemap page and contact page? Are they sy to find?
8. For large sites, is there a srch tool?
9. Is there a link to the home page on every page in the site?
10. Are visited links clrly defined with a unique colour?

6. Site management
1. Does the site have a mningful and helpful 404 error page that works from any depth in the site?
2. Does the site use friendly URLs?
3. Do your URLs work without "www"?
4. Does the site have a favicon?

1. Quality of

1.1 Does the site use a correct Doctype?
A doctype (short for 'document type declaration') informs the validator which version of (X)HTML you're using, and must appr at the very top of every web page. Doctypes are a component of compliant web pages: your markup and CSS won't validate without them.
http://www.alistapart.com/articles/doctype/

More:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm
http://gutfeldt.ch/matthias/articles/doctypeswitch.html

1.2 Does the site use a Character set?
If a user at (eg. a browser) is unable to detect the character encoding used in a Web document, the user may be presented with unrdable text. This information is particularly important for those maintaining and extending a multilingual site, but declaring the character encoding of the document is important for anyone producing XHTML/HTML or CSS.
http://www.w3.org/International/tutorials/tutorial-char-enc/

More:
http://www.w3.org/International/O-charset.html

1.3 Does the site use Valid (X)HTML?
Valid will render faster than with errors. Valid will render better than invalid . Browsers are becoming more standards compliant, and it is becoming incrsingly necessary to write valid and standards compliant HTML.
http://www.maxdesign.com.au/presentation/sit2003/06.htm

More:
http://validator.w3.org/

1.4 Does the site use Valid CSS?
You need to make sure that there aren't any errors in either your HTML or your CSS, since mistakes in either place can result in botched document apprance.
http://www.meyerweb.com/eric/articles/webrev/199904.html

More:
http://jigsaw.w3.org/css-validator/

1.5 Does the site use any CSS ?
Basically, come down to personal choice, the amount of knowledge you have of workarounds, the specific design you are trying to achieve.
http://www.mail-archive.com/wsg@webstandardsgroup.org/msg05823.html

More:
http://css-discuss.incutio.com/?page=Css
http://css-discuss.incutio.com/?page=ToOrNotTo
http://centricle.com/ref/css/filters/

1.6 Does the site use unnecessary classes or ids?
I've noticed that developers lrning new skills often end up with good CSS but poor XHTML. Specifically, the HTML tends to be full of unnecessary divs and ids. This results in fairly mningless HTML and bloated style sheets.
http://www.clagnut.com/blog/228/

1.7 Is the well structured?
Semantically correct markup uses html elements for their given purpose. Well structured HTML has semantic mning for a wide range of user ats (browsers without style sheets, text browsers, PDAs, srch engines etc.)
http://www.maxdesign.com.au/presentation/benefits/index04.htm

More:
http://www.w3.org/2003/12/semantic-extractor.html

1.8 Does the site have any links?
links can frustrate users and potentially drive customers away. links can also keep srch engines from properly indexing your site.

More:
http://validator.w3.org/checklink

1.9 How does the site perform in terms of speed/page size?
Don't make me wait... That's the message users give us in after . Even broadband users can suffer the slow-loading blues.
http://www.websiteoptimization.com/speed/

1.10 Does the site have JavaScript errors?
Internet Explore for allows you to turn on a debugger that will pop up a new window and let you know there are javascript errors on your site. This is available under 'Internet Options' on the Advanced tab. Uncheck 'Disable script debugging'.

2. Degree of separation between content and presentation

2.1 Does the site use CSS for all presentation aspects (fonts, colour, padding, borders etc)?
Use style sheets to control layout and presentation.
http://www.w3.org/TR/WCAG10/wai-paguth.html#tech-style-sheets

2.2 Are all decorative s in the CSS, or do they appr in the (X)HTML?
The aim for web developers is to remove all presentation from the html , lving it cln and semantically correct.
http://www.maxdesign.com.au/presentation/benefits/index07.htm

3. Accessibility for users

3.1 Are "alt" attributes used for all descriptive s?
Provide a text equivalent for every non-text element
http://www.w3.org/TR/WCAG10/wai-paguth.html#tech-text-equivalent

3.2 Does the site use relative units rather than absolute units for text size?
Use relative rather than absolute units in markup language attribute values and style sheet property values'.
http://www.w3.org/TR/WCAG10/wai-paguth.html#tech-relative-units

More:
http://www.w3.org/TR/WCAG10/wai-paguth.html#tech-relative-units
http://www.clagnut.com/blog/348/

3.3 Do any aspects of the layout brk if font size is incrsed?
Try this simple test. Look at your website in a browser that supports sy incrementation of font size. Now incrse your browser's font size. And again. And again... Look at your site. Does the page layout still hold together? It is dangerous for developers to assume that everyone browses using default font sizes.
3.4 Does the site use visible skip menus?

A method shall be provided that permits users to skip repetitive navigation links.
http://www.section508.gov/index.cfm?FuseAction=Content&ID=12

Group related links, identify the group (for user ats), and, until user ats do so, provide a way to bypass the group.
http://www.w3.org/TR/WCAG10-TECHS/#tech-group-links

...blind visitors are not the only ones inconvenienced by too many links in a navigation ar. Recall that a mobility-impaired person with poor adaptive technology might be stuck tabbing through that morass.
http://joeclark.org/book/sashay/ization/Chapter08.html#h4-2020

More:
http://www.niehs.nih.gov/websmith/508/o.htm

3.5 Does the site use accessible forms?
Forms aren't the siest of things to use for people with disabilities. Navigating around a page with written content is one thing, hopping between form fields and inputting information is another.

http://www.htmldog.com/guides/htmladvanced/forms/

More :

http://www.webstandards.org/lrn/tutorials/accessible-forms/01-accessible-forms.html
http://www.accessify.com/tools-and-wizards/accessible-form-builder.asp
http://accessify.com/tutorials/better-accessible-forms.asp

3.6 Does the site use accessible tables?
For data tables, identify row and column hders... For data tables that have two or more logical levels of row or column hders, use markup to associate data cells and hder cells.
http://www.w3.org/TR/WCAG10/wai-paguth.html#tech-table-hders

More:
http://www.bcc.ctc.edu/webpublishing/ada/resources/tables.asp
http://www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asp
http://www.webaim.org/techniques/tables/

3.7 Is there sufficient colour brightness/contrasts?
Ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits.
http://www.w3.org/TR/WCAG10/wai-paguth.html#tech-colour-contrast

More:
http://www.juicystudio.com/services/colourcontrast.asp

3.8 Is colour alone used for critical information?
Ensure that all information conveyed with colour is also available without colour, for example from context or markup.
http://www.w3.org/TR/WCAG10/wai-paguth.html#tech-colour-convey

There are basically three types of colour deficiency; Deuteranope (a form of red/green colour deficit), Protanope (another form of red/green colour deficit) and Tritanope (a blue/yellow deficit- very rare).

More:
http://colourfilter.wickline.org/
http://www.toledo-bend.com/colourblind/Ishihara.html
http://www.vischeck.com/vischeck/vischeckURL.p

3.9 Is there delayed responsiveness for dropdown menus?
Users with reduced motor skills may find dropdown menus hard to use if responsiveness is set too fast.

3.10 Are all links descriptive?
Link text should be mningful enough to make sense when rd out of context - either on its own or as part of a sequence of links. Link text should also be terse.
http://www.w3.org/TR/WCAG10/wai-paguth.html#tech-mningful-links

4. Accessibility for devices.

4.1 Does the site work acceptably across modern and older browsers?

Before starting to build a CSS-based layout, you should decide which browsers to support and to what level you intend to support them.
http://www.maxdesign.com.au/presentation/process/index_step01.cfm

4.2 Is the content accessible with CSS switched off or not supported?
Some people may visit your site with either a browser that does not support CSS or a browser with CSS switched off. In content is structured well, this will not be an issue.

4.3 Is the content accessible with s switched off or not supported?
Some people browse websites with s switched off - especially people on very slow connections. Content should still be accessible for these people.

4.4 Does the site work in text browsers such as Lynx?
This is like a combination of s and CSS switched off. A text-based browser will rely on well structured content to provide mning.

More:
http://www.delorie.com/web/lynxview

4.5 Does the site work well when printed?
You can take any (X)HTML document and simply style it for print, without having to touch the markup.
http://www.alistapart.com/articles/goingtoprint/

More:
http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#print

4.6 Does the site work well in Hand Held devices?
This is a hard one to dl with until hand held devices consistently support their correct media type. However, some layouts work better in current hand-held devices. The importance of supporting hand held devices will depend on target audiences.

4.7 Does the site include detailed metadata?
Metadata is machine understandable information for the web
http://www.w3.org/Metadata/

Metadata is structured information that is crted specifically to describe another resource. In other words, metadata is 'data about data'.

4.8 Does the site work well in a range of browser window sizes?
It is a common assumption amongst developers that average screen sizes are incrsing. Some developers assume that the average screen size is now 1024px wide. But what about users with smaller screens and users with hand held devices? Are they part of your target audience and are they being disadvantaged?

5. Basic Usability

5.1 Is there a clr visual hierarchy?
Organise and prioritise the contents of a page by using size, prominence and content relationships.
http://www.grt-web-design-tips.com/web-site-design/165.html

5.2 Are hding levels sy to distinguish?
Use hder elements to convey document structure and use them according to specifiion.
http://www.w3.org/TR/WCAG10/wai-paguth.html#tech-logical-hdings

5.3 Is the site's navigation sy to understand?
Your navigation system should give your visitor a clue as to what page of the site they are currently on and where they can go next.
http://www.1stsitefree.com/design_nav.htm

5.4 Is the site's navigation consistent?
If ch page on your site has a consistent style of presentation, visitors will find it sier to navigate between pages and find information
http://www.juicystudio.com/tutorial/accessibility/navigation.asp

5.5 Does the site use consistent and appropriate language?
The use of clr and simple language promotes effective communiion. Trying to come across as articulate can be as difficult to rd as poorly written grammar, especially if the language used isn't the visitor's primary language.

http://www.juicystudio.com/tutorial/accessibility/clr.asp

5.6 Does the site have a sitemap page and contact page? Are they sy to find?
Most site maps fail to convey multiple levels of the site's information architecture. In usability tests, users often overlook site maps or can't find them. Complexity is also a problem: a map should be a map, not a navigational challenge of its own.
http://www.useit.com/alertbox/20020106.html

5.7 For large sites, is there a srch tool?
While srch tools are not needed on smaller sites, and some people will not ever use them, site-specific srch tools allow users a choice of navigation options.

5.8 Is there a link to the home page on every page in the site?
Some users like to go back to a site's home page after navigating to content within a site. The home page becomes a base camp for these users, allowing them to regroup before exploring new content.

5.9 Are links underlined?
To maximise the perceived affordance of clickability, colour and underline the link text. Users shouldn't have to guess or scrub the page to find out where they can click.
http://www.useit.com/alertbox/20040510.html

5.10 Are visited links clrly defined?
Most important, knowing which pages they've alrdy visited frees users from unintentionally revisiting the same pages over and over again.
http://www.useit.com/alertbox/20040503.html

6. Site management

6.1 Does the site have a mningful and helpful 404 error page that works from any depth in the site?
You've requested a page - either by typing a URL directly into the address bar or clicking on an out-of-date link and you've found yourself in the middle of cyberspace nowhere. A user-friendly website will give you a helping hand while many others will simply do nothing, relying on the browser's built-in ability to explain what the problem is.

http://www.alistapart.com/articles/perfect404/

6.2 Does the site use friendly URLs?
Most srch engines (with a few exceptions - namely Google) will not index any pages that have a question mark or other character (like an ampersand or equals sign) in the URL... what good is a site if no one can find it?http://www.sitepoint.com/article/srch-engine-friendly-urls

One of the worst elements of the web from a user interface standpoint is the URL. However, if they're short, logical, and self-correcting, URLs can be acceptably usable
http://www.merges.net/theory/20010305.html

More:
http://www.sitepoint.com/article/srch-engine-friendly-urls
http://www.websitegoodies.com/article/32
http://www.merges.net/theory/20010305.html

6.3 Does the site's URL work without "www"?
While this is not critical, and in some cases is not even possible, it is always good to give people the choice of both options. If a user types your domain name without the www and gets no site, this could disadvantage both the user and you.

6.4 Does the site have a favicon?

A Favicon is a multi-resolution included on nrly all professionally developed sites. The Favicon allows the webmaster to further promote their site, and to crte a more customized apprance within a visitor's browser.
http://www.favicon.com/

Favicons are definitely not critical. However, if they are not present, they can cause 404 errors in your logs (site statistics). Browsers like IE will request them from the server when a site is bookmarked. If a favicon isn't available, a 404 error may be erated. Therefore, having a favicon could cut down on favicon specific 404 errors. The same is true of a 'robots.txt' file.

No comments:

Post a Comment