Web Standards Checklist Max

download Web Standards Checklist Max

of 29

Transcript of Web Standards Checklist Max

  • 8/13/2019 Web Standards Checklist Max

    1/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 1/29

    Web standards checklist

    Date: 13 August 2004

    Author: Russ Weakley

    Web standards more than just table-free sites

    The term web standards can mean different things to different people. For some, it is table-free

    sites, for others it is using valid code. However, web standards are much broader than that. A sitebuilt to web standards should adhere to standards(HTML, XHTML, XML, CSS, XSLT, DOM,

    MathML, SVG etc) and pursue best practices(valid code, accessible code, semantically correct

    code, user-friendly URLs etc).

    In other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible,

    usable and search 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 l ist of items that mustbe addressed on every site that you develop. It is

    simply a guide that can be used:

    to show the breadth of web standards

    as a handy tool for developers during the production phase of websites

    http://www.maxdesign.com.au/about/russweakley/http://www.maxdesign.com.au/http://www.maxdesign.com.au/http://www.maxdesign.com.au/about/russweakley/http://www.maxdesign.com.au/
  • 8/13/2019 Web Standards Checklist Max

    2/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 2/29

    as an aid for developers who are interested in moving towards web standards

    The checklist

    1. Quality of code

    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 hacks?

    6. Does the site use unnecessary classes or ids?

    7. Is the code well structured?

    8. Does the site have any broken 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 images in the CSS, or do they appear in the (X)HTML?

    3. Accessibi lity for users

    1. Are alt attributes used for all descriptive images?

    2. Does the site use relative units rather than absolute units for text size?

    3. Do any aspects of the layout break if font size is increased?

    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)?

    http://www.maxdesign.com.au/articles/checklist/#section3-10http://www.maxdesign.com.au/articles/checklist/#section3-9http://www.maxdesign.com.au/articles/checklist/#section3-8http://www.maxdesign.com.au/articles/checklist/#section3-7http://www.maxdesign.com.au/articles/checklist/#section3-6http://www.maxdesign.com.au/articles/checklist/#section3-5http://www.maxdesign.com.au/articles/checklist/#section3-4http://www.maxdesign.com.au/articles/checklist/#section3-3http://www.maxdesign.com.au/articles/checklist/#section3-2http://www.maxdesign.com.au/articles/checklist/#section3-1http://www.maxdesign.com.au/articles/checklist/#usershttp://www.maxdesign.com.au/articles/checklist/#section2-2http://www.maxdesign.com.au/articles/checklist/#section2-1http://www.maxdesign.com.au/articles/checklist/#degreehttp://www.maxdesign.com.au/articles/checklist/#section1-10http://www.maxdesign.com.au/articles/checklist/#section1-9http://www.maxdesign.com.au/articles/checklist/#section1-8http://www.maxdesign.com.au/articles/checklist/#section1-7http://www.maxdesign.com.au/articles/checklist/#section1-6http://www.maxdesign.com.au/articles/checklist/#section1-5http://www.maxdesign.com.au/articles/checklist/#section1-4http://www.maxdesign.com.au/articles/checklist/#section1-3http://www.maxdesign.com.au/articles/checklist/#section1-2http://www.maxdesign.com.au/articles/checklist/#section1-1http://www.maxdesign.com.au/articles/checklist/#quality
  • 8/13/2019 Web Standards Checklist Max

    3/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 3/29

    4. Accessibi lity for devices

    1. Does the site work acceptably across modern and older browsers?

    2. Is the content accessible wi th CSS switched off or not supported?

    3. Is the content accessible wi th images 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 clear visual hierarchy?

    2. Are heading levels easy to distinguish?

    3. Is the sites navigation easy to understand?

    4. Is the sites navigation consistent?

    5. Does the site use consistent and appropriate language?

    6. Does the site have a sitemap page and contact page? Are they easy to find?

    7. For large sites, is there a search tool?

    8. Is there a link to the home page on every page in the site?

    9. Are links underlined?

    10. Are visited links clearly defined?

    6. Site management

    1. Does the site have a meaningful 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 code

    1.1 Does the site use a correct Doctype?

    http://www.maxdesign.com.au/articles/checklist/#section6-4http://www.maxdesign.com.au/articles/checklist/#section6-3http://www.maxdesign.com.au/articles/checklist/#section6-2http://www.maxdesign.com.au/articles/checklist/#section6-1http://www.maxdesign.com.au/articles/checklist/#sitehttp://www.maxdesign.com.au/articles/checklist/#section5-10http://www.maxdesign.com.au/articles/checklist/#section5-9http://www.maxdesign.com.au/articles/checklist/#section5-8http://www.maxdesign.com.au/articles/checklist/#section5-7http://www.maxdesign.com.au/articles/checklist/#section5-6http://www.maxdesign.com.au/articles/checklist/#section5-5http://www.maxdesign.com.au/articles/checklist/#section5-4http://www.maxdesign.com.au/articles/checklist/#section5-3http://www.maxdesign.com.au/articles/checklist/#section5-2http://www.maxdesign.com.au/articles/checklist/#section5-1http://www.maxdesign.com.au/articles/checklist/#usabilityhttp://www.maxdesign.com.au/articles/checklist/#section4-8http://www.maxdesign.com.au/articles/checklist/#section4-7http://www.maxdesign.com.au/articles/checklist/#section4-6http://www.maxdesign.com.au/articles/checklist/#section4-5http://www.maxdesign.com.au/articles/checklist/#section4-4http://www.maxdesign.com.au/articles/checklist/#section4-3http://www.maxdesign.com.au/articles/checklist/#section4-2http://www.maxdesign.com.au/articles/checklist/#section4-1http://www.maxdesign.com.au/articles/checklist/#devices
  • 8/13/2019 Web Standards Checklist Max

    4/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 4/29

    A doctype (short for document type declaration) informs the validator which version of

    (X)HTML youre using, and must appear at the very top of every web page. Doctypes are a

    key component of compliant web pages: your markup and CSS wont validate without them.

    Fix your site with the right 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 agent (eg. a browser) is unable to detect the character encoding used in a Web

    document, the user may be presented with unreadable 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.

    Tutorial: Character sets & encodings in XHTML, HTML and CSS

    More:

    Character encodings

    1.3 Does the site use Valid (X)HTML?

    http://www.w3.org/International/O-charset.htmlhttp://www.w3.org/International/tutorials/tutorial-char-enc/http://gutfeldt.ch/matthias/articles/doctypeswitch.htmlhttp://css.maxdesign.com.au/listamatic/about-boxmodel.htmhttp://www.w3.org/QA/2002/04/valid-dtd-list.htmlhttp://users/neel/Pictures/Web%20standards%20checklist%20%20%20Max%20Design_files/saved_resource
  • 8/13/2019 Web Standards Checklist Max

    5/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 5/29

    Valid code will render faster than code with errors. Valid code will render better than invalid

    code. Browsers are becoming more standards compliant, and it is becoming increasingly

    necessary to write valid and standards compliant HTML

    What is valid code

    More:

    W3C Markup Validation Service

    1.4 Does the site use Valid CSS?

    You need to make sure that there arent any errors in either your HTML or your CSS, since

    mistakes in either place can result in botched document appearance.

    Help! My CSS Isnt Working!

    More:

    W3C CSS Validation Service

    1.5 Does the site use any CSS hacks?

    Basically, hacks come down to personal choice, the amount of knowledge you have of

    workarounds, the specific design you are trying to achieve.

    Standard Hacks?

    http://www.mail-archive.com/[email protected]/msg05823.htmlhttp://jigsaw.w3.org/css-validator/http://www.meyerweb.com/eric/articles/webrev/199904.htmlhttp://validator.w3.org/http://www.maxdesign.com.au/presentation/benefits/index05.htm
  • 8/13/2019 Web Standards Checklist Max

    6/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 6/29

    More:

    CSS Hacks

    To hack or not to hack

    CSS filters

    1.6 Does the site use unnecessary classes or ids?

    Ive noticed that developers learning new skills often end up with good CSS but poor

    XHTML. Specifically, the HTML code tends to be full of unnecessary divs and ids. This

    results in fairly meaningless HTML and bloated style sheets.

    Markup tactics

    1.7 Is the code well structured?

    Semantically correct markup uses html elements for their given purpose. Well structured

    HTML has semantic meaning for a wide range of user agents (browsers without style sheets,

    text browsers, PDAs, search engines etc.)

    Semantically correct markup

    More:

    Semantic data extractor

    1.8 Does the site have any broken links?

    http://www.w3.org/2003/12/semantic-extractor.htmlhttp://www.maxdesign.com.au/presentation/benefits/index04.htmhttp://www.clagnut.com/blog/228/http://centricle.com/ref/css/filters/http://css-discuss.incutio.com/?page=ToHackOrNotToHackhttp://css-discuss.incutio.com/?page=CssHack
  • 8/13/2019 Web Standards Checklist Max

    7/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 7/29

    Broken links can frustrate users and potentially drive customers away. Broken links can also keep

    search engines from properly indexing your site.

    More:

    W3C Link checker

    1.9 How does the site perform in terms of speed/page size?

    Dont make me wait Thats the message users give us in survey after survey. Even

    broadband users can suffer the slow-loading blues.

    Speed Up Your Site: Web Site Optimization

    1.10 Does the site have JavaScript errors?

    Internet Explore for Windows 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

    Web Content Accessibility Guidelines 1.0 checkpoint 3.3

    http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-style-sheetshttp://www.websiteoptimization.com/speed/http://validator.w3.org/checklink
  • 8/13/2019 Web Standards Checklist Max

    8/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 8/29

    2.2 Are all decorative images in the CSS, or do they appear in the (X)HTML?

    The aim for web developers is to remove all presentation from the html code, leaving it clean

    and semantically correct.

    3. Accessibility for users

    3.1 Are alt attributes used for all descriptive images?

    Provide a text equivalent for every non-text element

    Web Content Accessibility Guidelines checkpoint 1.1

    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

    Web Content Accessibility Guidelines checkpoint 3.4

    More:

    Web Content Accessibility Guidelines checkpoint 3.4

    How to size text using ems

    http://www.clagnut.com/blog/348/http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-unitshttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-unitshttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-text-equivalent
  • 8/13/2019 Web Standards Checklist Max

    9/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 9/29

    3.3 Do any aspects of the layout break if font size is increased?

    Try this simple test. Look at your website in a browser that supports easy incrementation of font

    size. Now increase your browsers 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.

    Section 508

    Group related links, identify the group (for user agents), and, until user agents do so, provide

    a way to bypass the group

    Web Content Accessibility Guidelines checkpoint 13.6

    blind visitors are not the only ones inconvenienced by too many links in a navigation area.

    Recall that a mobility-impaired person with poor adaptive technology might be stuck tabbingthrough that morass.

    Keep them visible!

    3.5 Does the site use accessible forms?

    http://joeclark.org/book/sashay/serialization/Chapter08.html#h4-2020http://www.w3.org/TR/WCAG10-TECHS/#tech-group-linkshttp://www.section508.gov/index.cfm?FuseAction=Content&ID=12
  • 8/13/2019 Web Standards Checklist Max

    10/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 10/29

    Forms arent the easiest 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

    Accessible forms

    More:

    Accessible html/xhtml forms

    Accessible form builder

    3.6 Does the site use accessible tables?

    For data tables, identify row and column headers For data tables that have two or more

    logical levels of row or column headers, use markup to associate data cells and header

    cells.

    Web Content Accessiblity Guidelines checkpoint 5.1

    More:

    How to create accessible tables

    Accessible table builder

    Creating accessible tables

    3.7 Is there sufficient colour brightness/contrasts?

    http://www.webaim.org/techniques/tables/http://www.accessify.com/tools-and-wizards/accessibility-tools/table-builder/http://bellevuecollege.edu/webpublishing/tips/accessibility/tables.asphttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-table-headershttp://www.accessify.com/tools-and-wizards/accessible-form-builder.asphttp://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.htmlhttp://www.htmldog.com/guides/htmladvanced/forms/
  • 8/13/2019 Web Standards Checklist Max

    11/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 11/29

    Ensure that foreground and background colour combinations provide sufficient contrast

    when viewed by someone having colour deficits

    Web Content Accessibilty Guidelines checkpoint 2.2

    More:

    Colour Contrast Analyser

    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

    Web Content Accessibilty Guidelines checkpoint 2.1

    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:

    Colourblind Webpage filterVischeck

    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.

    http://www.vischeck.com/vischeck/vischeckURL.phphttp://colorfilter.wickline.org/http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-color-conveyhttp://www.juicystudio.com/services/colourcontrast.asphttp://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#tech-color-contrast
  • 8/13/2019 Web Standards Checklist Max

    12/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 12/29

    3.10 Are all links descriptive?

    Link text should be meaningful enough to make sense when read out of context either on

    its own or as part of a sequence of links. Link text should also be terse.

    Web Content Accessibility Guidelines 1.0 checkpoint 13.1

    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.

    Colored boxes one method of building full CSS layouts

    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 images switched off or not supported?

    Some people browse websites with images switched off especially people on very slow

    connections. Content should still be accessible for these people.

    http://www.maxdesign.com.au/presentation/process/index_step01.cfmhttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-meaningful-links
  • 8/13/2019 Web Standards Checklist Max

    13/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 13/29

    4.4 Does the site work in text browsers such as Lynx?

    This is like a combination of images and CSS switched off. A text-based browser will rely on well

    structured content to provide meaning.

    More:

    Lynx Viewer

    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.

    Going to print

    More:

    Web Design References Print

    4.6 Does the site work well in Hand Held devices?

    This is a hard one to deal 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?

    http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#printhttp://www.alistapart.com/articles/goingtoprint/http://www.delorie.com/web/lynxview
  • 8/13/2019 Web Standards Checklist Max

    14/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 14/29

    Metadata is machine understandable information for the web

    W3C Metadata and Resource Description

    Metadata is structured information that is created speci fically 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 increasing. 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 clear visual hierarchy?

    Organise and prioritise the contents of a page by using size, prominence and content

    relationships

    Create a Clear Visual Hierarchy

    5.2 Are heading levels easy to distinguish?

    Use header elements to convey document structure and use them according to specification

    http://www.great-web-design-tips.com/web-site-design/165.htmlhttp://www.w3.org/Metadata/
  • 8/13/2019 Web Standards Checklist Max

    15/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 15/29

    Web Content Accessibility Guidelines 1.0 checkpoint 3.5

    5.3 Is the sites navigation easy to understand?

    Your navigation system should give your visitor a clue as to what page of the site they arecurrently on and where they can go next.

    Design Tutorial Navigation

    5.4 Is the sites navigation consistent?

    If each page on your site has a consistent style of presentation, visitors will find it easier tonavigate between pages and find information

    Juicy studios Navigation

    5.5 Does the site use consistent and appropriate language?

    The use of clear and simple language promotes effective communication. Trying to come

    across as articulate can be as difficult to read as poorly written grammar, especially if the

    language used isnt the visitors primary language.

    Clear language

    http://www.juicystudio.com/tutorial/accessibility/clear.asphttp://www.juicystudio.com/tutorial/accessibility/navigation.asphttp://www.1stsitefree.com/design_nav.htmhttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-logical-headings
  • 8/13/2019 Web Standards Checklist Max

    16/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 16/29

    5.6 Does the site have a sitemap page and contact page? Are they easy to find?

    Most site maps fail to convey multiple levels of the sites information architecture. In usability

    tests, users often overlook si te maps or cant find them. Complexity is also a problem: a map

    should be a map, not a navigational challenge of its own.

    Site Map Usability

    5.7 For large sites, is there a search tool?

    While search tools are not needed on smaller sites, and some people will not ever use them, site-

    specific search 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 sites 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 shouldnt have to guess or scrub the page to find out where they can click.

    Guidelines for Visualizing Links

    http://www.useit.com/alertbox/20040510.htmlhttp://www.jnd.org/dn.mss/affordances-and-design.htmlhttp://www.useit.com/alertbox/20020106.html
  • 8/13/2019 Web Standards Checklist Max

    17/29

  • 8/13/2019 Web Standards Checklist Max

    18/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 18/29

    One of the worst elements of the web from a user interface standpoint is the URL. However,

    if theyre short, logical, and self-correcting, URLs can be acceptably usable

    How to make URLs user-friendly

    More:

    Creating Search Engine Friendly URLs

    How to make URLs user-friendly

    6.3 Does the sites URL work without www?

    While this is not critical, and in some cases is not even possible, it is always good to give peoplethe 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 image included on nearly all professionally developed sites.

    The Favicon allows the webmaster to further promote their site, and to create a more

    customized appearance within a visitors browser

    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 wil l request them from the server when a site is

    http://www.favicon.com/http://www.merges.net/theory/20010305.htmlhttp://www.websitegoodies.com/article/32http://www.merges.net/theory/20010305.html
  • 8/13/2019 Web Standards Checklist Max

    19/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 19/29

    bookmarked. If a favicon isnt available, a 404 error may be generated. Therefore, having a favicon

    could cut down on favicon specific 404 errors. The same is true of a robots.txt file.

    More about this list

    This checklist was first outlined in a rough form on the Web Standards Mail list in May 2004. It was

    presented to the Sydney Web Standards Group on 5 August 2004. It is also available as a

    downloadable pdf checklist for developers.

    The presentation is also available in:

    Bulgarian, thanks to Boby Dimitrov

    Chinese, thanks to Jjgod Jiang

    Spanish, thanks to Osvaldo Rainero

    Italian, thanks to Franco Carcillo

    Italian, thanks to Livio MondiniFrench, thanks to Christophe Ducamp

    German, thanks to Mario Mueller

    Polish, thanks to Krzysztof Szafranek

    French (Quebec), thanks to Chantal Ide

    Portuguese, thanks to Mauricio Samy Silva

    Czech, thanks to Vit Dlouhy

    Russian, thanks to Alex Kachanov

    Finnish, thanks to Kalamuki

    Serbian, thanks to Goran Mitic

    Hungarian, thanks to Krisztian Klisics

    Dutch, thanks to Ramon Eijkemans

    Romanian, thanks to Adrian Sandu

    Russian, thanks to Nickolas Loiko

    Swedish, thanks to Lillan Backa

    http://kaxigt.com/http://kaxigt.com/web-standards-checklist-checklista-for-webbstandarder/http://cssmake.ru/http://cssmake.ru/component/content/article/7/104.htmlhttp://www.tridentdesign.com/http://www.tridentdesign.com/ro-webstandards-checklist.phphttp://www.textdesign.nl/http://www.monlog.nl/logs/2007-01-13-webstandaarden-checklist-seo/http://klisics.hu/http://klisics.hu/technikai_informaciohttp://www.globalnoselo.com/http://www.globalnoselo.com/2005/09/19/web-standardi-checklist/http://kalamuki.net/http://kalamuki.net/ekstra/tarkistuslista/http://www.webmascon.com/http://www.webmascon.com/topics/tools/09a.asphttp://vitdlouhy.cz/http://vitdlouhy.cz/clanky/webove-standardy.htmlhttp://www.maujor.com/http://www.maujor.com/WSchecklist.htmlhttp://www.divetheweb.com/dive/http://www.w3qc.org/docs/webstandards_checklist.htmlhttp://szafranek.net/http://szafranek.net/works/articles/webstandardschecklist/http://www.lingo4u.de/http://www.lingo4u.de/article/checklist/http://www.elanceur.org/FractalCity/http://www.elanceur.org/FractalCity/Articles/Check-ListStandardsduWeb.htmlhttp://www.tiuvizeta.it/http://www.tiuvizeta.it/web_standards.htmlhttp://www.webaccessibile.org/default.asphttp://www.webaccessibile.org/argomenti/argomento.asp?cat=481http://www.nocodestudio.com.ar/blog/http://www.nocodestudio.com.ar/articulos/checklist/index.htmhttp://www.niub.com/jjgod/http://www.niub.com/jjgod/wiki/WebStandardsCheckList.htmlhttp://www.flashbg.org/http://flashbg.org/tutorials/checklist/http://www.maxdesign.com.au/wp-content/uploads/checklist.pdfhttp://www.maxdesign.com.au/presentation/checklist/http://www.mail-archive.com/wsg%40webstandardsgroup.org/msg05279.html
  • 8/13/2019 Web Standards Checklist Max

    20/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 20/29

    Norwegian, thanks to Bjorn Enki

    Belorussian, thanks to P.C.

    Persian, thanks to Behzad Alibeigi

    Thanks as always to Rose Cox for proof reading and Lea de Groot for her developer checklist

    suggestions.

    Comments so far

    Spencer Drager

    February 16, 2010 at 3:28 pm

    Excellent checklist. The only thing I could think was missing was anything about

    FEEDBACK. Ideally, you want some sort of feedback (:hover effects) for most links and

    menus, especially ones which are not explicitly obvious in nature. While not technically a

    web standard, this is highly encouraged for ease of usability.

    Russ

    February 16, 2010 at 9:44 pm

    @spencer: good points!

    rafat

    March 9, 2010 at 6:48 pm

    really useful tips! good work

    http://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-1761http://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-1472http://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-1468http://www.spencerdrager.com/blog/http://elysiansystems.com/http://www.alibeigi.com/http://www.webscala.com/article/1/http://pc.de/http://pc.de/pages/checklisthttp://www.bjornenki.com/http://www.bjornenki.com/articles/md_presentation_checklist
  • 8/13/2019 Web Standards Checklist Max

    21/29

  • 8/13/2019 Web Standards Checklist Max

    22/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 22/29

    bart

    March 18, 2010 at 3:06 am

    really wide and useful tips. but what about design? are there any rules about colors or

    position and shape of menu etc?!

    Russ

    March 18, 2010 at 5:06 am

    @bart: That would be a good list, but an entirely different topic a web design checklist. It

    sounds like it would need to cover design and usability issues. That is not something I would

    be keep to write as it would be very hard to define and document.

    Assignment 1, Part A ImpDeveloper

    April 3, 2010 at 12:29 pm

    [...] 2) Weakley, R. (2004). Web Standards Checklist. Retrieved April 3, 2010, from

    maxdesign.com.au: http://www.maxdesign.com.au/articles/checklist/ [...]

    10 Awesome Resources for Learning More about Web Standards | (e)INTERtain

    April 16, 2010 at 2:45 am

    [...] Web Standards Checklist [...]

    http://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-2191http://davidakennedy.com/10-awesome-resources-for-learning-more-about-web-standards/http://users/neel/Pictures/Web%20standards%20checklist%20%20%20Max%20Design_files/Web%20standards%20checklist%20%20%20Max%20Design.htmlhttp://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-2014http://impdeveloper.wordpress.com/2010/04/02/itc216_assignment1a/http://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-1879http://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-1876
  • 8/13/2019 Web Standards Checklist Max

    23/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 23/29

    100+ Resources for Web Designers bwintz

    April 25, 2010 at 6:09 am

    [...] Web Standards Checklist [...]

    uk website design

    June 15, 2010 at 8:08 pm

    its an amazing check list..

    very well defined

    thanks for sharing dis

    web designing & SEO Hyderabad

    June 18, 2010 at 10:39 pm

    Excellent really useful checklist. thanks for sharing.

    What Is The Last Thing You Do Before You Launch A Website? - Smashing Magazine

    July 13, 2010 at 10:11 pm

    [...] [...]

    http://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-3409http://www.smashingmagazine.com/2010/07/13/what-is-the-last-thing-you-do-before-you-launch-a-website/http://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-3116http://www.pujya.com/http://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-3065http://www.ukwebsitedesigncompany.co.uk/http://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-2293http://bwintz.wordpress.com/2010/04/24/100-resources-web-designers/
  • 8/13/2019 Web Standards Checklist Max

    24/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 24/29

    What Is The Last Thing You Do Before You Launch A Website? | Web Design Cool

    July 13, 2010 at 10:43 pm

    [...] Web Standards Checklist [...]

    What Is The Last Thing You Do Before You Launch A Website? |

    July 13, 2010 at 11:17 pm

    [...] Web Standards Checklist [...]

    TG Designer What Is The Last Thing You Do Before You Launch A Website?

    July 14, 2010 at 2:21 am

    [...] Web Standards Checklist [...]

    What Is The Last Thing You Do Before You Launch A Website? Shai Perednik.com

    July 14, 2010 at 4:00 am

    [...] Web Standards Checklist [...]

    ArticleSave :: Uncategorized :: What Is The Last Thing You Do Before You Launch A Website?

    July 14, 2010 at 4:03 pm

    6 b d d h li | i

    http://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-3421http://articlesave.parsafatehi.com/2010/07/14/9579/what-is-the-last-thing-you-do-before-you-launch-a-website/http://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-3419http://shaiperednik.com/2010/07/what-is-the-last-thing-you-do-before-you-launch-a-website/http://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-3416http://www.tgdesigner.co.uk/smashing-magazine/what-is-the-last-thing-you-do-before-you-launch-a-website/http://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-3413http://completefarmvilleguide.com/what-is-the-last-thing-you-do-before-you-launch-a-website/http://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-3410http://www.webdesigncool.com/what-is-the-last-thing-you-do-before-you-launch-a-website
  • 8/13/2019 Web Standards Checklist Max

    25/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 25/29

    [...] Web Standards Checklist [...]

    What Is The Last Thing You Do Before You Launch A Website? | Creative Man Studio

    July 15, 2010 at 7:58 am

    [...] [...]

    What Is The Last Thing You Do Before You Launch A Website? | i know idea

    July 16, 2010 at 10:12 pm

    [...] Web Standards Checklist [...]

    No bata palmas para meias-verdades! ? Revoluo Etc

    July 21, 2010 at 2:40 am

    [...] Recentemente se tem discutido muito sobre critrios de avaliao de um trabalho web,

    se "tableless" ou no, se "webstandards" ou no e por a vai. Alguns defendem

    simplesmente trocar tabelas por divs outros defendem que apenas se o cdigo estiver

    validado pelo validador da W3C que o trabalho ser webstandards. Navegando pelo site

    do Maujor, CSS para Web Design encontrei o CheckList para web standards que uma

    traduo de um artigo do Russ Weakley. [...]

    Usability Guidelines Right4web's Blog

    http://right4web.wordpress.com/2010/07/23/usability-guidelines/http://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-3490http://revolucao.etc.br/archives/nao-bata-palmas-para-meias-verdades/http://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-3450http://www.iknowidea.com/generate-idea/what-is-the-last-thing-you-do-before-you-launch-a-website/http://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-3435http://www.creativemanstudio.com/blog/what-is-the-last-thing-you-do-before-you-launch-a-website/
  • 8/13/2019 Web Standards Checklist Max

    26/29

    1/16/14 W b t d d h kli t | M D i

  • 8/13/2019 Web Standards Checklist Max

    27/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 27/29

    Im an extremist regarding web standards, although Im just an amateur in the f2e world (7

    months old ^^), may I add some accessibility requirement from your list.

    1. Image description although not mandatory in every images, you should at least put

    desc into your logo, in case the use wants to know what the logo is all about, it is the

    opposite of alt, which is the short version.

    2. d-link because desc is not majorly supported by browsers (even the major browsers),this will serve as the alternative to link to your desc file.

    3. skip-link You should give users (especially for blind users using assistive technology

    e.g. screen reader) to be able to skip navigation links. Skip links help the user to jump

    immediately to content, rather than letting them wait to read out all the l inks of the page

    before even reaching the content.

    4. default value for input elements/tags This is useful for forms and even search features of

    your web site. This allows the user to know what should be typed in the field.

    Keep up the good work,

    Kind regards,

    Jelome ^^,

    Russ

    August 9, 2010 at 12:40 pm

    Hi Emmanuel-Jelome

    Good to hear from you. Thank you for the comments.

    Re points 1 and 2:

    1/16/14 Web standards checklist | Max Design

    http://www.maxdesign.com.au/articles/checklist/comment-page-1/#comment-3682
  • 8/13/2019 Web Standards Checklist Max

    28/29

    1/16/14 Web standards checklist | Max Design

    file:///Users/neel/Pictures/Web standards checklist Max Design.html 28/29

    I presume you are talking about the longdesc attribute?

    http://www.w3.org/TR/REC-html40/struct/objects.html#adef-longdesc-IMG

    [img longdesc="URL" alt="ALT text" /]

    We have found that although longdesc is great, it has two issues:

    1. people stopped using them some time ago so it has died out as a practice

    2. in all of our testing, blind users did not use these they are bombarded by too much infoanyway, and generally a good alt attribute was more than enough.

    Re point 3:

    There is info on skip links above.

    Re point 4:

    I am not a fan of adding values into input elements as a general. I think it is much more

    important to include a good label , with a for attribute that describes the input element.

    Labels are vital for blind users, and useful for everyone.

    One key issue with adding a value into an input field is that it should be cleared before

    users start typing otherwise it can cause all sorts of usability issues agin, this affects

    sighted and blind users.

    Our details

    Phone:

    612 9410 2521

    Mobile:

    0403 433 980

    Address:

    1/16/14 Web standards checklist | Max Design

    http://www.w3.org/TR/REC-html40/struct/objects.html#adef-longdesc-IMG
  • 8/13/2019 Web Standards Checklist Max

    29/29

    1/16/14 Web standards checklist | Max Design

    fil ///U / l/Pi /W b d d h kli M D i h l 29/29

    19 Hawthorne Avenue

    Chatswood West

    NSW 2067 Australia