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.
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.
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.
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
- The Web Standards Project has spearheaded the once-controversial push for web standards. Among other resources, they have developed the InterACT Curriculum to help schools teach web standards.
- The folks at Opera have created an extensive Web Standards Curriculum that you can read on the web.
- Designing with Web Standards is perhaps the classic book on the subject, written by Jeffrey Zeldman, one of the early, vocal proponents of web standards.
- HTML and CSS Web Standards Solutions: A Web Standardistas’ Approach, by Christopher Murphy and Nicklas Persson, is a great introduction to HTML and CSS coding.
Topics: Webvanta History