A online benchmarks checklist
The time period internet standards could signify various things to various people. For some, it can be 'table-free sites', to get some that can be 'using legitimate code'. However, web models are usually very much broader than that. A site constructed to help internet standards must comply with benchmarks (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and follow ideal practitioners (valid code, offered code, semantically proper code, user-friendly URLs etc).
In alternative words, some sort of site built to help website benchmarks ought to preferably become lean, clean, CSS-based, accessible, useful plus optimization friendly.
About the actual checklist
This isn't an uber-checklist. There are likely several items which is added. More importantly, them have to certainly not end up being seen for a set of goods that must be resolved on every internet site which people develop. It is merely tips that could be used:
* of showing the width associated with website standards * for a helpful program with regard to developers through manufacturing point regarding websites * being an help with regard to developers who are thinking about moving near world wide web standards
The checklist
1.Quality of code 1. Does coursesmart make use of a correct Doctype? 2. Does coursesmart use a Character set? 3. Does coursesmart employ Valid (X)HTML? 4. Does the site make use of Valid CSS? 5. Does the website utilize almost any CSS hacks? 6. Does as well as make use of pointless courses or ids? 7. Is the program code well structured? 8. Does the site have virtually any busted links? 9. How really does the positioning execute around conditions connected with speed/page size? 10. Does your site have JavaScript errors?
2. Degree with splitting up somewhere between articles and presentation 1. Does the site employ CSS for anyone speech features (fonts, colour, padding, borders etc)? 2. Are just about all ornamental pictures inside CSS, and also accomplish that they appear inside the (X)HTML?
3. Accessibility intended for users 1. Are "alt" qualities utilized for all descriptive images? 2. Does the site employ relative devices in lieu of complete products to get textual content size? 3. Do any facets of the particular layout break in the event that font width is increased? 4. Does as well as apply apparent omit menus? 5. Does the web page work with available forms? 6. Does coursesmart make use of obtainable tables? 7. Is there satisfactory colour brightness/contrasts? 8. Is shade on it's own used for critical information? 9. Is now there postponed responsiveness for dropdown choices (for customers by using lessened motor skills)? 10. Are just about all backlinks detailed (for window blind users)?
4. Accessibility intended for devices 1. Does the site do the job acceptably across current and older browsers? 2. Is the particular content attainable with CSS turned out of or not supported? 3. Is the particular subject material accessible by using graphics changed down or perhaps not supported? 4. Does the site operate in text windows including Lynx? 5. Does as well as work while printed? 6. Does your website work efficiently around Hand Held devices? 7. Does coursesmart include things like precise metadata? 8. Does the site work from a range of visitor screen sizes?
5. Basic Usability 1. Is now there a new clear graphic hierarchy? 2. Are heading levels uncomplicated for you to distinguish? 3. Does the website have simple to implement navigation? 4. Does coursesmart make use of consistent navigation? 5. Are back links underlined? 6. Does coursesmart apply constant plus appropriate language? 7. Do you have a sitemap web site and phone page? Are they quick to find? 8. For huge sites, will there be they're certified tool? 9. Is there a url to the property internet page with each and every article inside the site? 10. Are visited back links clearly outlined that has a one of a kind colour?
6. Site management 1. Does the website possess a meaningful as well as helpful 404 miscalculation site that operates from any deep within the site? 2. Does your website work with favorable URLs? 3. Do your own URLs do the job without "www"? 4. Does the positioning have got a favicon?
1. Quality associated with code
1.1 Does this internet site apply a accurate Doctype? A doctype (short regarding 'document form declaration') informs your validator which will type associated with (X)HTML you are using, and ought to look on the really top of each world wide web page. Doctypes undoubtedly are a crucial part of compliant online pages: your markup plus CSS wouldn't confirm devoid of 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 make use of a Character set? If a new individual factor (eg. a browser) struggles to find the particular nature encoding utilized in a new Web document, an individual might be given unreadable text. This facts is actually especially essential for anyone sustaining and also giving out a multilingual site, but declaring the figure encoding belonging to the record is critical proper creating XHTML/HTML as well as CSS. CODE/International/tutorials/tutorial-char-enc/
More: CODE/International/O-charset.html
1.3 Does the positioning use Valid (X)HTML? Valid value will make faster as compared with program code along with errors. Valid program code will make better than invalid code. Browsers come to be much more criteria compliant, and it's also growing to be progressively more essential write valid along with standards compliant HTML. CODE/presentation/sit2003/06.htm
More: CODE/
1.4 Does your website utilize Valid CSS? You need to make certain that there aren't any kind of mistakes within possibly your own HTML or your CSS, since mistakes in both area can result in botched insurance plan appearance. CODE/eric/articles/webrev/199904.html
More: CODE/css-validator/
1.5 Does your website make use of just about any CSS hacks? Basically, hacks decrease to help personal choice, just how much connected with expertise everyone include with workarounds, the particular style and design you will be trying to achieve. CODE//msg05823.html
More: CODE/?page=CssHack
CODE/?page=ToHackOrNotToHack
CODE/ref/css/filters/
1.6 Does the site use unnecessary lessons or maybe ids? I've recognized that will developers knowing brand new skills usually wind up with great CSS nonetheless inadequate XHTML. Specifically, this HTML code tends to be rich in unnecessary divs and also ids. This results in fairly meaningless HTML as well as puffed up model sheets. CODE/blog/228/
1.7 Is that computer code effectively structured? Semantically correct markup utilizes html code factors for his or her given purpose. Well structured HTML has semantic meaning pertaining to a wide range of consumer agencies (browsers without form sheets, text message browsers, PDAs, search engines etc.) CODE/presentation/benefits/index04.htm
More: CODE/2003/12/semantic-extractor.html
1.8 Does the particular web page possess virtually any broken links? Broken backlinks can frustrate users and also potentially generate consumers away. Broken inbound links could also preserve search engines like google from properly indexing your site.
More: CODE/checklink
1.9 How does your website carry out with regards to speed/page size? Don't generate me wait... That's the information customers present individuals with customer survey after survey. Even high speed end users might go through that slow-loading blues. CODE/speed/
1.10 Does the positioning possess JavaScript errors? Internet Explore to get Windows helps you first start up a new debugger this will pop up banner the latest eyeport and let's you know you will find javascript faults with your site. This can be purchased under 'Internet Options' around the Advanced tab. Uncheck 'Disable script debugging'.
2. Degree of separation between written content as well as presentation
2.1 Does as well as employ CSS for everyone demonstration aspects (fonts, colour, padding, county etc)? Use model blankets to overpower design along with presentation. CODE/TR/WCAG10/wai-pageauth.html#tech-style-sheets
2.2 Are almost all decorative shots in the CSS, or perhaps do some people glimpse within the (X)HTML? The aim for web developers is always to eliminate almost all speech from your html code code, causing it clean and also semantically correct. CODE/presentation/benefits/index07.htm
3. Accessibility regarding users
3.1 Are "alt" properties used regarding all illustrative images? Provide a new textual content the same for each non-text element CODE/TR/WCAG10/wai-pageauth.html#tech-text-equivalent
3.2 Does your web-site apply comparable items instead of absolute devices with regard to text message size? Use comparable rather than overall products in markup dialect credit values in addition to style sheet residence 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 tasks of the particular layout separate in case font size can be increased? Try this particular simple test. Look at yuor web blog from a internet browser which encourages uncomplicated incrementation connected with font size. Now grow your browser's font size. And again. And again... Look with your current site. Does the actual article layout nevertheless keep together? It is usually risky intended for web developers in order to consider in which everybody browses utilizing default font sizes. 3.4 Does the positioning work with apparent skip menus?
A process should be so long as lets users to by pass duplicated navigation links. CODE/index.cfm?FuseAction=Content&ID=12
Group connected links, discover that party (for user agents), and, right until consumer realtors do so, give a way to bypass the group. CODE/TR/WCAG10-TECHS/#tech-group-links
...blind prospects may not be the one ones inconvenienced by means of a lot of inbound links in a very navigation area. Recall that a mobility-impaired person together with poor adaptive engineering can be ensnared tabbing through of which morass. CODE/book/sashay/serialization/Chapter08.html#h4-2020
More: CODE/websmith/508/o.htm
3.5 Does coursesmart apply accessible forms? Forms usually are not favored of stuff to utilize if you are with disabilities. Navigating about some sort of internet page with prepared content is usually just one thing, hopping between type fields in addition to typing information can be 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 use out there tables? For files tables, recognise line as well as column headers... For facts tables which have not one but two or even more plausible amounts involving line or column headers, use markup that will link info tissues along with 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 ample shade brightness/contrasts? Ensure in which foreground and history shade combining supply adequate set off as soon as considered by another person getting shade deficits. CODE/TR/WCAG10/wai-pageauth.html#tech-colour-contrast
More: CODE/services/colourcontrast.asp
3.8 Is color solely used for crucial information? Ensure every one details presented along with colouring is usually also available with no colour, for example from context or even markup. CODE/TR/WCAG10/wai-pageauth.html#tech-colour-convey
There are quite simply three kinds connected with colour deficiency; Deuteranope (a type of red/green colour deficit), Protanope (another kind of red/green colour deficit) as well as Tritanope (a blue/yellow deficit- incredibly rare).
More: CODE/
CODE/colourblind/Ishihara.html
CODE/vischeck/vischeckURL.php
3.9 Is there postponed responsiveness intended for dropdown menus? Users using reduced motor abilities could find dropdown menus difficult make use of whenever responsiveness is set also fast.
3.10 Are most back links descriptive? Link word ought to be meaningful sufficient to create sense when examine beyond context - either on their private as well as since component to a routine involving links. Link text should also be terse. CODE/TR/WCAG10/wai-pageauth.html#tech-meaningful-links
4. Accessibility regarding devices.
4.1 Does as well as work acceptably across modern and mature browsers?
Before starting up to build your CSS-based layout, make sure you determine which usually browsers compliment as well as to be able to what amount you intend to aid them. CODE/presentation/process/index_step01.cfm
4.2 Is the written content available with CSS turned away from or maybe possibly not supported? Some individuals may perhaps visit your web blog having whether cell phone browser which isn't going to support CSS and also a visitor using CSS changed off. In subject matter is definitely organised well, this will likely possibly not be an issue.
4.3 Is your written content available using images switched down or definitely not supported? Some men and women search sites with photographs changed off - especially men and women on extremely slow connections. Content ought to nevertheless be out there pertaining to these people.
4.4 Does the positioning work in copy surfers such as Lynx? This is definitely just like a variety of photos and CSS switched off. A text-based cell phone browser will certainly depend on well structured subject matter to provide meaning.
More: CODE/web/lynxview
4.5 Does the website work well when printed? You usually takes every (X)HTML insurance coverage and basically type it regarding print, without having to touching your markup. CODE/articles/goingtoprint/
More: CODE/itss/support/Training/Online/webdesign/css.html#print
4.6 Does this web site work in Hand Held devices? This is usually a tough anyone to cope with until hand placed units routinely help support his or her accurate press type. However, a few layouts function better throughout recent hand-held devices. The importance involving supporting portable devices depends on target audiences.
4.7 Does coursesmart contain thorough metadata? Metadata can be device simple to comprehend information for the web CODE/Metadata/
Metadata will be organised tips that is designed mainly to express one more resource. In additional words, metadata is actually 'data related to data'.
4.8 Does the positioning work effectively in a very variety regarding visitor windowpane sizes? It is really a common predictions perhaps developers that regular display screen sizes usually are increasing. Some designers assume which the regular monitor size is definitely currently 1024px wide. But think about consumers using lesser screens as well as consumers with hand held devices? Are many people portion of your customers and so are some people being disadvantaged?
5. Basic Usability 5.1 Is there a definite image hierarchy? Organise along with prioritise that details of the web page by employing size, dominance along with content relationships. CODE/web-site-design/165.html
5.2 Are going levels easy in order to distinguish? Use header components to help express insurance policy framework as well as utilize all of them in line with specification. CODE/TR/WCAG10/wai-pageauth.html#tech-logical-headings
5.3 Is the web-site's selection simple in order to understand? Your selection method have to offer your visitor a new hint when to be able to just what exactly web page belonging to the internet site they are at the moment with in addition to when they are able to visit next. CODE/design_nav.htm
5.4 Is the actual site's navigation consistent? If every page in your site includes a regular type of presentation, site visitors will quickly realize the idea easier in order to get around among internet pages plus find information CODE/tutorial/accessibility/navigation.asp
5.5 Does the site use consistent and right language? The by using obvious and also simple words advances useful communication. Trying to return across since articulate may be as difficult that will read when inadequately written grammar, in particular when that dialect employed just isn't the visitor's most important language. CODE/tutorial/accessibility/clear.asp
5.6 Does coursesmart use a sitemap page and phone page? Are they will straightforward to be able to find? Most internet site routes don't succeed to convey multiple degrees in the home's facts architecture. In usability tests, users normally forget about site roadmaps or maybe cannot find them. Complexity is likewise a problem: a map need to be a map, not really a navigational challenge of its own. CODE/alertbox/20020106.html
5.7 For large sites, there has to be a search tool? While research resources are generally not really required on smaller sites, and a few persons is not going to ever previously apply them, site-specific research tools enable clients to choose navigation options.
5.8 Is right now there a check out the home internet page on every internet page within the site? Some consumers love to go back to a web-site's home page soon after navigating to content the next site. The home page will become your put faitth on camp to get these types of users, making it possible for these individuals in order to regroup before studying innovative content.
5.9 Are links underlined? To maximise the actual understood affordance with clickability, colour and underline the actual website text. Users should never need to imagine as well as rinse your web site to find out when they can click. CODE/alertbox/20040510.html
5.10 Are went to inbound links evidently defined? Most important, realizing which in turn websites towards the by now stopped at frees customers from inadvertently revisiting the same pages again and again again. CODE/alertbox/20040503.html
6. Site management
6.1 Does the website have a meaningful as well as beneficial 404 error site which is effective from any degree from the site? You've required your page - also by way of keying a URL directly in to the address bar or perhaps clicking on a good out-of-date website as well as you've got discovered yourself at the center of cyberspace nowhere. A user-friendly internet site offers you a helping fretting hand while many others will probably merely accomplish nothing, depending on the browser's built-in capability to help describe what the condition is. CODE/articles/perfect404/
6.2 Does coursesmart use helpful URLs? Most engines like google (with a number of conditions - namely Google) will not catalog any kind of webpages that are fitted with your dilemma indicate or maybe additional nature (like an ampersand or equals sign) inside the URL... what beneficial is really a internet site whenever no-one can find it? CODE/article/search-engine-friendly-urls
One of the toughest factors with the web from a user program point of view can be your URL. However, if they really are short, logical, in addition to self-correcting, URLs may be acceptably usable CODE/theory/20010305.html
More: CODE/article/search-engine-friendly-urls
CODE/article/32
CODE/theory/20010305.html
6.3 Does this site's URL operate without having "www"? While this is not critical, and also sometimes is not perhaps possible, it is always good to give people the selection involving each options. If your individual forms a person's website appoint with no online world in addition to will get very little site, this could weakness both an individual in addition to you. 6.4 Does as well as have a very favicon?
A Favicon is really a multi-resolution photo included on close to most by a professional created sites. The Favicon allows the particular website owner to help enhance their site, and to develop a extra tailor-made visual appeal within a visitor's browser. CODE/
Favicons usually are not really critical. However, as long as they usually are not present, they are able to trigger 404 problems within your firewood (site statistics). Browsers like IE will require these individuals in the server as soon as a site can be bookmarked. If a favicon just isn't available, a 404 fault could possibly be generated. Therefore, developing a favicon could lessen on favicon unique 404 errors. The similar is true of some sort of 'robots.txt' file.
???????
沒有留言:
張貼留言