post-tables

Semantic Coding

To table or not to table, that is the question…

The Internet is really a big library of information, with the smattering of cake recipes, photos of celebrities, and bad cartoons thrown in for flavor. Unfortunately, most of the information out there is junk. The data has no reference or connection to other bits of data. While this is fine for the average visitor that can make the visual connection between an image and the text below it, those without the benefit of sight cannot.

One of the important benefits of standards-based programming is the connection between data and context. When the visual dressings are removed from a page, the information continues to make sense. The misuse of the table is the culprit for much of the bad information context; let’s look at how the information could be presented properly.

Old style programming

Here is a simple table with information about a work of art

the happy fish
The Happy Fish, 2001
Mixed Media, 16”X12”
Salvador Dalicious, Spanish
The Fish Museum, 2002:23

This assemblage of a happy fish and packing boxes reflects the struggle of creatures with bulges on their heads in society.

The code for this simple table would be:

  1. <table cellspacing=“0” cellpadding=“0” border=“1”>
  2. <tr>
  3. <td><img src=“spacer.gif” width=“10px” height=“10px” alt=“”></td>
  4. <td><img src=“spacer.gif” width=“200px” height=“10px” alt=“”></td>
  5. <td><img src=“spacer.gif” width=“10px” height=“10px” alt=“”></td>
  6. </tr>
  7. <tr>
  8. <td><img src=“spacer.gif” width=“10px” height=“10px” alt=“”></td>
  9. <td><img src=“happyfish.jpg” width=“200px” height=“150px” alt=“photo of a happy fish”></td>
  10. <td><img src=“spacer.gif” width=“10px” height=“10px” alt=””></td>
  11. </tr>
  12. <tr>
  13. <td><img src=“spacer.gif” width=“10px” height=“10px” alt=“”></td>
  14. <td> The Happy Fish, 2001<br />
    Mixed Media, 16”X12” <br />
    Salvador Dalicious, Spanish<br />
    The Fish Museum, 2002:23</td>
  15. <td><img src=“spacer.gif” width=“10px” height=“10px” alt=“”></td>
  16. </tr>
  17. <tr>
  18. <td><img src=“spacer.gif” width=“10px” height=“10px” alt=“ ”></td>
  19. <td><p> This assemblage of a happy fish and packing boxes reflects the struggle of creatures with bulges on their heads in society.</p></td>
  20. <td><img src=“spacer.gif” width=“10px” height=“10px” alt=“ ”></td>
  21. </tr>
  22. </table>

elements to this object, an image, specific details, and a description. These bits of information are scattered and there is no connection between one cell and another.

With standards-based programming, choose the most appropriate container for your data. This is a work of art and all of the information is directly related to that work of art. This would be a good place to use a Definition List.

The definition list features data terms and data descriptions. It can include multiple terms and multiple definitions. For this example, I am going to use a single term, the work of art’s title. The other elements will be definitions. Style sheets would give the preferred look to the information.

  1. <dl>
  2. <dt>The Happy Fish, 2001</dt>
  3. <dd><img src=“happyfish.jpg” width=“200px” height=“150px” alt=“photo of a happy fish”></dd>
  4. <dd> Mixed Media, 16”X12”</dd>
  5. <dd>Salvador Dalicious, Spanish</dd>
  6. <dd>The Fish Museum, 2002:23</dd>
  7. <dd> This assemblage of a happy fish and packing boxes reflects the struggle of creatures with bulges on their heads in society.</dd>
  8. </dl>

The Happy Fish, 2001
the happy fish
Mixed Media, 16”X12”
Salvador Dalicious, Spanish
The Fish Museum, 2002:23
This assemblage of a happy fish and packing boxes reflects the struggle of creatures with bulges on their heads in society.

While the previous example provided context to the data with data terms and data definitions, we could go further. We could add classes to the definitions to give them more context and allow us to customize their presentation more:

  1. <dd class=“media”> Mixed Media, 16”X12”</dd>
  2. <dd class=“artist”> Salvador Dalicious, Spanish …</dd>

If this were a page devoted to this work of art in a gallery, we could expand the information into more detail.

  1. <dl>
  2. <dt><img src=“happyfish.jpg” width=“200px” height=“150px” alt=“photo of a happy fish”></dt>
  3. <dt>Title</dt>
  4. <dd>The Happy Fish </dd>
  5. <dt>Creation Date</dt>
  6. <dd>2001</dd>
  7. <dt>Media</dt>
  8. <dd> Mixed Media</dd>
  9. <dt>Dimensions </dt>
  10. <dd>16”X12”</dd>
  11. <dt>Artist </dt>
  12. <dd>Salvador Dalicious, Spanish </dd>
  13. <dt>Owner </dt>
  14. <dd>The Fish Museum </dd>
  15. <dt>Accession # </dt>
  16. <dd>2002:23</dd>
  17. <dt>Description</dt>
  18. <dd> This assemblage of a happy fish and packing boxes reflects the struggle of creatures with bulges on their heads in society.</dd>
  19. </dl>


This presentation of the information is inherently more accessible to web site visitors, including Google.

Use a table for tabular data.

Use a table when there are columns and rows and their intersection provides the answer to your question. How much does it cost to ship a Tiny Tim cd to Canada?
Here’s an example of a proper table:

Shipping Costs for Tiny Tim Cds
Quantity United States Canada
1 $1.00 $1.25
2 $1.25 $1.50
3 $1.25 $1.50
4 $1.50 $2.00
5+ $2.00 $3.00

To give the data in this table more context, there are some rarely used tags and attributes that give the table super powers.

First, we are going to remove unnecessary attributes that are now handled with CSS. The cellpadding and borders are not necessary. We will keep the cellspacing=”0”.
<table cellspacing=“0”></table>
We begin with a caption tag that defines the purpose of the table
<caption>Shipping Costs for Tiny Tim cd’s </caption>
Next, we define the header of the table and define the scope of the particular elements. This table uses the top row to define the data and each column has a header.

  1. <thead>
  2. <tr>
  3. <th scope=“col”>Quantity</th>
  4. <th scope=“col”>United States</th>
  5. <th scope=“col”>Canada</th>
  6. </tr>
  7. </thead>


We have defined the header and explained how the columns will define the information below them. Now we will begin the body of the table.

  1. <tbody>
  2. <tr>
  3. <td>1</td>
  4. <td>$1.00</td>
  5. <td>$1.25</td>
  6. </tr>
  7. <tr>
  8. <td>2</td>
  9. <td>$1.00</td>
  10. <td>$1.25</td>
  11. </tr>
  12. <tr>
  13. <td>3</td>
  14. <td>$125</td>
  15. <td>$150</td>
  16. </tr>
  17. <tr>
  18. <td>4</td>
  19. <td>$1.25</td>
  20. <td>$1.50</td>
  21. </tr>
  22. <tr>
  23. <td>5+</td>
  24. <td>$21.00</td>
  25. <td>$3.00</td>
  26. </tr>

We have now inserted information into the various rows, it is time to close the table

</tbody></table>
The style sheet will define the look of the caption, border details, cell padding, table margins, background colors, text-alignment, etc.

Navigate around the table

Tables have traditionally been used to build navigation elements. But once again, this is not the most appropriate container for the information. Here’s a common example:

HOME
ABOUT US
CONTACT US
STORE
FUN STUFF
LEGAL STUFF

This is not tabular data; it is simply a list of links. So, let’s use a list for these links. There are three types of lists, the Definition List, the Ordered List, and the Unordered List.

We have already looked at the definition list and this doesn’t seem to be the right place to use it. There are no terms and definitions, just a list.

An ordered list has a hierarchy, such as:
1.xxx
2.xxx
3.xxx.
This would be appropriate if these links were chapters in a book and you needed to read them in a particular order. This doesn’t seem appropriate either.

The unordered list is used for lists of data that have no specific connection or order. This seems to be the best solution for our navigation bar. We will apply a class to the navigation list to customize it in the style sheets.

  1. <ul class=“navigation”>
  2. <li><a href=“home.html” title=“return to the home page”>HOME</a></li>
  3. <li><a href=“about.html” title=“Find out more about our company”>ABOUT US</a></li>
  4. <li><a href=“contact.html” title=“Get information on how to contact us”>CONTACT US</a></li>
  5. ...

Here is a sample style sheet:

:200px; border:none; border-top:1px solid #000; margin:5px; padding:0;}
This says: Don’t use any bullets, make the navigation bar 200 pixels wide, only put a border on the top, make it 1 pixel wide, solid and black. Give the list a margin of 5 pixels on all sides and give it no padding inside.

ul.navigation li {border:1px solid #000; border-top: none; list-style:none;}
Give each list item a border on all sides but the top. This, combined with the above code will keep the borders from doubling up, giving them a uniform look.

ul.navigation li a {display: block; padding:2px 5px; background-color:#999; text-decoration:none; }
This makes the links fill the space in the list containers, gives them some padding on all sides, makes the background light grey, and removes the underline from the link

ul.navigation li a:hover {background-color: #000; color:#fff;}
This makes the background on the link black and the text white when the mouse hovers over the link.

Choosing the right container for your information

Consider the information you have on your site and what would be the best way to display it. The table can be your best friend when you have tabular data. But, it is not the best solution for navigation elements or laying out related information.

“Oh what a tangled web we weave, When first we practice to deceive”

The unauthorized biography of the miracle table

Once upon a time, there was a patchwork of computers between scientists, mathematicians, teachers, and all-around geeks. This patchwork allowed information to flow quickly and dialogues developed. One day, a technique was discovered to make this information pretty. Images could be added to these pages of inter-linked documents and viewed in a new “browser” called Mosaic. This made the esoteric patchwork of scientific notes appealing to the average person and the Internet as we know it today was born.

It didn’t take long for browsers to become more sophisticated. Mosaic evolved and Netscape Navigator was the way most people accessed the world wide web. Microsoft decided they needed to build a better browser and control the Internet and intranets of companies around the world. The Browser Wars had begun.

Netscape Navigator and Internet Explorer began creating two versions of the Internet, each filled with super features that only worked with their browser and not the other. Netscape would jab, and Microsoft would counterpunch. It was an exciting free-for-all and the ones hitting the mat at a dizzying speed were the web page designers trying to make their sites look decent in both browsers.

The Internet soon became filled with pages that were a mishmash of misunderstood code, boring layouts, and really bad writing. In 1996, David Siegel released his book Creating Killer Web Sites and the web was changed forever. Well, maybe it wasn’t THAT dramatic. Siegel introduced the world to the graphic use of tables to layout a site. Tables are officially used to display information in a tabular format. Columns and rows intersect to show how much the red, pullover sweater will cost on the new www.pullover-red-sweater-store.com web site. But Siegel said “wait!” We could take this ugly web site, throw in a table, chop it up again, take some big happy images, cut them into smaller pieces, reconstruct them with yet another nested table, add some text here, a little color there, maybe a shadow or two, throw in some images to keep the cells from collapsing, and voila! A web page that looks decent in Netscape and Internet Explorer and actually looks fairly nice. The miracle table was born.

Life in Internet land seemed to be full of bliss, pages were beginning to look interesting, web sites were fairly easy to build, and the miracle table was flexible enough to contain the growing design challenges. For you see, Netscape and Internet Explorer continued to fight for the biggest share of the browser market. More and more, designers found their sites only looked and behaved properly in one of the two browsers. People began building mirror sites for those with slow internet connections, Netscape users, Internet Explorer users, and more. The population of users also began expanding. Screen readers were developed for those who are blind. WebTV brought the internet to the living room television. People began asking for internet access on their cell phones and PDA devices. The miracle table was beginning to crack under the pressure.

Luckily, there was a group of rogue developers fighting to stop the browser war madness. These underground heroes fought with guerilla tactics unseen in any previous battle. They created the World Wide Web Consortium and started pounding sense (standards) into the Internet Community. They issued doctrines (suggestions) and distributed propaganda (w3c.org). They demanded the browsers begin to work together, adopt a set of standards, and the world would be happy and free again. Surprisingly, this bloodless coup-d’etat actually worked.

The W3C has been guiding the browsers, developers, and designers down a peaceful path toward a new era of web design that is cross-browser compatible (Internet Explorer, Opera, Safari, Firefox, et al), platform independent (web pages, screen readers, PDA devices, cell-phones, . . . ), much faster to download, more accessible, easier to develop, and ready for the future. Welcome to the world of standards-based web design.

post-cms

I’ve got this problem. My creative juices have dried up worse than the mohave. Sure, I can move things around, write some text, etc. But I’ve had a hard time getting into building a new site. I’ve got some that need to be done, so this is a problem.

So, I’ve been busy researching some backend programming. I’m sure my fingers will be happy soon and my design mind will just purr with excitement. By that time, I’ll have some new structures just waiting for fancy-shmancy skins.

I want to understand how to build a standards-based CMS sytem. I started looking for the perfect package. I’m not a php/asp/perl/jsp programmer so I needed something that had already been put together. I wanted it to be free and I wanted the information to sit on my server, not a hosted solution. I also wanted something that could work for a museum and also work for a small business that needed little more than a brochure-site.

So, what did I find?

Mambo is a great CMS system. It has a great administrative backend and powerful features. Mambo can be modified to create css-based layouts, but the menus and subsections are still table based. So, I continued my search.

MOSXML could be a perfect solution. This project takes the Mambo backend and uses it to output pure XML. XSL and XSLT files are used to create the desired web pages. This project is still in beta and I couldn’t get it to work on my server. I need to do some more tweaking before I give up on this project. It could be a bit too bleeding edge to build a museum web site, but would be good for a test site.

PHPWebSite is another good CMS. While it is much closer to the ideal, it still isn’t perfect. Their goal is to be XHTML 1.0 strict valid by the final launch. Currently, it is still using tables for much of the subsections but the layout can be css-based. The admin is pretty good and the features are great. I found myself dreaming about all of the cool projects that could be built with this. Unfortunately, I don’t have the time to hack up the program to get rid of all the tables.

Basecamp is a nice project management product. I haven’t played with it yet. I just set up a Basecamp site to handle an upcoming project. It will be interesting to see how this develops.

So, where am I now? The latest project that I am testing is WordPress. A recent story on converting it to a CMS system seems promissing. The conversion is pretty simple and I do like the flexibility. WordPress is also standards-based and easy to modify.

Now, I need to find a good photo gallery manager to work with WordPress. I’ve looked at Flickr, but I know this is not a solution for a museum. Image rights management would make Flickr a nightmare. So, I’m looking for something that makes it easy to upload mulitiple images, add the appropriate tombstone information, and present the images with flexible galleries.

Ah, the glory of the research. It’s a good thing my creative mind has dried up, I can just concentrate on the coding features.

post-launch

A web designer blog without a design?! Is it a mistake?

The process is what this design is about. I’m starting with a blank page and will begin adding features, design ideas, and theories.

Post-next…

Today’s ideas are built on yesterday’s movements. Post-rock, post-modern, post-expressionist, post-next… This site will build upon yesterday. Designs will evolve. Textures will build. What happens today will effect tommorow.

Let’s see how we grow.