Web Standards

Web standards are basically a set of rules and recommendations on how to use XHTML, CSS, and the DOM to make websites that not only look good, but are also readable. Web browsers are constantly changing, and the only way to guarantee that everyone (using any compliant web browser) will be able to see your web page the way you intended it to look — today and tomorrow.

Who enforces these standards? The Web Standards Project is a task force dedicated to fighting "for standards that reduce the cost and complexity of development while increasing the accessibility and long-term viability of any site published on the Web. [They] work with browser companies, authoring tool makers, and [their] peers to deliver the true power of standards to this medium."

A really well-designed site:

It's important to note that this is just a starting point in determing what a well-designed site should do. Whenever you start a new web design (or re-design) project, it's important to decide what your goals are. Is it most important that anyone, using any computer (or cell phone or PDA) can read your content? or is it more important to you that your website looks the same on most internet browsers?

Here are some more great sources for learning about web standards and accessability.

Good Design

Good design means that your website both looks "good" and is also easy to read and understand. Check out the section on What Makes A Good Website? for more information on good design.

Separate Structure and Content from Presentation

By separating the content from the presentation of your site you will allow yourself much more flexibility in writing the site, and save a lot of time. In addition, you will be creating a more accessible site.

(X)HTML is a markup language, which means that it combines a text (the content) and information about the text (the structure). If you use (X)HTML as a markup language, you can easily combine it with CSS, which determines how the site looks. For more information on CSS, look at the section CSS, Layouts, and Design.

If you would like to learn more about separation of content and presentation, read Michael Cohen's article, Separation: The Web Designer's Dilemma from A List Apart.

Validate Your Code

To find out if your code is valid, use the W3C Markup Validation Service. The W3C Validator compares your code to the syntax indicated by your web page's DOCTYPE . If your code validates, it means that you used correct syntax, or grammar, in your markup.

The best way to guarantee that your syntax is good is to learn XHTML and the DOM (check out the NYPL Style Guide and W3Schools' HTML DOM Tutorial) and code it yourself, but that isn't always an option, so there are tools to help you.

Firebug

Firebug for Firefox is a tool that allows your view, inspect and edit source code for any page you have loaded in the browser. It adds a tiny button to the bottom-right corner of Firefox which you can click to expand and view the page sources.

Web Developer

Web Developer is an incredibly powerful tool which allows you to use different style sheets interchangeably to see alternative page views. It also allows you to view style sheets on other websites, to break down a page by its components, and to view your page as a screen reader might, among many other features.

HTML Validator

If you use the above two add-ons regularly, you already have built in validators that will point out invalid HTML and tell you how to validate it, but if you do not, HTML Validator can also do that for you. Remember that a page should never be published with errors in its code. Always validate!

Front Page Code Cleaner

FrontPage Code Cleaner will read the web page that you specify and output \ cleaned-up code. This tool not only "cleans" your code, but it also will shrink the file-size of your web page.

Word HTML Cleaner

If you use Microsoft Word to create a 'Web Page,' Textism.com has a Word HTML Cleaner that will get rid of extra tags the Microsoft Word adds to the document.

You can also try Carrie Bickner's article on A List Apart: Modifying Dreamweaver to Produce Valid XHTML, to learn about creating clean code with Dreamweaver.

DOCTYPE

A DOCTYPE (short for "document type declaration") tells the validator which version of (X)HTML you are using. A web page won't validate without a DOCTYPE nor will it validate if you use the wrong DOCTYPE. Jeffrey Zeldman wrote a great article about DOCTYPEs on A List Apart, explaining more about what a DOCTYPE is and how to use them: Fix Your Site with the Right DOCTYPE!. Also look at Eric Meyer's article, Use the Right Doctype.

Cross-Platform, Cross-Browser Compatibility

One of the reasons to use web standards is to make it more likely that your website will look the same on everyone's computer, regardless of what operating system or web browser they are running. Unfortunately, even if your site is completely standards-compliant, there will still be some inconsistencies across browsers — because although there are also standards regulating how web browsers interpret web sites, only a few of them are totally compliant.

The best way to deal with this is to choose a relatively standards-compliant browser to test your site on while you are designing it (Mozilla Firefox and Safari are both good for this) and then spend some time testing it against other browsers and tweaking the design so that it works in all of them.

Whether you use a Mac or a PC to develop your site, the biggest challenge will probably be getting your site to work in Microsoft Internet Explorer (also be aware that different versions of IE exist, with different problems). You will need to try it out in the Mac version of Internet Explorer as well as the Windows version. This means that you will probably need to go to a computer lab, borrow a friend's computer, or, if you have a new Mac with an intel chip, run Windows through Bootcamp.

Some people find Browser Emulators useful for testing websites on different platforms without switching computers:

  • ieCapture lets you preview your site on Internet Explorer 7
  • iCapture lets you preview your site on Safari 2.0.3

Many people also think it is important to test on older versions of browsers because many users do not upgrade their browsers. QuirksMode has made a number of old version of IE available along with some installation instructions, although this is only recommended to someone comfortable with troubleshooting difficult installations and using the Registry Editor.