• View
• Edit
• History
• Print

Due to spam attacks I had to password protect editing. The password is the web standard you use to define the presentation of a web site (in uppercase).

MACCAWS-Whitepaper-Embracing Standards

• Introduction
• Standards and the Web
• Some common myths
• The benefits of Web standards
• How to embrace Web standards
• Appendix

How to embrace Web standards

Improving the layout of your Web site with Web standards

Web standards and Web design are related but are also quite independent. A Web site that does not adhere to standards can be made standards-compliant without affecting the design. On the other hand, using Web standards can give you more design flexibility and allow you to achieve layouts that are not possible with non-compliant layout methods.

Layout Method	Advantages	Disadvantages
Table-Based	works uniformly across most visual browsers; possible to have a layout that adheres to HTML standards	most table-based layouts are not actually standards compliant; not flexible enough to work across all available media; content could be unavailable to some users
CSS-based	content available across device media and platform; smaller file sizes and faster page loads; less bandwidth usage; faster development and maintenance; easier to redesign	users with older browsers may not enjoy the same visual experience as not all CSS renders correctly on older browsers; web authors may have to learn new coding techniques

Table-based layout

The traditional way of designing Web pages is what is known by experienced Web authors as “table-based layouts”. When using this method, elements in a Web page — page titles, menus, graphics and the content — are all placed using HTML tables.

Advantages

The advantage of this of table-based layouts is that tables have been around for a long time and work uniformly across most visual browsers; therefore you can expect the design to be consistent across computers.

It is possible to have a table-based layout that adheres to HTML standards.

Disadvantages

Due to the lack of knowledge amongst Web authors and poor standards-support in most authoring tools, many such Web sites are not standards-compliant.

Unfortunately, table-based layouts are not flexible enough to work across all available media. Emerging wireless technologies and assistive technologies, such as screen readers, cannot render table-based layouts. This effectively means such Web sites could be unpleasant to use and inaccessible to a part of the population.

The CSS-based method

An increasingly popular method that skilled Web authors use today is to design Web sites without using tables for layout. This means that a Web author uses HTML or XHTML exclusively for the structural markup of the Web site, and uses one or more global CSS files to specify all presentational elements — including the placement of content.

Advantages

One advantage of the CSS-based layout is its flexibility — the content can be accessed regardless of the type of browser that is being used. It allows Web authors to build sites that work on many kinds of devices instead of just the personal computer.

Other advantages include:

• smaller file sizes and faster page loads,
• less bandwidth usage,
• faster development and maintenance,
• easier to redesign,
• and more.

These advantages have been discussed in detail in “The benefits of Web standards”.

Disadvantages

The main disadvantage with CSS-based layouts is that older browsers, may not render the design in its full glory because CSS was an emerging standard when the older browsers were first released. With good use of standards, users viewing CSS-based Web pages through older browsers will still access all of the content; these users will simply have a different visual experience. Most modern browsers today such as Mozilla, Opera, Konqueror and Safari have no problems with CSS-based layouts. Microsoft Internet Explorer, arguably the most widely-used browser, is able to render most CSS-based designs, but even the latest versions have inherent faults with CSS support. We discuss this issue in the context of the myth: “It doesn't look the same on all browsers”.

Another disadvantage is that many Web authors are not yet familiar with CSS-based layouts. It has taken time for browsers to correctly apply standards; as a result, Web authors who are new to the method must learn new techniques to achieve consistent design behavior across browsers.

Deciding upon a method

Both Web design methods can be standards-compliant, but in choosing which standards and which method to use, you will have to decide which method will bring you the best returns. To fully leverage the advantages of standards-compliance, we recommend that you take the plunge and adopt the CSS-based layouts, as this is the methodology that will bring you more benefits well into the future. Choosing your standards

Choose a layout method

Earlier on, we described the two main development methods that Web authors use today: the table-based method of using HTML tables for designing page layouts, and the CSS-based method to layout pages. The table-based method allows Web authors to cater for older generation browsers at the cost of inflexibility in handling new devices such as cellphones and PDAs. The CSS-based method of Web design has added advantages of providing basic accessibility and interoperatibility, at the compromise of a simplified visual experience in older browsers.

XHTML or HTML

Both table-based and CSS-based layout methods can make use of valid XHTML 1.0 Strict and CSS. Given there is no technical advantage in using HTML 4.01 anymore, we suggest that any new project you undertake should make use of XHTML, as this will allow you to further handle different XHTML versions (for example, XHTML for mobile devices) with incredible ease. XHTML is only one small step away from XML, which will provide you with greater data management options should your information needs expand.

Some people would argue that there is no real advantage to using XHTML because most browsers in use today don't handle XHTML differently from HTML 4.01. However, it is not more difficult to author XHTML compared to HTML 4.01. When all browsers can handle XHTML properly, there is only a minor change you have to make on your server configuration to make the switch. Therefore, it makes sense to author in XHTML now.

You can already begin to serve XHTML properly to clients that support it. Here's how.

Accessibility laws

It is in your best interests to adopt accessibility standards, the most generic being the Web Content Accessibility Guidelines. In the United States, the definitive Web accessibility law is Section 508 of the Rehabilitation Act, but around the world, the legal guidelines vary. The applicable law in the United Kingdom is The Disability Discrimination Act. It is worthwhile to spend some time investigating into which laws apply to you. Making your Web site accessible is good practice, it avoids legal trouble and it opens the door to more customers.

Demanding only the best

If you are outsourcing, or hiring external contractors to build your Web site, make Web standards a fundamental part of your project proposal or requirements document:

• Take the care to specify the standards you want to use, and which versions of these standards you require — for example: you may want to request a site that uses XHTML 1.0 Strict, CSS 2.0 and SVG 1.1.
• The issue of Web accessibility continues to draw public attention. You should require an accessible site that adheres to the Web Content Accessibility Guidelines and to your local accessibility-related laws.
• If your site crosses national and cultural barriers, ensure that it can reach everyone and demand that your vendors or team produce a site that takes internationalization into consideration.

You have the right to require what you believe is in the best for your business in both the development process and the final product; ask for standards compliance.

Educate your team

Depending on the skill level and experience of your Web authors, they may or may not have heard about standards. You may get blank stares or cynical comments upon your first mention of Web standards.

Developers have been slow to adopt Web standards for several reasons:

They have never been taught properly

The Web grew very fast and very fierce, as a result, many books and design courses were based on outdated and incorrect Web practices in order to cash in on the growth of the Web. This has severely compromised the skill level and knowledge of Web authors today.

Web authors may not know that things are changing, and if they are not paying attention, their skills will soon become outdated or are already outdated. It is important that your team be trained in Web standards because they are the ones who can ensure that your Web sites are well-oiled and run smoothly. You must train your:

• development team,
• design team,
• project managers,
• maintenance team,
• quality assurance personnel,
• content producers

The tools they use don't produce standards-compliant code

During the fast and fierce early growth of the Web, tool vendors were more interested in securing the market than generating quality Web sites. Consequently, many Web authoring tools are based on a flawed understanding of HTML and outdated authoring practices. If your developers have been using tools that are not standards-aware, it is only understandable that they have never been exposed to best Web practices.

You can find tools that will help you and your team adopt Web standards. The latest version of Dreamweaver MX implements CSS to a very high degree, allowing the CSS-based layout methods to be achieved with ease. It sounds like a lot of hard work, but the most difficult task is probably educating your team, and then providing them with authoring tools that generate standards-compliant code.

“It's too difficult”

Many Web authors have learned one way to create Web sites and found that they haven't needed to change because browsers and user agents have been extremely tolerant of invalid and unstructured HTML. As a result, a subset of Web authors are not willing to learn new and better ways of creating Web sites. You may also experience cynicism from some Web authors who have found CSS difficult to work with because they believe in the idea of “pixel-perfect” design (see Myth #4). Poor implementations of CSS in some older browsers have discouraged some authors from adopting standards technology. However, modern browsers like Mozilla, Safari and Konqueror are standards-aware. Browsers, tools and developers are moving towards adopting standards.

Once you have educated and equipped your team, there are methods you can use to ensure your sites continually comply with Web standards.

What to do for existing Web sites

If you have an existing Web site we suggest an incremental strategy for converting your Web sites to be standards-compliant.

This strategy is explained and outlined in detail in an article entitled “Web Standards Switch” at the W3C Quality Assurance Web site.

You can integrate the process of moving towards a standards-compliant site as part of your regular quality assurance process by:

1. deciding which standard to comply with, determining strategy to make the site accessible, how internationalization applies to the site and any other improvements that will be made to the site;
2. analyzing your Web site against these criteria using the Log Validator — a tool developed by the W3C that aids in fixing the most frequently accessed pages on a particular Web site;
3. deciding on a regular schedule to fix the 10 most popular pages on your Web site using the Log Validator. This way you will begin with the most popular pages and eventually work through your entire site;
4. periodically reviewing the process to ensure that all the necessary pages are being converted to standards.

In this way, you can ensure that your site meets the quality standards you have elected to meet.

Catering for new Web sites

If you are about to begin a new Web project, then you are in the fortunate position of being able to start with a blank slate — you are in the best position to take advantage of Web standards.

Make Web standards a part of the requirements for your Web site.

Whether you are developing your site in-house or contracting the project outside your immediate team or company, you will need to specify clearly which standards you have decided to meet. You may wish to consult the article released by the W3C QA Group titled “Buy standards-compliant Web sites”, that has a table of specific requirements you can use for inspiration.

Add standards-compliance to your CMS requirements

If you are in the process of purchasing a content management system (CMS), consider adding standards-compliance as a point on your requirements list. If you have already purchased your CMS, inquire about add-on modules or modifications that create compliant code.

Ensure that processes are in place to maintain standards-compliance

Maintain standards-compliance throughout each stage of your Web site's lifecycle — design, development, testing and maintenance. Make sure that the tools used by Web authors and site contributors are able to create and maintain a site that complies with the standards you have chosen. For example, content authors using a CMS should be contributing standards-compliant pages. However, they may not have direct control over the CMS; this means your CMS must be tailored to produce standards-compliant code.

It is important to go beyond initial requirements to plan processes that will ensure that your Web site remains standards-compliant in the future. This is the only way to reap all the benefits of Web standards.

Converting Web sites in development

If you already have a Web site in development it may be more complex to change requirements. Extra costs and expanded timelines are always considerations when changing requirements. Don't forget that using Web standards is a way to save money in the long run. It may seem cost-ineffective to integrate standards into your project because your contractors may penalise you for not having specified standards as original requirements, or it may appear to add more time to your project, but remember: the long term cost-savings will outweigh the initial resources you spend on improving your processes. It will also assist you in complying with accessibility laws and save potential legal costs for non-compliant sites. In the spirit of making a permanent change for the better, integrate into your Web development project, processes that support the implementation of standards.

If you are:

• very early in your Web development — such as in your analysis or feasibility study phase — add considerations for Web standards now rather than later. It is a well known software engineering fact that the later you introduce a change, the more expensive it becomes. Integrating Web standards into your process early will save money and resources as your project matures.
• midway through your project, for example, where some development has been done, and some design work has been completed, ensure that all development work and design work from now on comply to standards. At the same time, you may be able to introduce processes which will improve the parts of the sites that have yet to comply to standards.
• almost finished, your best option is similar to Existing Web sites. Introduce the processes for ensuring compliance in your quality assurance phase and make standards-compliance a part of your maintenance requirements, so that any new content that gets published complies with Web standards.

No matter what stage you are at in an existing project, there are great advantages to adopting Web standards.

Validation for quality assurance

What is validation?

Validation is the process by which you check your Web pages for correctness. It is a sound, simple way to ensure that the your Web site is on the way to standards-compliance. As HTML and CSS are formal languages, validating means checking the HTML and CSS of your Web site against the formal grammar (called a Document Type Definition or DTD) — much like the way you check for spelling errors and grammatical mistakes in an email you are writing. There are many kinds of validation, but within the context of this document, we shall explore only HTML and CSS validation.

The tools to validate Web pages are known as validators. There are validators available for free from the W3C. These validators can check individual pages. There are other validators available (at a cost) that can check an entire site. However, the most up-to-date and definitive validators are from the W3C.

The W3C hosts HTML and CSS validators that are updated with current standards as they are developed. These can be found at:

• http://validator.w3.org/ (HTML Validator)
• http://jigsaw.w3.org/css-validator/ (CSS Validator)

Validation is part of effective QA

Problems such as unexpected behavior in some browsers or strange layout problems, may be occurring simply because the HTML or the CSS contains mistakes. Validating your pages to find and remove errors improves the presentation of your site across user agents.

Validation is:

• the easiest and cheapest method of quality control for the underlying HTML and CSS of your Web site.
• an efficient way to detect human errors.
• a method to spot check your team's work to ensure the quality of the their HTML/CSS.
• a way to catch both common and hard-to-spot mistakes in the HTML and CSS — like running a business letter through a spell-checker.
• the simplest way you can be sure that your Web pages are indeed complying with the standards that can be checked by automated tools.
• notoriously good tools for picking up errors in your templates. If you detect and correct an error in your template you are on your way to improving the overall quality of your Web site.

Validation Saves Time and Hassle

Validation offers a solid way to investigate problems within a design. Running your pages through a validator allows you to quickly determine the problems by isolating which lines do not comply with the standards. While validators will not catch all problems, they will trap the glaring errors, enabling your QA time to be better spent on real problems rather than simple mistakes.

Understanding the validator output

If you have never encountered the W3C validators before, it may seem that the validators output incomprehensible messages. As it is merely an automated tool, a validator reports all the errors it finds, and provides an explanation. After fixing the first error and re-validating, you may find that the number of errors is greatly reduced. This is because each error that occurs has a chain effect and causes additional errors. After using the validators a couple of times, you will become familiar with the messages that describe your most common errors.

Taming authoring tools to produce standards-compliant pages

WYSIWYG (What You See Is What You Get) editors, such as FrontPage, Dreamweaver or GoLive, allow users to create Web sites simply and quickly. These tools are usually programmed to output proprietary, non-standards-compliant HTML and CSS — unless you make some modifications and change some preferences. With a small amount of configuration, most of these tools can be adjusted to produce compliant Web pages. In most of the applications, you can adjust the settings in the “Preferences” (or equivalent) to produce compliant code. In the cases where this doesn't do the trick, third-party tools such as HTML Tidy and Lift Accessibility Kit are available as standalone or plugins to your software.

Dreamweaver MX can be easily set up to achieve standards-compliant pages. You can also make Dreamweaver 4 produce standards-compliant Web pages. Although FrontPage 2000 and FrontPage 2002 can also be set up to write compliant code, this is more complicated than configuring Dreamweaver MX. You may consider using Mozilla Composer, which produces compliant Web pages by default, and is available for free from http://www.mozilla.org.