Joy Of Code - Web Design Training and Consulting
Joy Gems Newsletter

The Code To Content Ratio

Share

By Bud Kraus
bud@joyofcode.com
Joy Of Code
Creator And Instructor

v3 i16
Originally Published: October 4, 2007

Practitioners of web page design standards know that the adage "Less Is More" rules when it comes to Extensible Hyper Text Markup Language, Cascading Style Sheets, and other markup and programming languages. Best practices of web page design will always lead to using the fewest tags and the least tortured CSS style rules. On the web a small coding footprint is what you should be after.

Ever hear anyone refer to "Tag Soup?" It means web pages that are bloated with needless source code. I'm talking about things like tables nested needlessly inside other tables or miles of proprietary junk code (thank you Front Page). It all adds up to pages that are impossible to edit and take forever to download.

If it's impossible to edit that means you can't rapidly change your site, and if you can't do that, you're in trouble.

Call it "Less Is More" or "Tag Soup," - I call it The Code To Content Ratio. I want my pages to have lots of meaningful content with as little XHTML and CSS code as possible.

By content I'm referring, first and foremost, to text (A Writer's Medium) and then to imagery, multimedia, and other assets. A favorable code to content proportion is beneficial for everyone - humans, browsers, and search engine robots.

I practice what I preach. The best code to content ratio is what I deliver with my Code Aid service.

Is there a scientific way of knowing you have the right blend - the correct ratio of code to content? Not that I know of. But if you do things the right way and validate (error check) your work, you'll find that the ratio will improve over time. At the same time, so too will your web page designing skills.

Here's an example of what I mean. I will illustrate the way links are usually set up on a web page, then show how they should be set up.

Using A Table To Format Navigation

Here I'm using a table that has 4 rows, each row having just one cell (column). I have a link in each of the four cells.

This is a very common way people use tables but it should be frowned upon. Tables are not meant for layout.

Code View

<table width="50%" cellspacing="10">
<tr valign="top">
<td><a href="#">Link 1</a></td>
</tr>
<tr>
<td><a href="#">Link 2</a></td>
</tr>
<tr>
<td><a href="#">Link 3</a></td>
</tr>
<tr>
<td><a href="#">Link 4</a></td>
</tr>
</table>

Browser View

Link 1
Link 2
Link 3
Link 4

Using A List To Format Navigation

Now that you've seen the wrong way to do it let's look at the best way to set your links up for navigation. Below I use list markup. Each list item contains one link. After all, isn't that what a navigation interface is - a list of links?

Code View

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>

Browser View

Isn't that so much more efficient than using tables? Don't like the bullets? Want the list to be positioned horizontally? Use CSS