Gmail Chat

Google are currently implementing a new feature into Gmail that allows you to chat over their Google Talk service from within your web browser. It’s a neat idea and seems to work.

Furthermore, they’ve set up Gmail so that you can access and search your chat logs along with other mail. It would be easy at this point to make a point about privacy concerns and the terrifying amount of data they now store about me. Instead, I’m going to talk about mark-up.

Google suck at HTML. This is a fairly well known fact. It’s a little amusing, since they recently employed Ian Hickson (who’s writing the HTML5 spec). I guess they’ve not figured out how to implement an employee-wide hive mind just yet.

I’ve currently got chat logging enabled for curiosity value. Since I keep local logs though, and since I use multiple protocols (as do my contacts), it’s not likely to be much long term use to me. Sometimes curiosity can hurt, though. Here is a 4 line conversation, as marked up by Google:

<table cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="font-size: 80%; width: 5em; color: rgb(136, 136, 136);"
          nowrap="nowrap" valign="top"> 2:52 PM&nbsp;</td>
      <td style="font-size: 80%; padding-left: 2em; text-indent: -1em;">
        <span></span> <span style="font-weight: bold;">me</span>: Ello :)
      </td>
    </tr>
  </tbody>
</table>
<table cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="font-size: 80%; width: 5em; color: rgb(136, 136, 136);"
          nowrap="nowrap" valign="top">2:53 PM&nbsp;</td>
      <td style="font-size: 80%; padding-left: 2em; text-indent: -1em;">
        <span></span><span style="font-weight: bold;">Hanni</span>: hiya
      </td>
    </tr>
  </tbody>
</table>
<table cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="font-size: 80%; width: 5em; color: rgb(136, 136, 136);"
          nowrap="nowrap" valign="top">&nbsp;</td>
      <td style="font-size: 80%; padding-left: 2em; text-indent: -1em;">
        <span></span> <span style="font-weight: bold;">me</span>: How's you?
      </td>
    </tr>
  </tbody>
</table>
<table cellpadding="0" cellspacing="0">
  <tr>
    <td nowrap valign="top" style="font-size:80%;width:5em;color:#888">
    </td>
    <td style="font-size:80%;padding-left:2em">
      <span><b>goes to update in itunes</b></span>
    </td>
  </tr>
</table>

And here’s whats actually required to describe the same conversation (via Anne van Kesteren).

<ol>
  <li>
    <p>2:52 PM <cite>Me</cite></p>
    <p><q>Ello</q></p>
  </li>
  <li>
    <p>2:53 PM <cite>Hanni</cite></p>
    <p><q>Hiya</q></p>
  </li>
  <li>
    <p><cite>Me</cite></p>
    <p><q>How's you?</q></p>
  </li>
  <li>
    <p><cite>Hanni</cite></p>
    <p><q class="action">goes to update iTunes</q></p>
  </li>
</ol>

To be honest, that’s not a perfect way of describing Google’s specific data and marking up conversations is a bit of a grey area (perhaps until HTML5 specifies it properly, or a Microformat pops up for it). You could also experiment with blockquotes and definition lists.

The point is, that Anne’s way is at least better. It’s clearer, uses less markup, is far more CSS-friendly and will degrade (not much of a consideration in Gmails tag soup, I admit). Google’s way is simply wrong. What bemuses me the most, is that from where I’m sitting it would be easier to produce the semantic mark-up than the bizarre table concoction Google is pushing.