Note: For those not as familiar with irony, this series of posts is intented to use humor to illustrate important points about getting a website that works for them, and the potential pitfalls along the way. —ed.

One thing you figure out pretty early on in the web biz: You don’t really have to know how to code web pages all that well.

All those people who talk about web standards, CSS layout, and building sites for efficient updating, blah blah blah—that’s not stuff that’s going to get you a hundred dollars today, and it’s not stuff you should worry about. Your mechanic doesn’t tell you what’s going on under the hood, and your small business client’s not going to ask you what’s going on underneath the hood of their website either.

Believe me: The vast majority of small biz clients who want a website, just want it now, and the last thing they want you to worry about is learning about “best practices,” “usability”, stuff like that. Just get in, get out, and get on to your next website. Duh!

What I’m trying to say here, is, most small businesses know next to nothing about what it really takes to build a good website—one that will last over time, give them what they truly need, and match their real business objectives.

And that’s where you come in: Since they know so little, your not knowing a lot, or keeping up with standards in the industry, that’s really not that big a deal.

Sure, over time, the next web designer that works on your code might be a little frustrated because you laid the entire site out using tables (the web wunderkind of design for 1999).

Sure, it might take them three times as long to make a change to your HTML. But what I’m saying here, is: Your client is never going to figure this out, so you may as well do it the old fashioned way, and save all that precious learning time, which you could more profitably spend… churning out some more websites!

Sure, outputting your client’s 20-page site as a series of static HTML files might not seem very efficient to the effete “web professional” who has to make a tiny change in all 20 of those files later on. I can just see the poor sap whining to the client—“but the reason this is taking so long is because the code wasn’t architected well.” (They love using big words like “architected!”) Wah, wah, wah.

Meanwhile, you’ll be on to someone else’s site, and they’ll be toiling away. What’s it to them, anyway? They can just charge the client more to make the changes, because it’ll take so much longer! It’s a win win for everybody! Well… almost everybody!

*

Last year, my wife and I had a contractor come out to our house and add an extra room. He seemed like a nice guy, and since I know nothing about building stuff, I just pretty much trusted him. He worked and worked, and said, “that’ll be $xx,xxx.00″. Fine, and we paid him. I found him through a friend of a friend of my wife’s uncle, and we went with him because he offered us the cheapest price by far!

And what’s wrong with that!?

I am wondering what the strange smell coming from our new room is, and if you look at it from a certain angle, I bet you’ll notice that it doesn’t quite “line up” with the rest of the house.

But … so what?

• The Business Value of Web Standards (Adaptive Path)
• The Business Case for Web Standards-Based Development (Navigation Arts)
• Why Tables for Layout is Stupid (Seybold, 2003)

photo credit: JB London

For the average consumer of web design services, the move from table-based layouts, to css– or tableless-layouts, probably means little. However, it’s important that you know the basics of what CSS Style Sheets mean, and why you want to find a web designer that uses them.

This post is not designed to teach you CSS (you could go here, or here for that). It is designed to give you the bottom-line context as to why it matters to your website.

Bottom Line Summary:

Cascading Stylesheets, or CSS, a.ka. CSS Style Sheets, are a system that lets web designers’ jobs become much easier, freeing up their time to focus on making sites more beautiful, faster loading, and easier to use.

While CSS has been around for a while, the biggest developments happened when the majority of web browsers supported the use of CSS layout techniquest — that is, ways of laying out the page using CSS rules. Before this, web designers had to use HTML commands meant to represent tabular data — tables — stretching the use of HTML for tables far, far beyond its original intended use.

The bottom line for a web design customer is: If your prospective web designer does not design with CSS-based, tableless layouts, do not use that web designer. They are 5 to 10 years behind the times, and this lack of up-to-dateness will probably affect other aspects of their practice, as well!

And now, to the bigger context…

CSS Style Sheets Overview

A CSS style sheet is a special file, often contained as a single doucment on a website, along with the HTML files that represent the content of the site.

The HTML file points to (references) one or more CSS style sheets, which contain the formatting instructions. This leaves the HTML file to contain the content of the page, relieving it of the duty of representing the formatting.

For example, an HTML file might contain an instruction like the following. Let’s say the purpose here is to provide a caption that would go below a photo:

<p class="caption">The 1908 Fire Ravaged Much
 of the City, but Spared the Opera House</p>

The corresponding CSS file, could then contain an instruction to provide formatting for the “caption” class, shown above:

.caption {
  text-align: center;
  color: #333;
  font-size: .9em;
  font-style: italic;
}

Now, let’s say this type of caption appears a hundred times throughout this website. All the web designer has to do is specify the “caption” class each time he or she wants the appropriate formatting to appear, knowing that the browser will refer back to the instruction in the CSS style sheet for formatting instructions.

In the “olden days,” before CSS style sheets, here is what that same HTML code might have looked like:

<p><font color="#333333"><font size="2"><i>
<center>The 1908 Fire Ravaged Much of the City,
but Spared the Opera House</center></i></font>
</font></p>

Now, notice how much more code is there, just to represent the same thing! Imagine that code repeated 100 times, and you’ve got some idea of what kind of savings CSS style sheets buy you.

But now, the real savings, comes in layout–the positioning of elements on the page.

CSS Style Sheets for Layout — Why It Matters

In the late 90’s and early 2000’s, as web design became more and more sophisticated, web designers found the need to specify more and more complex page layouts. They found that the easiest way to do this — often, the only way to do this — was to use the HTML codes intended to represent tables. Here is an example of a sensible use of tables:

The real function of tables was intended to represent tabular data, like the table above. However, web designers often found themselves using these same HTML codes to represent tables, within tables, within tables, just in order to layout a simple HTML web page, with, say, a footer, a header, and a sidbar.

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>cell</td>
          <td>cell</td>
        </tr>
        <tr>
          <td>
            <table>
              <tr>
                <td>cell..

… Well, I hope you get the idea here. What you had in the above HTML example, was an extremely messy series of nested tables. And while you, as the viewer, wouldn’t have had to see the HTML code shown here–the web designer would still have had to deal with it, and that is the main point!

With the advent of CSS-based layout techniques, the underlying HTML code got much simpler. And what’s more, it made much more sense. The result was that layouts became cleaner, easier to maintain, and easier to develop.

While the complexity of table-based layouts almost demanded the use of special tools that shielded the designer from the HTML much of the time, with the advent of CSS-based layouts, it became much, much easier to work in the underlying code — reducing the need for fancy programs like Dreamweaver, and giving the careful web designer much more control over his code.

I hope this article gave some degree of context to a rather complex subject, without being either too overwhelming, or too general.