• Home
• Services
  • Web site design
  • Web site maintenance
  • Search Engine Optimization
  • Internet marketing
  • Email newsletters
  • Web applications
• Portfolio
  • Portfolio
  • Before & after comparisons
• About Us
  • Why we're different
  • Vision and Values
  • Expectations
  • People
• Blog
• Resources
  • Flash version test page
  • User groups in Northern Colorado
  • Developers: want to collaborate?
  • .NET Flash Remoting
  • Oscillosprockets
• Contact Info

Web Standards

What are web standards?

My favorite description (succinct though slightly technical) is this :

The term web standards can mean different things to different people. For some, it is 'table-free sites', for others it is 'using valid code'. However, web standards are much broader than that. A site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, user-friendly URLs etc).

In other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly.

- Russ Weakley of MaxDesign

Two of the most important elements comprising web standards include separating content from design, and using semantic markup for all content. Taking web standards one step further, behavior can also be separated out.

Separating content from design is achieved by including only meaningful content in the HTML files for your web site, and using CSS (Cascading Style Sheets) to position that web page content. Along these lines, graphic images that are used as part of the design but otherwise aren't meaningful content should be included in the CSS files, not the HTML files. For example, rounded corners are not meaningful content unless your web page is a tutorial about how to create rounded corners. All references to design elements like that should be in the CSS files. A portrait of you on your About Us page is meaningful content and should be included in the HTML file. The HTML file should not include any explicit formatting instructions like <font> tags, inline styles, or anything of the sort. All of that should be in the CSS file.

Semantic markup means using HTML tags to describe the content contained between the tags. By "describe the content" we mean, what is the purpose and/or significance of the content? Is it a heading, and how important is that heading? Is this a paragraph, or a list, or an image? Proper use of tables is the biggest change for most web developers. When implementing web standards, tables are only used to describe tables of data, and not to layout the web page.

Separating behavior means using unobtrusive Javascript and DOM scripting. When this is done, Javascript commands are for the most part not embedded in the HTML page. Instead Javascript functions in a separate file latch onto <hooks> in the HTML page - usually elements, element id's and classes.

So why should this matter to you?

Why web standards matter

There are myriad benefits to using web standards. Here are some highlights:

• It saves you money due to the ease of maintenance. Since the HTML files essentially contain only unformatted content, it is quick and easy to change that content. So whether you make the updates yourself, or pay your web developer to make the updates, they take less time and are therefore less expensive.
• Improved search engine rankings: How does a search engine understand what your site is about? One technique they use is to interpret HTML tags semantically - they assume the title is most important, that headings are significant summaries of the content to follow, and meaningful content is contained in paragraphs, lists, and the like. There are other very important techniques we use at CodeGeek.net to help improve your search engine rankings as well. Using semantic markup is just one of them.
• Changing the layout is easier: Why would I want to change my layout? Redesigning your web site in the future is just one reason, but probably not the most important. How about mobile devices? You may want your web developer to create a linearized version your web site - have all the sections of a page display in a single column so they can be viewed on a small screen more effectively. With web standards, that may only require creating a separate style sheet that can apply to all of your web pages, and voila, linearized content. Or, you may just want to reposition or redesign one part of a page. All of this is much easier when your site is designed according to web standards right from the start.
• Web standards help future-proof your web site: New web technologies are emerging all the time. With your content separated from both layout and behavior, you will be able to use your content in new ways with technologies that don't even exist yet. Perhaps there will be indexes that can scan your site and include your content in a professional data base. With web standards and semantic markup, this would be easy to do. If anything has proven true on the Internet, it is that people have come up with surprising and unexpected ways to use content that improves the usefulness of the web. The more accessible your data is, the better your site will integrate into the future of the Web, which ultimately means it becomes easier and easier for visitors to find your site and take advantage of your services.
• Accessibility: Making your site accessible means making it available to visitors using technologies other than visual, large-screen web browsers. Vision impaired surfers may be using screen-reading web browsers. But accessibility doesn't just mean meeting WAI or Section 508 requirements. Visitors on mobile devices are likely to have small screens. Some visitors will be using older web browsers many versions old. Just because you surf the web on a 1600x1200 monitor with a high-speed internet connection doesn't mean everyone does. In fact, you can be sure that everyone doesn't. Using web standards makes it much easier to make your content useable in all these cases and also to the most important blind visitor of all - search engine spiders.

How are web standards different from older ways to create web sites?

Many web sites have been created using tables to layout the site itself. It is certainly easier and quicker in some cases to do this. Tables have a nice grid structure making it easy to lay out the page in a logical fashion.

Unfortunately, table based layouts are fraught with problems. For one, it is more difficult to update content. With a table, the formatting of the page (the table structure code) is interlaced with the content. One must take care not to break the layout of the page when making content updates. It is a hassle to negotiate all the table code to highlight the content to be updated.

Search engines don't understand your site as well. Search engines expect tables to be used for tabular data. When tables are used otherwise, you impair the ability of search engines to interpret the content of your site and how relevant it is.

Creating alternate layouts of your site means starting over. With tables it is extremely difficult to linearize content, or move a column that was on the left side of the page to the right side of the page.

CodeGeek.net uses web standards

We are firm believers in web standards. If having a site designed in accordance with web standards is important to you, contact CodeGeek.net today.