Coding Your Web Site with Quality

When you're ready to turn your beautiful design into a live, functioning web site, you need to tread carefully. While many different paths will lead to a site that looks more or less the same, the maintainability may vary dramatically, as may the browser compatibility and accessibility.

In this article, we explore coding issues. In the next one, we'll look at how to make your site live on the web, and why you should use a content management system instead of simply posting static pages.

Coding Quality

If you are handing off the design to someone else to code, you want to be sure it is going to be coded well. There are countless ways to code any design, and many different opinions about what approach is best. We advocate what is often called the "web standards" approach.

The "web standards" term does not have a precise definition, and not everyone agrees on what is important. There are some things that pretty much everyone who is on top of web technology agrees upon, some that are the subject of some dispute, and some that may or may not be important depending on the nature of your project. Here's our perspective on what's most important:

  • The HTML code should be purely semantic, without any presentational markup. This means that each chunk of text is marked up with a tag that says what it is, such as a level-one heading, and does not include any code that says how it should look (e.g., 18-pixel dark blue Verdana).
  • All styling should be contained in style sheets (CSS files).
  • Tables should be used only for tabular information, not to create page layouts.
  • JavaScript may be used to enhance the page, but should not be required to view it.
  • Pages should be properly structured for search engine optimization (SEO); at a bare minimum, this means navigation must not depend on JavaScript, every page should be linked to with relevant anchor text, and every page should include a descriptive heading with an H1 tag. (While this may seem obvious, you'd be amazed at how many designs we see that lack this. See SEO: The Low-Hanging Fruit)

There's a lot more to quality web coding, of course, and, depending on your needs and your budget, you may also need to consider accessibility, mobile compatibility, and more. Other factors, such as the choice of a CSS framework and a JavaScript library, may also be important. (We'll delve into each of these areas in future posts.)

You may also hear people pushing XHTML over HTML, and "strict" versus "transitional". Personally, we like XHTML Strict, but this is a secondard issue, at best.

If you don't have the experience to judge coding quality for yourself, ask whoever is going to do the coding for a few examples of their work, and then find a friend (or, if necessary, hire a consultant) to evaluate them. But be aware that a lot of people have strongly held opinions about coding style, and those opinions may or may not be relevant to your needs.

Browser Support

Another important issue is which browsers are supported, and whether the design degrades gracefully in poor browsers (i.e., Internet Explorer). You should agree on a browser support matrix at the start of the job, and expect that the design will work with all the specified browsers.

A well-coded site typically will work reasonably well with all modern browsers (IE 8 or newer, Firefox 3 or newer, Safari 3 or newer, and Chrome 4 or newer), but minor issues often crop up on various browsers. Usually it's necessary to support IE 7, but we recommend not investing in supporting IE 6. Testing on every browser is time consuming, and the more browsers you want tested, the more you should expect to pay. There are other high-quality browsers (such as Opera), but their market share is small enough that it is usually hard to justify testing everything with them.

Note that "working" doesn't mean "looks identical." We advocate using CSS3 rounded corners and drop shadows, for example. In Internet Explorer, these effects will be ignored, so the design won't be as pretty, but it will still work just fine. (This approach is called progressive enhancement.) If you want to spend more to make it look the same in Internet Explorer, you can, of course, with additional effort and cost. We prefer to let IE users see square corners, knowing that eventually IE 9 will catch up.

Resources for Web Standards Coding Practices

Add Your Comments

(not published)