post-museum

Museums on the Web 2005I was the web site manager for the San Diego Museum of Art for five years. I learned a lot during that time. I went from a wysiwyg hack using Net Objects Fusion to getting my feet wet with hand-coding, e-mail newsletters, Flash, ASP, and finally took the dive into standards-based programming.

Working for a museum is a great experience. The majority of the people are there because they love what they are doing. They work for less money but tend to get more freedom to explore and learn new techniques and technologies. While at the museum, I had the opportunity to attend numerous conferences on digital asset management, copyright laws, and emerging technologies.

My favorite conference was the Museums on the Web conference. This annual event brought museum web site managers, marketing directors, and curators together from around the world. I was fortunate to present two mini-workshops in the past, E-Mail Newsletters for the Museum and its Visitors in 2002 and Fresh and Interesting Features for any Budget in 2004.

This year, my partner Brian Rountree and I will be presenting a half-day workshop, Standards: the benefits of web standards for you and visitors to your site, at the Museums on the Web conference in Vancouver, Canada. We will be giving an introduction to the history of web design, the tag soup that we are wading through, and the future of standards-based web design. More importantly, we will show how museums will benefit from a conversion to standards-based web design. We are looking forward to this opportunity and encourage any museum web site manager to get their museum to sponsor a trip to this conference. Even if you miss our workshop, gasp, you will find the week well worth your time and money.

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.

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

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 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.