Can your site be found and used by everyone (and everything)? Part 2 of 4

By Stan Grabowski, Website Coordinator for Manufacturing-Works

Web Standards

The World Wide Web Consortium (W3C) develops specifications for website development codes, such as HTML, and CSS. The lesser known and lesser used browsers (e.g. Opera, Safari, Camino, Netscape, and Firefox) adhere more to these standards. Internet Explorer (IE) adheres to only some of the specs, but often seems more interested in developing its own specs. IE6 is not very good when displaying properly developed web pages, and IE7 is not much better.

Developing with web standards basically means:

1. Different types of code are broken out into separate files. Markup (HTML), presentation (CSS), and behaviors (scripts) are all in different files.
2. No proprietary or depreciated code is used (code that is developed specifically by one browser team that may not work in other browsers)
3. Code is correctly written and validates

That sounds simple, doesn't it? Let's delve a bit deeper.

1. Different files for different code

Web pages are mainly made up of three basic types of code: structural (or markup), presentational, and behavioral. The structure of a web page is determined mainly by HTML or XHTML. This type of code tells a browser information like "this text is a paragraph" or "this text is a link" and essentially makes up the skeleton of the web page. The presentation of a web page is determined by CSS. This type of code tells the browser "that paragraph should be Arial font and maroon" or "the background of this website should be dark gray." CSS is the code that makes a website look good. The behaviors are often done with JavaScript, a scripting language that runs when the page is viewed in the user's browser. Behaviors make certain things happen with user interaction, such as making a menu "pop up."

Removing your presentation and JavaScript from your HTML files can speed up your site. If all your pages look the same (as they should to have a consistent look and feel throughout your site) with the same fonts, colors, etc... then you only need to define those settings in one place, your one CSS file. If you change your mind on how it should look, you only need to make changes in that one CSS file. Easy, huh? Same thing with your JavaScripts; if you have a drop down menu on every page, don't put the JavaScript into every HTML page. Place it into a separate file that all your HTML files can access. Doing this will also mean your visitors only have to download that big chunk of JavaScript or CSS once and then it is cached on their computer when they go to the next page on your site. Faster for your visitors; easier to maintain for you!

Separating out these three types of code will also make your site more search engine friendly. Search engines don't care if your website looks good, they only care about the code, so only give them the code that they cares about (your HTML). If you have your JavaScript and CSS in separate files search engines don't have to sort through your fonts, colors, and other bits of presentational code or scripts in order to find the information about your product. Some search engines only index a certain amount of characters per page, and if the majority is taken up by JavaScript and font colors, then your relevant information will never see the light of day.

2. Don't use proprietary or depreciated code

Proprietary HTML is code that was developed by one company (such as Netscape or Microsoft) that may or may not have been adopted by other companies. In other words, no one really knows how a browser should make it look, except for the company that developed it! Depreciated HTML is code that, again, was developed by one company, but never intended to be part of the HTML spec. Depreciated elements can be replaced with CSS properties. I can't get into more detail here about what to do and what not to do, but feel free to contact me if you are interested in learning more.

A site built with standard code will always work in future standards-compliant browsers, and "fail gracefully" in old standards-compliant browsers (more about this in part 4).

3. Use proper code that validates

Writing proper code means adhering to the specifications for that code. Using the W3C's HTML validator or CSS validator can help you to determine problem areas of your code. They will list invalid areas, and also give you a resource to look up why it is invalid and how to fix the problem.

To get a more in-depth (and a bit more technical) overview of standards, please read view the article "What are web standards and why should I use them?" Also, feel free to contact me for any clarification you may need.