TT280 - Standands, Compatibility and Access Issues
Standards
The standards defined at the World Wide Web Consortium (W3C) , these pages have been designed to conform to the XHTML 1.0 Strict standard as defined by the W3C. The W3C offers a validation service at their site to check HTML page for conformance to the specification. These templates have been validated at the W3C site, and have all passed. The Cascading Style Sheet (CSS) used by the templates was also validated.
With the development of HTML the WC3 has increasingly decided to move the document formatting out of the HTML document by creating a referencing document that contains the formatting information, this format holding document is known as a Cascading Style Sheet CSS. HTML elements such as <font> are known as depreciated since the formatting attributes are available in CSS currently and will be moved completely to CSS in future versions of the language. Other elements such as <comment> have been declared obsolete though most current browsers still support such elements. Future developments of HTML are seen by the W3C to be XML, XHTML, XSLT (Extensible Mark-up Language, Extensible Hypertext Mark-up Language and Extensible Style Sheets).
For your document to validate you need to add a DTD to the start of your page to let the validator know which version you are using. the following example is for HTML 4.01 Transitional although there are many others - visit W3C for more details.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
The above statement is inserted in you page code at the start before the <html> tag.
HTML Code Validators:
W3C's HTML validator - World Wide Web Consortiums own HTML validator
W3C's CSS validator - World Wide Web Consortiums own CSS validator
CSE HTML Validator Pro 4.05 - This one was being given away on magazine disks recently
Compatibility Issues
Compatibility issues are a major headache when designing a site. There are many problems; one is that of cross browser compatibility. People surfing the Web do so with a variety of operating systems and browsers. Normally the operating systems themselves do not cause problems but screen resolution settings and font availability can cause problems with poorly designed web pages.
Cross-browser compatibility
In the world of browsers all things are not created equal, there are many different browsers and browser versions all of varying ages. So not only does the site have to cater for cross browser compatibility issues but also for different versions of the same browser type. Each browser has a slightly different way of displaying the HTML page; some due to their age may not display the page properly or sometimes not at all.
Although these templates have validated and the CSS has the various colour information for the pages within it, the coloured areas of the site have also been declared in the appropriate tags in the HTML documents, this is to provide compatibility with older non or partially CSS compliant browsers.
The main point about CCS compatibility or lack of it is that the CCS style of the document should degrade gracefully as the browser version gets older and thus less compliant. An example here is the company title text, when viewed in a version 6 browser the text is shown as oblique however in a version 4 browser such as Netscape 4.7 is appears as normal text because oblique is not supported by this particular browser.
Differing Screen Resolutions
There are several methods of providing this screen resolution compatibility:
Variable Width Design: the base tables for each template are set to a width of 100%, which means they are always be as wide as the viewer’s screen.
Fixed Width Design: where the base table is set to a specific width usually 640 pixels, the main problem with this is as the users resolution increases the amount of screen used becomes smaller and you end up with a small band of page down the screen.
Using browser detection code it is possible to either switch the user to pages designed for that resolution or switch CCS style sheets to one optimised for that resolution.
Those browsers not supporting CSS will use their own default fonts to display the page.
Accessibility Issues
The vast majority of visitors will not be viewing with graphics turned off or using text only browsers. However there are those who use text only browsers like Lynx or browse with images turned off. There are ways to provide them with information about the images they have chosen not to view.
Alt Tag:
For those using text only browsers or surfing with images turned off the ‘alt tag’ (attribute of the image tag) gives a little information about the picture they are unable to view.
Example Use:
<img name="Demo" src="" width="120" height="120"
alt="Alt Text Demo" style="background-color: #999999">
The Alt Text should be visible in the image placeholder above
Title Attribute:
The addition of the ‘title’ attribute to the <a> tag it is possible to add additional information to links which work in a similar fashion to tooltips in Windows.
Example Use:
<a href="tt280_standards.htm" title = " Using the title attribute
you can create a windows style tooltip to you links">Title
Info</a>
Try it - this is linked to this page so you won't loose you place - just hold the mouse over it for a short will to see the contents of the title attribute display.