with Lorelle and Brent VanFossen

Start With Compliance

By Lorelle VanFossen | Published October 8, 2003

Before you can get your web page noticed, you have to make sure all the parts fit together and it works properly. Why? Well, in order to be seen, the page has to work. In other words, all the pieces and parts must be read by the user’s Internet browser, interpreted, and displayed upon the user’s screen. This seems like a simple task, but there is always a wrench thrown in to make it a little more complicated.

Currently, there are about a dozen popular Internet browsers. Microsoft’s Internet Explorer is the most popular with about 95% of the marketplace, followed by Opera, Safari, Camino, Firebird, and Netscape, though Netscape has just gone out of business. An Internet browser is software that interprets a web page’s code (HTML, CSS, PHP, etc.) and visually displays the content so it is easy to view and read. Different browsers feature different ways of interpretation, therefore you need to make sure your site’s coding can be read by the majority of browsers. We’ll get to browser compliance in a moment. Let’s look at HTML compliance to begin with. Welcome to the stage the W3 Organization’s standards and compliance guidelines.

Benefits of Compliance
Only good can come from complying with web design standards.

  • Everyone can read it
  • Viewable by any Internet browser
  • Viewable by any computerized system
  • Viewable by foriegn language-enabled computers
  • Viewable by different types of hardware and software media (cell phones, handheld computers, Web Tv, etc.
  • Avoid lawsuits from non-compliance
  • Search engines adore your pages
  • Faster page loading times
  • Greater odds of visitor return
  • Easier to update, repair, and change in the future

In 1994, a group of web designers and programmers got together to create standards for universal access in web page coding. The World Wide Web was to be the “face” of the Internet, and these people were determined to make all the information available on the Internet open to everyone, no matter what kind of computer or software they were using – and no matter what language they could read. They wanted it open and available, without limits. This meant that the page not only had to be visually “pretty” for those with eyes, it had to “sound” and work pretty for those who are dependent upon other senses. An accessible web page should work on a computer monitor, with a browser that can’t “see” the graphics, with “reader software” (software that “reads” out loud what is on the screen), braille readers (converts content to a special board that produces braille), and can be used by someone without the use of their arms or hands. With an estimated 20% of all Internet users physically challenged in some way, the need for this kind of access is critical. Ah, but they didn’t limit the concept of accessibility to only the physically challenged. Millions of people want access to web pages on handheld computers, Web TV, and cell phones. Access for all means access for all.

The W3C created a uniform code for the programing language of the World Wide Web. They set the standards for approval and modification of the code and developed methods of validating that code. Internet browsers slowly caught onto the idea of standardization and today web designers can pretty much design web pages from one set of standard code. This benefits everyone. it’s like everyone speaking the same language at an international meeting – we all understand more.

Part of creating standards for the web is the challenge of compliance. There are no rules that state web page designers have to follow the standards set up by the W3, but if you want to design web pages for everyone, and I mean EVERYONE, then best play by the same rules as everyone else so everyone can access your pages.

Why Validate and Maintain Web Design Standards

Compliance Equals Proper Code

Designer’s Tip
Before you begin designing all your pages, or if you are making huge changes and updates to your current web pages, start small. Part of the challenge of validating web pages is the fact that you often have to load the web page onto your site before you can test it. Unless you are working with sophisticated HTML editing software, uploading your pages to your site “exposes” your new web pages to the public.

Start small by creating one or more template pages that contain general information in a specific layout. How many page styles do you have? We have three different layouts among our pages (blog, gallery, articles). We created a template for each and ran it through vigorous testing before applying our content and posting it on our Website.

Create a folder on your website called “testing” and upload your web page templates to this folder to keep them separate from the other pages, allowing easy reference and referral to them in the future.

Begin your efforts by understanding how the various code tags work, and have a good understanding of HMTL structure and CSS presentation codes. Let’s take a moment now to look at a few of the most commonly overlooked and often misunderstood basic compliance issues.

In order for your pages to meet the W3 Organization standards, the coding must be accurate and complete. All code must begin and end with the proper code (tag). This means that for every <p> there needs to be a </p> closing tag. Designers used to be able to get away without the closing code on a few tags, but with the stricter XHMTL and XML standards, you have to cross every “t” and dot every “i”.

Codes must follow a specific sequence and the tags must be nested appropriately. The last tag to open must be the first tag to close. For example, if you have a paragraph that starts with a phrase in bold, the wrong tag sequence would be:

<b><p>Text in bold:</b> More text rattles on here.</p>

The proper sequence should be:

<p><b>Text in bold:</b> More text rattles on here.</p>

Even if you are not ready to move into XML, prepare yourself for the future now by making sure that every attribute is in quotes and every open tag is closed. For example, we used to be able to get away with:

<img src="ball.gif" align=right width=100 height=300 alt="Picture of a pink ball.">

Not any more. Every attribute used within a tag code must have quotes around it, so the proper way to code this is:

<img src="ball.gif" align="right" width="100" height="300" alt="Picture of a pink ball.">

We also used to be able to get away with leaving closing tags out like in this example of a list:

<ul> <li>Item One <li>Item Two <li>Item Three </ul>

Not anymore. For every opening tag, there must be an ending or closing tag:

<ul> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ul>

Presentation verses Structure

One of the biggest challenges facing novice web page designers is the concept of the separation of the structure architecture of the web page from the presentation style. The structure of a web page is held within the HTML (Hyper Text Markup Language) tags on a page. The style and beauty of a web page is attached to each HTML page in the form of a Cascading Style Sheet (CSS) page. This page instructs the HTML page on how each element should look. For example, if you would like your header tag H1 to be in the font Arial and to be bold, dark blue(Hex Color code #333399), and about 120% larger than your text font, the old style of including presentation style with HTML would look like this:

<H1 align="center"><B><font size="2" font face="helvetica, arial, verdana, sans-serif" color="#333399">Title Here</H1>

You can remove all those codes from your HTML page and just leave:

&ltH1>Title Here</H1>

In the CSS page, most commonly called the style sheet, there would be a presentation code that would instruct the browser to display the H1 as “Arial, bold, navy (#333399), and 120% larger” and might look like this:

H1 {
font-family:helvetica, arial, verdana, sans-serif;
font-size: 120%;
color: #333399;
font-weight: bold;
font-style: normal;
text-align: center}

The use of style sheets are very important within web page design. With one style sheet for your entire Website, you can maintain a consistent presentation throughout. It also makes changing the “look” of your site easy. If you would like to change your header H1 to the color red and make it italic, instead of changing it on every single one of your 400 pages, you would just change the style sheet in one spot and it would be changed throughout the entire site.

These are just samples of the minimum you need to do to make your pages meet the W3 Organization standards. We discuss more about how to create Cascading Style Sheets (CSS) and developing web pages in our series of articles on web design. You can also visit the W3 Organization’s Websites and the others listed below to help create the most “user friendly” and compliant web pages.

Compliance With Software and Hardware

We’ve just covered the compliance associated with the coding that the web page designer uses to create the physical pages for interpretation by the Internet browser software, but compliance also means accessibility. Remember, accessibility is defined by the ability of the software on the computer system to interpret the code for display, projection, printing, speech, or whatever output the system requires. The body of knowledge and capability for these different forms of “media” is limited but growing. We’ve included a few links and resources below. Part of compliance means making sure that your design will work across the broad spectrum of software interpreters and hardware, so research what it takes, and then check your style sheets and HTML code against the validation software and online programs available.

Next Step…

To make sure your pages are compliant, you have to validate them. This means running your pages through a testing program that examines every tag and element to make sure that all the parts and pieces are accurate, they fit together properly, and they meet the established standards.

CSS – Reference

Design – Reference

Access – Compliance Standards

Resources for Designing for Various Media

This article was posted in Technology, Website Development and tagged , . Bookmark the permalink. Follow comments with the RSS feed for this post.Post a Comment or leave a trackback: Trackback URL.

2 Trackbacks

Post a Comment

Your email is kept private. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.