10 Lessons from Web Contracts

  1. Assume Nothing.
  2. When the client complains about the last web development firm, saying the project ‘went nowhere’, start asking questions. Lots of questions.
  3. Never skip the ‘Photoshop Mockup’ stage.
  4. When the client indicates that he has a very clear idea of what the end result wll look like, get that clear idea down on paper as quickly as possible, and verify that with the client.
  5. When in doubt, check in with the client.
  6. When not in doubt, check in with the client.
  7. Don’t let the client update his own site without a bulletproof WYSIWYG content editor that forbids anything but XHTML Strict content. Don’t let them touch the design in any way once it’s been settled.
  8. Always write into the contract an ‘exit clause’. What happens when both parties agree to cancel the contract? What happens when only one party wants to cancel?
  9. Document Everything.
  10. Assume Nothing.

Blogged with Flock

PDF and Accessibility

Many people at my workplace want to publish documents to the web in PDF format. In some cases, this is great — it gives them flexibility to produce documents that look exactly how they expected, across platform, every time. The downside is that the documents may not be readable by disabled people, especially those with visual impairments. And that’s simply not acceptable in today’s world, especially for a Government-funded institution.

Contrary to popular belief, the Portable Document Format, or PDF, pioneered by Adobe Systems® is not (yet) an ideal format for electronic information storage and dissemination. It might be the ideal format for preserving print layouts across differing computer platforms, but that paradigm raises all sorts of interesting barriers to electronic information exchange on the Web.
Common Look and Feel for the Internet from the Treasury Board of Canada Secretariat

Continue reading PDF and Accessibility

Sending the Proper Mime-Type

I am now sending browsers the “proper” mimetypes, using Neil Crosby’s PHP script, as suggested (demanded?) at XML.com and 456 Berea Street. Mr Crosby’s script was incredibly easy to implement, and appears to do exactly what it claims to. I’ll have to push it around a little bit, but if it continues to hold up, it may become necessary to find/create an ASP version so that I can begin using it at work.

I was sorely tempted to take Tim’s or Charl’s or Lachy’s approach and give IE the “double-deuce“… but my occupation doesn’t really permit me to take the easier, elitist, my-way-or-the-highway path. Besides, it’s kind of mean. Sure, I’d like to force everyone to use Firefox 1.0 on the Mac—who wouldn’t?—but hey, if God himself allows people free will, who am I to take it away?

I strongly prefer a balanced approach wherever possible, no matter how attractive the idealistic perfectionist’s perspective might be. That’s why Faruk Ates’ article The case for XHTML (or Vinnie’s rant) makes a lot more practical sense than Hickson’s or Mark Pilgrim’s approach. Yes, XHTML is imperfect. Yes, we’re not sending users the correct MimeType. Yes, people still do stupid things. Welcome to Planet Earth, man.

In the absence of perfection, “as best we can” will have to do. ‘Cause refusing to do anything if it isn’t perfect just means we’ll be staying back wiping our backsides with fig leaves another few thousand years. Me, I’d rather encourage people to invent toilet paper.

How to Make HTML Tables

or: The Art of HTML Tables

HTML Tables are hard to do. So hard, in fact, that visual, WYSIWYG tools do a terrible job of creating them.

But with a little help, you can create tables that look great and are also accessible to everyone.

The Basics

{code type=html}<table summary=""><!– the table begins –>
<caption></caption>
<tr><!– the first table row begins –>
<td><!– the first table cell begins –>
</td><!– the first table cell ends –>
</tr><!– the first table row ends –>
</table><!– the table ends –>{/code}

It’ll look a little something like this:



Caption!
First Cell!

This is the simplest possible table structure. It’s a table, with one row, containing one cell.

If this is the table you want, don’t use a table! There’s no point to it. Just leave the whole table out of there; it’s useless, empty code. You would only use a table if you have at least two columns of data to add. To add another column, add another cell in the row.

{code type=html}<table summary=""><!– the table begins –>
<caption></caption>
<tr><!– the first table row begins –>
<td><!– the first table cell begins –>
</td><!– the first table cell ends –>
<td><!– the second table cell begins –>
</td><!– the second table cell ends –>

</tr><!– the first table row ends –>
</table><!– the table ends –>{/code}

This gives us a second column:



Caption!
First Cell! Second Cell!

Headings

Headings are very important. They identify what each column or row signifies. Signify a heading cell by labelling it <th> (table heading). Often (but not always) table headings will appear in bold type.

Often, the headings are at the top of each column. E.g.:

{code type=html}<table summary="Pizzas and their toppings"><!– the table begins –>
<caption>Pizzas and their toppings</caption>
<tr><!– the first table row begins –>
<th>Pizza<!– the first table cell begins –>
</th><!– the first table cell ends –>
<th>Toppings<!– the second table cell begins –>
</th><!– the second table cell ends –>

</tr><!– the first table row ends –>
<tr><!– the second table row begins –>
<td>Hawaiian<!– the third table cell begins –>
</td><!– the third table cell ends –>
<td>Ham and Pineapple<!– the fourth table cell begins –>
</td><!– the fourth table cell ends –>
</tr><!– the first table row ends –>
<tr><!– the third table row begins –>
<td>Simple Bliss<!– the fifth table cell begins –>
</td><!– the fifth table cell ends –>
<td>Spinach and Feta<!– the sixth table cell begins –>
</td><!– the sixth table cell ends –>
</tr><!– the third table row ends –>
</table><!– the table ends –>{/code}





Pizzas and their toppings
Pizza Toppings
Hawaiian Ham and Pineapple
Simple Bliss Spinach and Feta

Sometimes the headings are down the left column.

{code type=html}<table summary="Events in 2009"><!– the table begins –>
<caption>Events in 2009</caption>
<tr><!– the first table row begins –>
<th>May<!– the first table header begins –>
</th><!– the first table header ends –>

<td>Amazing event<!– the second table cell begins –>
</td><!– the second table cell ends –>
</tr><!– the first table row ends –>
<tr><!– the second table row begins –>
<th>June<!– the third table header begins –>
</th><!– the third table header ends –>

<td>Amazing event<!– the fourth table cell begins –>
</td><!– the fourth table cell ends –>
</tr><!– the first table row ends –>
<tr><!– the third table row begins –>
<th>July<!– the fifth table header begins –>
</th><!– the fifth table header ends –>

<td>Amazing event<!– the sixth table cell begins –>
</td><!– the sixth table cell ends –>
</tr><!– the third table row ends –>
</table><!– the table ends –>{/code}

You’ll notice that the headings are the first cell in each row this time.





Events in 2009
May Amazing event
June Amazing event
July Amazing event

Sometimes the headings are along both the top row and the left side.

{code type=html}<table summary="Events in 2009"><!– the table begins –>
<caption>Events in 2009</caption>
<tr><!– the first table row begins –>
<th>May<!– the first top table header begins –>
</th><!– the first top table header ends –>

<th>Amazing event<!– the second top table header begins –>
</th><!– the second top table header ends –>
</tr><!– the first table row ends –>
<tr><!– the second table row begins –>
<th>June<!– the second left table header begins –>
</th><!– the second left table header ends –>

<td>Amazing thing!<!– the fourth table cell begins –>
</td><!– the fourth table cell ends –>
</tr><!– the first table row ends –>
<tr><!– the third table row begins –>
<th>July<!– the fifth table header begins –>
</th><!– the fifth table header ends –>

<td>Amazing thing!<!– the sixth table cell begins –>
</td><!– the sixth table cell ends –>
</tr><!– the third table row ends –>
</table><!– the table ends –>{/code}





Events in 2009
May Amazing event
June Amazing thing!
July Amazing thing!

Important components

The Summary is there to provide information for visually impaired users. It will read out to them exactly what the table is for. So, for example, you might say

{code type=html}<table summary="List of Courses in the Nursing Program">{/code}

or

{code type=html}<table summary="Tuition and Fees by Program">{/code}

Caption is used for a similar purpose, but for everyone. You can repeat the summary or add something different.

{code type=html}<caption>List of Courses in the Nursing Program</caption>{/code}