One prevailing belief among those who commission websites seems to be “if it looks good, then it must be good.”

This couldn’t be farther from the truth.

There are at least three groups that place more importance on how a site is built than on how it looks:

1. People who use older or alternative browsing methods, or who have certain web technologies turned off
2. Professional web developers
3. Search engines

Ensuring that your site caters to these groups can be greatly beneficial, if not absolutely necessary, as you’ll soon see.

It’s what’s on the inside that counts

Looks aren’t everything, especially when it comes to websites. A lot of sites put up by so-called web professionals look great, but are poorly coded.

Even Fortune 500 companies, who have the budget to hire any developer they want to, sometimes have websites that aren’t optimized for many of their visitors. This can be a big mistake, as big-box retailer Target found out.

In 2006, the National Federation of the Blind sued Target for having an inaccessible website. The two parties reached a settlement this August, which required, among other things, that Target establish a $6 million fund for paying claims.

That’s a lot of money that could have been saved had Target paid attention to this group of users from the outset.

A good website is like a good car

Good websites – like good cars – not only look great, but perform well. And, as any car aficionado will tell you, there’s a lot more to a car than its looks. The same goes for any website.

A website, like a car, is composed of two main parts:

• The exterior – the images and text most people see in the browser (akin to the body and paint job of a car)
• The mechanics – the underlying HTML code (akin to the engine, oil filter, etc.)

If you’re like most people, you focus most of your attention on the exterior. A website that looks good grabs your attention and makes you want to stick around. How it’s built tends to be of secondary concern.

However, imagine if your great looking car broke down once for every 20 intersections you drove through, or if it was built so inefficiently it got 3 miles to the gallon.

The benefits of good code

The purpose of the car analogy is to show that for some web users (search engines included), navigating the web is a lot like driving a beautiful old beater. Building websites on good code can help these users have a more pleasurable (or meaningful) web experience. Here’s how:

Good code ensures your site is accessible to all users

A 2006 survey revealed that an estimated 21.2 million adult Americans have trouble seeing or are unable to see at all. This group may rely on special software, called a screen reader, to read web pages aloud to them. A screen reader can’t “see” a web page, so it reads the code of the page back to the person using it.

Poorly coded sites are difficult for these users to understand, because the fluffy nougat center – the content – is buried beneath layers of superfluous code or is illogically structured.

Some corporate intranets disable certain features, like JavaScript, to enhance security. Users on dial-up connections may elect to disable images for a faster browsing experience. For these groups of people, a poorly coded site can be rendered useless or less meaningful without JavaScript or images (see the first example below).

And let’s not forget mobile phone users, who have to deal with screens that are about 80% smaller than your average monitor. Poorly coded websites don’t look very nice on these small screens, and they are difficult to navigate. Good web developers provide alternative versions for mobile phone users that overcome these problems.

Good code can reduce your maintenance costs

“Professional” web developers – defined here as those developers that understand the importance of good code over good design – like to build websites by looking at the code. If you can imagine Tank looking at those computer screens in The Matrix and knowing what all the dancing symbols mean, you get my idea.

As such, cluttered code that doesn’t follow established standards is harder to understand and takes more time to update. For someone who pays a developer by the hour to maintain a website, this translates into higher costs when that developer has to slog through someone else’s bad code.

Good code can improve your search engine rankings

Search engines read through a page’s code to determine how it should be ranked. If the code is cluttered or poorly structured, the page’s ability to rank well can suffer.

An example of good design gone bad: Flash-based navigation

(The website below is shown for educational purposes only, and is certainly not the only one with the issue we’re going to discuss.)

Take a look at the following website. It’s a nice looking, professional site, but it has a serious accessibility problem.

Just for fun, try turning off JavaScript and reload the page. Read How to Disable JavaScript if you want to follow along and don’t know how to do this.

With JavaScript disabled, the entire upper third of the page, including the navigation bar, goes into the ether. This site is built in such a way that, without the navigation bar, it’s impossible to move through the site.

The reason this happened is because this part of the page is a Flash movie, and Flash movies can’t load without JavaScript enabled.

No big deal, you might say. According to web statistics for October 2008, about 6% of all web users have JavaScript disabled. That’s a fairly large percentage of people to ignore. Imagine the impact on your business if 1 out of every 17 prospective customers couldn’t use your website or reach the “Contact” page.

Another downside to having a Flash-based main navigation is that no search engine will be able to properly index the site, since search engines can’t “see” Flash.

You can have your Flash and eat it, too. There’s nothing wrong with using Flash to display cool things like banners, or to add twinkling stars to your company name. However, it’s best to leave the navigation out of it.

Another example: looks can be deceiving

This next example shows how two identical layouts can be created with completely different bits of code. Take a look at the two paragraphs below:

Both paragraphs of text look exactly the same, but the underlying code that creates them is very different. The paragraph on the top:

• Uses 42% more code
• Has a higher code-to-content ratio
• Is harder for search engines and visually impaired users to understand
• Isn’t as easy for web developers to understand or modify

As I’ll explain in a later post, code-to-content ratio is one way search engines determine how your page will rank. The less code you have, the better, since search engines like content.

The moral of the story

A good-looking website is only the beginning.

If you’re looking to hire someone to work on your website, don’t automatically hire the agency with the best-looking portfolio. Ask what’s “underneath the hood” and find out how that agency codes its websites.

Doing your homework up front can save time and money down the road and make your site more visible to search engines. You may even be able to earn some recognition for your efforts.