A Web Standards Checklist, How to be able to Make a Proper Website

A internet benchmarks checklist

The name online requirements can necessarily mean various issues to numerous people. For some, it is 'table-free sites', with regard to others it's 'using appropriate code'. However, internet standards will be very much much wider as compared to that. A site designed to web models must keep to benchmarks (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) plus pursue most effective practices (valid code, accessible code, semantically right code, user-friendly URLs etc).

In additional words, a web page built in order to online criteria have to friends and family always be lean, clean, CSS-based, accessible, operational as well as research serp friendly.

About the checklist

This seriously isn't a great uber-checklist. There are most likely a lot of goods this can include added. More importantly, it ought not often be witnessed for a list of items that must become attended to on each web page that you develop. It is just a instruction in which can be used:

* showing that breadth associated with internet standards * for a very useful application with regard to coders during the output cycle involving websites * being a aid regarding developers who?re considering switching near website standards

The checklist

1.Quality regarding code 1. Does the website try a correct Doctype? 2. Does the positioning use a Character set? 3. Does the positioning use Valid (X)HTML? 4. Does that site work with Valid CSS? 5. Does as well as use any kind of CSS hacks? 6. Does the positioning utilize unnecessary classes as well as ids? 7. Is the actual computer code well structured? 8. Does coursesmart include any damaged links? 9. How does the website execute with regard to speed/page size? 10. Does the site have JavaScript errors?

2. Degree involving split between content along with presentation 1. Does the site use CSS pertaining to almost all display areas (fonts, colour, padding, borders etc)? 2. Are all ornamental images inside the CSS, and also do they appear within the (X)HTML?

3. Accessibility for users 1. Are "alt" attributes applied for just about all descriptive images? 2. Does the site utilize comparative products rather in comparison with most critical models with regard to copy size? 3. Do every issues with the particular structure break in the event that font dimensions is definitely increased? 4. Does your website use visible neglect menus? 5. Does coursesmart employ obtainable forms? 6. Does as well as utilize accessible tables? 7. Is presently there sufficient color brightness/contrasts? 8. Is color on it's own used for essential information? 9. Is at this time there overdue responsiveness to get dropdown selections (for people by using lowered motor skills)? 10. Are all hyperlinks descriptive (for shutter users)?

4. Accessibility intended for devices 1. Does the positioning work acceptably across current and elderly browsers? 2. Is your written content offered with CSS went away from or not supported? 3. Is the subject material available using images changed down as well as not supported? 4. Does the website do the job with text surfers such as Lynx? 5. Does as well as work nicely whenever printed? 6. Does the site work in Hand Held devices? 7. Does as well as contain thorough metadata? 8. Does the website work efficiently in a variety of internet browser eyeport sizes?

5. Basic Usability 1. Is at this time there a definite image hierarchy? 2. Are heading degrees easy to distinguish? 3. Does coursesmart have got easy to be aware of navigation? 4. Does coursesmart apply dependable navigation? 5. Are back links underlined? 6. Does the positioning apply consistent and proper language? 7. Do you have a sitemap web site in addition to contact page? Are that they straightforward for you to find? 8. For great sites, is usually now there when you search tool? 9. Is generally there a connect to the home article with just about every page inside site? 10. Are visited backlinks clearly defined that has a unique colour?

6. Site management 1. Does the positioning possess a meaningful and handy 404 error page that will works from any kind of level within your site? 2. Does the positioning apply welcoming URLs? 3. Do your URLs operate not having "www"? 4. Does as well as have a favicon?

1. Quality of code

1.1 Does the actual site work with a correct Doctype? A doctype (short regarding 'document style declaration') informs the particular validator which in turn variant involving (X)HTML you're using, and should appear on the very top of each and every online page. Doctypes undoubtedly are a key component involving compliant website pages: your markup and CSS won't validate not having them. CODE/articles/doctype/

More: CODE/QA/2002/04/valid-dtd-list.html

CODE/listamatic/about-boxmodel.htm

CODE/matthias/articles/doctypeswitch.html

1.2 Does the website start using a Character set? If a new individual adviser (eg. some sort of browser) is not able to detect the actual persona encoding utilized in a Web document, the person can be assigned unreadable text. This information is usually specially necessary for all keeping and increasing some sort of multilingual site, although expressing the character encoding from the insurance policy is vital for anyone making XHTML/HTML or maybe CSS. CODE/International/tutorials/tutorial-char-enc/

More: CODE/International/O-charset.html

1.3 Does the particular website utilize Valid (X)HTML? Valid signal will render more rapidly than value using errors. Valid computer code will make superior to invalid code. Browsers come to be far more benchmarks compliant, and it is being increasingly necessary that will generate legitimate and specifications compliant HTML. CODE/presentation/sit2003/06.htm

More: CODE/

1.4 Does the positioning apply Valid CSS? You need to make positive that will there may not be any faults in often a person's HTML or ones CSS, seeing that errors inside either spot can lead to botched document appearance. CODE/eric/articles/webrev/199904.html

More: CODE/css-validator/

1.5 Does your website make use of virtually any CSS hacks? Basically, hackers come affordable to individual choice, how much awareness you've got of workarounds, the suitable style you happen to be making an attempt that will achieve. CODE//msg05823.html

More: CODE/?page=CssHack

CODE/?page=ToHackOrNotToHack

CODE/ref/css/filters/

1.6 Does the website make use of unnecessary tuition or perhaps ids? I've noticed that coders learning different ability typically finish up having fine CSS but poor XHTML. Specifically, the HTML code is usually filled with unneeded divs plus ids. This leads to pretty unreadable HTML and bloated model sheets. CODE/blog/228/

1.7 Is that rule effectively structured? Semantically proper markup makes use of html code components to get their own given purpose. Well structured HTML provides semantic this means regarding any number of customer brokers (browsers with out fashion sheets, copy browsers, PDAs, engines like google etc.) CODE/presentation/benefits/index04.htm

More: CODE/2003/12/semantic-extractor.html

1.8 Does the website have every cracked links? Broken links can annoy users along with probably commute buyers away. Broken back links can certainly additionally preserve serps coming from appropriately indexing your current site.

More: CODE/checklink

1.9 How should the internet site accomplish inside words of speed/page size? Don't create my family wait... That's the principles clients provide us all throughout questionnaire after survey. Even broadband people can suffer that slow-loading blues. CODE/speed/

1.10 Does the website possess JavaScript errors? Internet Explore with regard to Windows means that you can turn on some sort of debugger that may turn up the latest windowpane and also inform you about you will find javascript mistakes on your own site. This can be purchased underneath 'Internet Options' within the Advanced tab. Uncheck 'Disable script debugging'.

2. Degree of split concerning subject material plus presentation

2.1 Does your website use CSS for all those presentation aspects (fonts, colour, padding, county etc)? Use model blankets to manage design and presentation. CODE/TR/WCAG10/wai-pageauth.html#tech-style-sheets

2.2 Are many decorative photographs while in the CSS, or perhaps complete some people appear while in the (X)HTML? The strive for web developers is to clear out many powerpoint presentation through the html code, leaving that clear in addition to semantically correct. CODE/presentation/benefits/index07.htm

3. Accessibility for users

3.1 Are "alt" capabilities utilized for anyone descriptive images? Provide a word comparable for every non-text element CODE/TR/WCAG10/wai-pageauth.html#tech-text-equivalent

3.2 Does as well as work with comparative units rather when compared with overall units for word size? Use general as opposed to absolute units with markup dialect credit prices as well as style sheet property values'. CODE/TR/WCAG10/wai-pageauth.html#tech-relative-units

More: CODE/TR/WCAG10/wai-pageauth.html#tech-relative-units

CODE/blog/348/

3.3 Do any facets of the particular system split in the event that font size will be increased? Try this kind of simple test. Look at your own web site from a browser that sustains easy incrementation involving font size. Now improve your browser's font size. And again. And again... Look from your current site. Does your article format still hold together? It will be unsafe for coders that will consider of which all people browses using default font sizes. 3.4 Does this site employ accessible neglect menus?

A method should be provided that permits clients to be able to miss repetitive routing links. CODE/index.cfm?FuseAction=Content&ID=12

Group related links, distinguish the particular party (for user agents), and, till person agents carry out so, present how to avoid the actual group. CODE/TR/WCAG10-TECHS/#tech-group-links

...blind prospects are not a common kinds inconvenienced by way of a great number of links within a navigation area. Recall which a mobility-impaired human being having very poor adaptive technological innovation could be stuck tabbing through that morass. CODE/book/sashay/serialization/Chapter08.html#h4-2020

More: CODE/websmith/508/o.htm

3.5 Does the positioning make use of accessible forms? Forms won't be the perfect of circumstances to use for people with disabilities. Navigating all over a site along with created content is definitely just one thing, hopping somewhere between form career fields and punching in data is another. CODE/guides/htmladvanced/forms/

More: CODE/learn/tutorials/accessible-forms/01-accessible-forms.html

CODE/tools-and-wizards/accessible-form-builder.asp

CODE/tutorials/better-accessible-forms.asp

3.6 Does as well as employ accessible tables? For data tables, distinguish row along with column headers... For data platforms who have a couple of or maybe more logical quantities involving line as well as column headers, use markup that will associate information solar cells and header cells. CODE/TR/WCAG10/wai-pageauth.html#tech-table-headers

More: CODE/webpublishing/ada/resources/tables.asp

CODE/tools-and-wizards/accessible-table-builder_step1.asp

CODE/techniques/tables/

3.7 Is there adequate colouring brightness/contrasts? Ensure which foreground and track record coloration permutations give plenty of vary as soon as considered through an individual obtaining coloring deficits. CODE/TR/WCAG10/wai-pageauth.html#tech-colour-contrast

More: CODE/services/colourcontrast.asp

3.8 Is coloration only applied intended for crucial information? Ensure that each facts presented together with shade is also available without colour, by way of example through wording and also markup. CODE/TR/WCAG10/wai-pageauth.html#tech-colour-convey

There are quite simply about three types with coloring deficiency; Deuteranope (a kind of red/green coloring deficit), Protanope (another form of red/green coloration deficit) and Tritanope (a blue/yellow deficit- incredibly rare).

More: CODE/

CODE/colourblind/Ishihara.html

CODE/vischeck/vischeckURL.php

3.9 Is generally there delayed responsiveness for dropdown menus? Users with minimized engine abilities might find dropdown menus very difficult to use in the event responsiveness is focused too fast.

3.10 Are all links descriptive? Link wording really should be meaningful sufficient for making impression any time understand outside context - often untreated as well as included in a sequence involving links. Link text message should also end up being terse. CODE/TR/WCAG10/wai-pageauth.html#tech-meaningful-links

4. Accessibility with regard to devices.

4.1 Does the site perform acceptably across modern in addition to older browsers?

Before establishing to generate your CSS-based layout, make sure you determine that surfers to guide and also to precisely what amount you want to support them. CODE/presentation/process/index_step01.cfm

4.2 Is the particular articles accessible along with CSS went off of or even definitely not supported? Some people could take a look at your internet site with often a visitor that does certainly not support CSS or a new visitor with CSS switched off. In subject matter is structured well, this may certainly not be a great issue.

4.3 Is the actual subject material obtainable along with graphics turned down or not necessarily supported? Some persons read websites with shots switched out of - especially folks upon quite gradual connections. Content should nevertheless be out there with regard to all these people.

4.4 Does the website work around copy windows including Lynx? This is like a combination of pictures and CSS switched off. A text-based browser will be dependent on properly organized content to present meaning.

More: CODE/web/lynxview

4.5 Does the site work efficiently when printed? You usually takes virtually any (X)HTML record and merely design the idea for print, and not effect the markup. CODE/articles/goingtoprint/

More: CODE/itss/support/Training/Online/webdesign/css.html#print

4.6 Does the website are very effective inside Hand Held devices? This is a very difficult someone to deal with right until portable devices constantly support their correct press type. However, several floor plans operate far better throughout recent hand-held devices. The significance connected with boosting handheld systems would depend focus on audiences.

4.7 Does your website incorporate in depth metadata? Metadata can be appliance easy to understand info for the web CODE/Metadata/

Metadata is organised tips that is definitely designed mainly that will identify a different resource. In various other words, metadata is 'data related to data'.

4.8 Does coursesmart work effectively in a very assortment connected with cell phone windows sizes? It may be a typical presumption perhaps builders that average screen dimensions are increasing. Some coders consider that the common monitor dimensions is now 1024px wide. But why don't you consider clients along with more compact screens as well as consumers along with hand held devices? Are many people component of your reader and so are they will becoming disadvantaged?

5. Basic Usability 5.1 Is there an apparent video or graphic hierarchy? Organise plus prioritise that belongings of a article through the use of size, prominence and also written content relationships. CODE/web-site-design/165.html

5.2 Are going quantities effortless to distinguish? Use header elements to be able to present insurance structure along with employ these folks according to specification. CODE/TR/WCAG10/wai-pageauth.html#tech-logical-headings

5.3 Is the particular site's direction-finding uncomplicated that will understand? Your routing program ought to give a person's website visitor a hint regarding just what exactly page belonging to the website they're just currently on and also where they'll proceed next. CODE/design_nav.htm

5.4 Is the particular web-site's selection consistent? If each site with your web site is known for a consistent style of presentation, readers will quickly realize the item simpler in order to get around between pages along with locate information CODE/tutorial/accessibility/navigation.asp

5.5 Does the site use constant along with proper language? The make use of clear in addition to very simple language promotes powerful communication. Trying in to the future throughout since articulate could often be when complicated to read as improperly created grammar, particularly if this words employed is not the particular visitor's primary language. CODE/tutorial/accessibility/clear.asp

5.6 Does your website have got a sitemap internet page and call page? Are they will uncomplicated to help find? Most internet site road directions don't communicate a number of levels belonging to the web site's data architecture. In usability tests, users normally disregard website maps or can't find them. Complexity is likewise a problem: a new place need to be a map, not really a navigational concern involving it has the own. CODE/alertbox/20020106.html

5.7 For substantial sites, is actually generally there make certain they are tool? While search applications usually are not necessary on smaller sized sites, as well as some men and women could not ever utilize them, site-specific search tools allow for users a choice connected with navigation options.

5.8 Is at this time there a chek out the house web site on every internet page while in the site? Some people like to return your website's blog once navigating for you to content material the next site. The dwelling web site results in being a foundation stay intended for these types of users, permitting these to be able to regroup prior to exploring different content.

5.9 Are hyperlinks underlined? To maximise the understood affordance with clickability, colour and underline your link text. Users shouldn't should estimate or rinse your page to discover exactly where these people might click. CODE/alertbox/20040510.html

5.10 Are been to hyperlinks clearly defined? Most important, understanding which often webpages on the currently frequented slides open people coming from unintentionally revisiting the identical pages frequently again. CODE/alertbox/20040503.html

6. Site management

6.1 Does this website employ a meaningful plus helpful 404 problem internet page which is effective from any degree inside site? You've requested a page - often simply by keying in a URL directly in to the target bar or even clicking on a strong out-of-date website link plus you will have identified your self in the centre involving the net nowhere. A user-friendly webpage will offer people a new helping hands when many more will probably simply accomplish nothing, relying on the actual browser's built-in ability to be able to reveal just what exactly the challenge is. CODE/articles/perfect404/

6.2 Does coursesmart utilize friendly URLs? Most serps (with some conditions - that is Google) will never index just about any web sites that have a dilemma draw or other personality (like an ampersand or maybe compatible sign) within the URL... precisely what very good is usually a website if there's no-one to locate it? CODE/article/search-engine-friendly-urls

One belonging to the most detrimental things belonging to the web coming from a user interface viewpoint will be the URL. However, if there're short, logical, and also self-correcting, URLs can be acceptably usable CODE/theory/20010305.html

More: CODE/article/search-engine-friendly-urls

CODE/article/32

CODE/theory/20010305.html

6.3 Does the home's URL perform without "www"? While this may not be critical, along with using some circumstances is not really even possible, it is always fine to allow men and women the selection connected with both options. If your end user types a person's area brand without the internet and obtains absolutely no site, this tends to problem equally this customer along with you. 6.4 Does the website use a favicon?

A Favicon may be a multi-resolution graphic bundled on most business professionally developed sites. The Favicon allows the particular designer to help encourage his or her site, and also to produce a far more customized look with a visitor's browser. CODE/

Favicons are not at all critical. However, whenever they usually are not present, they'll trigger 404 blunders within your firelogs (site statistics). Browsers including IE will request all of them in the equipment each time a web site is bookmarked. If a favicon is not available, a 404 malfunction may be generated. Therefore, obtaining a favicon could lessen favicon unique 404 errors. The exact will additionally apply to some sort of 'robots.txt' file.

???????