A world wide web models checklist
The expression web requirements can easily necessarily mean numerous elements for you to several people. For some, it can be 'table-free sites', to get others it is 'using good code'. However, online criteria are generally significantly broader compared to that. A site constructed in order to online standards have to follow benchmarks (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) along with pursue greatest businesses (valid code, accessible code, semantically suitable code, user-friendly URLs etc).
In additional words, a niche site designed to help web standards should preferably be lean, clean, CSS-based, accessible, practical and seek out engine friendly.
About the particular checklist
This just isn't a good uber-checklist. There are most likely numerous things that could be added. More importantly, it need to certainly not become seen as a variety regarding things that has got to often be addressed upon every web page which you develop. It is merely information that will often be used:
* to indicate the particular breadth regarding web standards * as a handy software to get programmers in the development period with websites * being an aid to get web developers who're serious about moving towards world wide web standards
The checklist
1.Quality with code 1. Does the site start using a proper Doctype? 2. Does the site make use of a Character set? 3. Does the web-site work with Valid (X)HTML? 4. Does coursesmart apply Valid CSS? 5. Does as well as utilize any kind of CSS hacks? 6. Does the website make use of needless lessons or maybe ids? 7. Is your signal good structured? 8. Does the site possess any destroyed links? 9. How does your website execute when it comes to speed/page size? 10. Does your website have JavaScript errors?
2. Degree with splitting up somewhere between subject matter and presentation 1. Does the website employ CSS for anyone demonstration aspects (fonts, colour, padding, borders etc)? 2. Are most of pretty images from the CSS, or even accomplish they will appear inside the (X)HTML?
3. Accessibility to get users 1. Are "alt" attributes used for those detailed images? 2. Does this site make use of distant relative models as opposed to overall gadgets for text size? 3. Do almost any areas on the array crack if font width is increased? 4. Does your website work with noticeable drop menus? 5. Does as well as utilize out there forms? 6. Does as well as utilize accessible tables? 7. Is generally there sufficient coloration brightness/contrasts? 8. Is coloration only used regarding critical information? 9. Is there retarded responsiveness intended for dropdown possibilities (for consumers with decreased motor skills)? 10. Are all links descriptive (for window blind users)?
4. Accessibility for devices 1. Does the website work acceptably around modern day and also more mature browsers? 2. Is your content material available having CSS switched away from as well as certainly not supported? 3. Is this subject material available along with shots switched off of as well as not supported? 4. Does coursesmart function in word browsers for instance Lynx? 5. Does the site work efficiently whenever printed? 6. Does coursesmart work well throughout Hand Held devices? 7. Does the site comprise specific metadata? 8. Does your web site work efficiently from a variety of cell phone window sizes?
5. Basic Usability 1. Is there an apparent graphic hierarchy? 2. Are going degrees easy for you to distinguish? 3. Does as well as possess clear to see navigation? 4. Does as well as use regular navigation? 5. Are buttons underlined? 6. Does the site utilize steady and appropriate language? 7. Do you've got a sitemap web site and phone page? Are that they effortless that will find? 8. For large sites, can there be a search tool? 9. Is generally there your url to your house page on each and every site while in the site? 10. Are frequented hyperlinks obviously defined which has a unique colour?
6. Site management 1. Does the positioning have a very meaningful as well as useful 404 fault internet page in which is effective from almost any interesting depth within the site? 2. Does the positioning employ friendly URLs? 3. Do your own URLs perform with no "www"? 4. Does coursesmart have a very favicon?
1. Quality associated with code
1.1 Does as well as work with a appropriate Doctype? A doctype (short for 'document kind declaration') informs the particular validator which often variation connected with (X)HTML you're using, plus ought to show up along at the very top of each and every world wide web page. Doctypes can be a crucial part of compliant online pages: your current markup and CSS won't validate without 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 coursesmart try a Character set? If a customer agent (eg. a browser) struggles to pick up on your figure encoding employed in a Web document, an individual might always be brought to you along with unreadable text. This facts can be especially important for the people maintaining along with stretching a multilingual site, but telling your nature encoding with the record is vital get the right generating XHTML/HTML as well as CSS. CODE/International/tutorials/tutorial-char-enc/
More: CODE/International/O-charset.html
1.3 Does this website work with Valid (X)HTML? Valid code will render speedier as compared to code along with errors. Valid program code could render superior to invalid code. Browsers have become more standards compliant, in fact it is becoming significantly necessary to compose legitimate and also specifications compliant HTML. CODE/presentation/sit2003/06.htm
More: CODE/
1.4 Does as well as use Valid CSS? You intent to make positive in which presently there are not virtually any blunders within also your own HTML or even your CSS, considering flaws in either spot can bring about botched insurance coverage appearance. CODE/eric/articles/webrev/199904.html
More: CODE/css-validator/
1.5 Does the site use any CSS hacks? Basically, hackers fall to personal choice, the quality of understanding you could have involving workarounds, the particular pattern that you're attempting to achieve. CODE//msg05823.html
More: CODE/?page=CssHack
CODE/?page=ToHackOrNotToHack
CODE/ref/css/filters/
1.6 Does the particular web page apply unnecessary instruction or perhaps ids? I've seen that will coders learning brand new skills typically find themselves with good CSS but poor XHTML. Specifically, your HTML code tends to be full of needless divs in addition to ids. This outcomes within rather worthless HTML and bloated form sheets. CODE/blog/228/
1.7 Is the particular code effectively structured? Semantically right markup functions html document features for their particular provided purpose. Well organized HTML includes semantic indicating for your wide range regarding end user realtors (browsers devoid of style sheets, word browsers, PDAs, google etc.) CODE/presentation/benefits/index04.htm
More: CODE/2003/12/semantic-extractor.html
1.8 Does this internet site include virtually any broken links? Broken backlinks can irritate customers and also potentially drive users away. Broken buttons could also retain google out of effectively indexing your own site.
More: CODE/checklink
1.9 How should the site perform in terms of speed/page size? Don't make me personally wait... That's this concept end users give us within market research once survey. Even internet connection end users can undergo this slow-loading blues. CODE/speed/
1.10 Does the website have JavaScript errors? Internet Explore for Windows helps you switch on a debugger of which will appear in place a fresh window plus let you know there are javascript mistakes on your own site. This can be obtained below 'Internet Options' to the Advanced tab. Uncheck 'Disable script debugging'.
2. Degree involving separation somewhere between written content and presentation
2.1 Does coursesmart use CSS for those presentation elements (fonts, colour, padding, edge etc)? Use form sheets to overpower design as well as presentation. CODE/TR/WCAG10/wai-pageauth.html#tech-style-sheets
2.2 Are many attractive graphics in the CSS, or do many people appear from the (X)HTML? The prefer web-developers is definitely to take out most presentation with the html code code, giving this thoroughly clean along with semantically correct. CODE/presentation/benefits/index07.htm
3. Accessibility pertaining to users
3.1 Are "alt" characteristics applied for all descriptive images? Provide a word comparative for each and every non-text element CODE/TR/WCAG10/wai-pageauth.html#tech-text-equivalent
3.2 Does your website apply relative units in lieu of most critical devices for text size? Use comparable as an alternative to complete products throughout markup language attribute ideals as well as design page property or home 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 kind of aspects of the system break up if font dimension is increased? Try this simple test. Look during your blog inside a browser that facilitates straightforward incrementation of font size. Now increase your browser's font size. And again. And again... Look at a person's site. Does this web site layout even now hold together? It is hazardous pertaining to programmers to be able to assume this everyone browses implementing default font sizes. 3.4 Does your website use noticeable neglect menus?
A process will likely to be so long as allows customers to help drop repetitive navigation links. CODE/index.cfm?FuseAction=Content&ID=12
Group connected links, determine that number (for customer agents), and, until finally end user agents perform so, supply a means for you to get around the group. CODE/TR/WCAG10-TECHS/#tech-group-links
...blind readers will not be the one kinds inconvenienced through way too many back links inside a routing area. Recall that your mobility-impaired person having terrible adaptive technologies may possibly often be stuck tabbing by way of that morass. CODE/book/sashay/serialization/Chapter08.html#h4-2020
More: CODE/websmith/508/o.htm
3.5 Does the website make use of accessible forms? Forms are certainly not the least complicated with circumstances to utilize for people having disabilities. Navigating all-around a web page having prepared content is one thing, hopping somewhere between mode grounds and including information is usually 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 the website make use of offered tables? For data tables, determine line and column headers... For files platforms that will have got some rational concentrations involving row as well as column headers, use markup for you to associate data cellular material plus 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 at this time there ample color brightness/contrasts? Ensure that will foreground along with track record colour permutations give plenty of contrast when viewed by an individual obtaining coloring deficits. CODE/TR/WCAG10/wai-pageauth.html#tech-colour-contrast
More: CODE/services/colourcontrast.asp
3.8 Is shade on it's own made use of pertaining to essential information? Ensure that each information conveyed by using colouring is likewise accessible with out colour, for instance out of context or markup. CODE/TR/WCAG10/wai-pageauth.html#tech-colour-convey
There will be quite simply about three kinds of shade deficiency; Deuteranope (a kind of red/green shade deficit), Protanope (another way of red/green colour deficit) and also Tritanope (a blue/yellow deficit- really rare).
More: CODE/
CODE/colourblind/Ishihara.html
CODE/vischeck/vischeckURL.php
3.9 Is there delayed responsiveness pertaining to dropdown menus? Users by using diminished magnetic generator competencies may find dropdown choices difficult to utilize in the event responsiveness is defined too fast.
3.10 Are just about all links descriptive? Link copy need to be meaningful more than enough that will make good sense while learn away from circumstance - also without treatment or during your series regarding links. Link text must also be terse. CODE/TR/WCAG10/wai-pageauth.html#tech-meaningful-links
4. Accessibility with regard to devices.
4.1 Does that site work acceptably over modern-day and older browsers?
Before starting up to build a CSS-based layout, you need to decide which will surfers to aid also to precisely what level you need to assistance them. CODE/presentation/process/index_step01.cfm
4.2 Is the particular content available by using CSS switched away and also not necessarily supported? Some folks may well visit your blog by using also some sort of browser that isn't going to service CSS or maybe some sort of web browser using CSS went off. In content will be structured well, this can not possibly be a good issue.
4.3 Is the content material attainable with shots went off or not necessarily supported? Some people view web sites with photos switched out of - especially men and women with extremely slowly connections. Content should still end up being out there to get these people.
4.4 Does the positioning operate around textual content surfers for example Lynx? This is a lot like a variety of shots and also CSS switched off. A text-based cell phone will certainly count about effectively organized content to deliver meaning.
More: CODE/web/lynxview
4.5 Does the site work nicely when printed? You may take any (X)HTML insurance plan and just fashion the item regarding print, with no to contact this markup. CODE/articles/goingtoprint/
More: CODE/itss/support/Training/Online/webdesign/css.html#print
4.6 Does the website work in Hand Held devices? This is a hard anyone to cope with until hand held devices consistently support their own suitable storage devices type. However, several layouts work far better in present hand-held devices. The relevance associated with encouraging fretting hand presented products is determined by target audiences.
4.7 Does the site include comprehensive metadata? Metadata can be machine easy to undestand details with the web CODE/Metadata/
Metadata is structured information that is designed specifically to describe another resource. In different words, metadata is 'data regarding data'.
4.8 Does the particular website perform very well inside a range regarding web browser window sizes? It is a popular forecasts amongst coders in which average filter sizes tend to be increasing. Some web developers believe this the majority of screen dimensions is definitely now 1024px wide. But what about users using smaller window screens as well as end users together with handheld devices? Are some people component of your reader and therefore are they becoming disadvantaged?
5. Basic Usability 5.1 Is now there a clear image hierarchy? Organise and also prioritise the actual articles connected with a site by utilizing size, prominence as well as articles relationships. CODE/web-site-design/165.html
5.2 Are proceeding degrees uncomplicated to help distinguish? Use header factors that will present insurance policy structure as well as employ these people based on specification. CODE/TR/WCAG10/wai-pageauth.html#tech-logical-headings
5.3 Is the home's navigation quick to understand? Your navigation technique should present your guest a new idea as to exactly what web page with the site that they are usually at this time on and when they are able to move next. CODE/design_nav.htm
5.4 Is this property's navigation consistent? If every page on your site is known for a consistent fashion connected with presentation, readers will uncover the item a lot easier that will get around somewhere between websites along with find information CODE/tutorial/accessibility/navigation.asp
5.5 Does the site utilize regular as well as right language? The us going for clear in addition to simple language promotes effective communication. Trying to explode across as articulate can be as hard for you to read because poorly written grammar, particularly if the terms used isn't this visitor's principal language. CODE/tutorial/accessibility/clear.asp
5.6 Does coursesmart employ a sitemap web page plus make contact with page? Are these people uncomplicated to find? Most web-site routes fail to display many levels belonging to the site's details architecture. In usability tests, consumers usually forget about site roadmaps and also are unable to find them. Complexity is likewise your problem: a map will need to always be a map, not a navigational problem associated with its own. CODE/alertbox/20020106.html
5.7 For large sites, possibly there is a search tool? While lookup gear are not needed on smaller sized sites, and several men and women won't at any time employ them, site-specific search equipment allow users either selection options.
5.8 Is there a url to your house web site on just about every internet page while in the site? Some customers such as to go to come back to a property's webpage right after navigating that will subject matter within a site. The internet site gets to be a base camp pertaining to these types of users, letting these to regroup just before looking at different content.
5.9 Are links underlined? To maximise that defined affordance connected with clickability, coloring in addition to underline the particular link text. Users really do not ought to reckon or wash the internet page to discover available wherever they might click. CODE/alertbox/20040510.html
5.10 Are visited backlinks plainly defined? Most important, understanding which internet pages which they have undoubtedly stopped at frees customers from accidentally revisiting a similar pages repeatedly again. CODE/alertbox/20040503.html
6. Site management
6.1 Does the positioning have a very meaningful as well as helpful 404 miscalculation web site that will operates through any interesting depth inside the site? You've enquired some sort of web site - either by way of keying your URL immediately in the target bar and also clicking upon a good out-of-date link as well as you might have located oneself in the centre associated with cyberspace nowhere. A user-friendly site gives you a helping side even though many others could simply carry out nothing, depending upon the browser's built-in flexibility for you to explain what exactly the condition is. CODE/articles/perfect404/
6.2 Does the positioning employ friendly URLs? Most search engines (with a couple of exceptions - namely Google) will not index any web pages that are fitted with a new query indicate or additional identity (like an ampersand or even equates to sign) in the URL... just what exactly fine is really a web-site if no-one can find it? CODE/article/search-engine-friendly-urls
One in the most detrimental things from the website from a program viewpoint is the URL. However, if they're short, logical, plus self-correcting, URLs might be acceptably usable CODE/theory/20010305.html
More: CODE/article/search-engine-friendly-urls
CODE/article/32
CODE/theory/20010305.html
6.3 Does that web site's URL perform without "www"? While this is simply not critical, as well as using instances just isn't also possible, it will always be good to provide individuals the selection involving both options. If a user forms your own website with no your world wide web along with gets absolutely no site, this will likely problem both the person as well as you. 6.4 Does your website employ a favicon?
A Favicon is often a multi-resolution image included on almost all by a professional designed sites. The Favicon lets your website owner that will even more market their particular site, so to make a additional customized physical appearance with a visitor's browser. CODE/
Favicons are usually possibly not critical. However, if they are not present, they can induce 404 errors as part of your logs (site statistics). Browsers for instance IE will request these in the machine as soon as a site is bookmarked. If some sort of favicon seriously isn't available, some sort of 404 miscalculation might be generated. Therefore, aquiring a favicon could reduce favicon unique 404 errors. The same very well of an 'robots.txt' file.
No comments:
Post a Comment