post-bio

Portrait of Ted Drake ca. 1993
About me. It’s a strange place to begin. In fact, it’s just a strange place.

Skipping the traditional third person voice…”Ted was a perfect child…”

Let’s just say that I’m a creative person that got into web site design because we needed a web site and the fools that we paid to build one were darn idiots.

I started with My Website Builder from MySoftware Co. This thing makes frontpage look like a gem. But it got me started. I went on to Net Objects Fusion then to hand-coding in Homesite and Dreamweaver. I still like my Dream…. what a boring biography! tools and history?! Boring.

Here’s what I like and try to do.

I believe the internet should be for everyone. I believe we should do what is possible to make that information accessible. Standards-based design has brought the challenge and creative interest back to web design. So, I’m a Zeldman follower that is trying to bring accessibility and standards-based design into the world, one page at a time.

That’s getting closer….

I am also a photographer and eventually this site will be filled with my photographs. My photographs are often out of focus, blurry, unclear, and mysterious. I’m not interested in one liner jokes and the same goes with art. Make me think.

While I respect copyright laws for others, I don’t care if someone uses one of my images. I’d like to get credit and would love to know where they are used, but I don’t put watermarks on them. The internet is for sharing, not hording. However, I do respect copyright for those that depend on intellectual property, such as museums, and don’t steal or download without giving credit.

post-design

I have found the cure for design-block. You know, like writer’s block only with coding. Just create one seriously ugly style sheet and stare at it for a while. You’d be amazed how quickly the artistic juices begin flowing. We’re talking really damn ugly.

I thought it would be nice to do a blog with primarily grey tones and few colors. Well, what better than a sharpie on white paper. and… do it quickly, really artsy and rushed. Oops, when I scanned the drawing, the background image took 83 seconds to download. So, I chopped it up and threw it in the style sheet and voila… a really ugly site!

I visited css zen garden, thinking it would inspire me. Actually, I was desperate and thought I could rip off some hard work from somebody else. Did I say that?

Seriously, I just perused the pages waiting for something that was an inspiration. While none of them said, hey Ted, here’s your blog design, I did like the way a few of them used huge header images.

Recently, I scanned some black and white images from Paris, so the search was on for something nifty. This image on the top of the home page is from Paris. I was walking along the road next to the Seine and saw this guy watching a television float by. Yes, a guy watching a television float by. So, that is what this is, a slow shutterspeed photograph in Paris of a man watching a television float by in the Seine. I’ll add new images to the other pages in the near future.

I’ve been busy writing new posts about standards-based programming. It’s a pain to do coding examples. I have gained much new respect for those that have taken the time to write stories with coding in them. I welcome any suggestions and comments on these posts. They will be combined for a paper I will be delivering at the upcoming Museums on the Web 2005 conference.

Now, I need to finish modifying the code to remove excess markup.

Building a standards-based form

Most web sites will require a form or two. Purchases, weather requests, contact forms, and even “Guess the number of dust bunnies under David’s desk” contests. In the past, forms were set up with the miracle table and that worked just fine. After all, they looked pretty. What more could we want?

How about an accessible form that can be navigated with a keyboard instead of a mouse? How about a form that can be used by the blind? How about a form that allows people to purchase stuff on their cell phones? How about all of this and more in a format that is sooo much easier to build and maintain, not to mention faster download times?

Does this sound impossible? Miraculous? The answer, once again is semantic coding. Let’s go back to the beginning of the HTML history books and look at some simple tags and how they should be used properly.

A form can include one to many inputs. On larger forms, these inputs can be grouped into similar subjects, such as personal information, address information, credit card information, etc. Somehow, we need to label the inputs to give users an idea of what they should tell us. These basic demands are the building blocks of an accessible form.

The Wrapper

Forms use a <fieldset></fieldset> tag to group similar inputs. The entire set of inputs can be grouped inside one fieldset and sub groups can be nested within the fieldset, creating one big set of fieldsets. Think of it as a box inside a box inside a box… Or, the form could have one or more fieldsets that are not nested within each other. It all comes down to the subject matter of the inputs.

Here’s a good example of nested fieldsets

flow of information in a form with nested fieldsets

Here is an example of non-nested fieldsets

flow of information in a  form with individual fieldsets

Look at your information and decide if there should be one or multiple fieldsets. Visually, there is a border around the fieldset by default. This border can be removed with style sheets. Avoid using background colors, Internet Explorer will not show them correctly.

Fieldsets have a convenient <legend></legend> tag that goes directly after the opening <fieldset> tag. The legend tag is used for adding a short descriptive header to the fieldset. The default styling features a square box around the text. The border can be removed with the style sheet.


<fieldset>
<legend>Describe the Form</legend>
</fieldset>

The Inputs and Labels

To make a form comply with accessibility standards, each input needs a label. Conveniently, there is a label tag. When a visitor sees a form with the label tag,A form isn’t of much use if there are no input fields. These are very easy to work with.

There is a <label></label> tag to give a label to each input.

These are really cool. The label could go anywhere on the page and it would still be associated with the input field. If someone were to click on the label, it activates the input field, this makes it much easier for someone with limited mobility to activate a check box or radio button. To do this, we add a for=”xxx” attribute to the label and the input gets an id=”xxx”. This tells the label to look for the input with the same value.

<label for=”name”>Enter your Name</label>

<input type=”text” id=”name” size=”15”>

Let’s put together a simple form


<form action=”” class=””>

<fieldset>
<legend>Join our mailing list</legend>
<label for=”name”>Your Name<label>
<input type=”text” size=”25” id=”name”/>

<br />
<label for=”email”>Your E-Mail Address</label>
<input type=”text” size=”25” id=”email” />

<input type=”submit”/>
</fieldset>
</form>

Pretty simple, huh? The <br /> tag will keep the fields from running together. Style sheets can give the form the look desired.

Visit www.picment.com and www.stuffandnonsense.co.uk for more information.

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.