Ben Michael Ward is a Web Developer in San Francisco.

This is his website. View the homepage or archives. You can also follow him on Twitter.

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.

Tagged

Posted in

Follow up

2 Responses to “Gmail Chat”

  1. Comment by Tantek

    February 12th, 2006 at 1:34 am

    Ben,

    Thanks for calling this out. You’re absolutely right about the horrid markup – such an abuse of tables for layout is pathetic. Anne’s way is much better in brevity, and in semantics.

    A few other folks have also been asking for a microformat to represent chat conversations online, and the microformats community has been working on researching current examples and formats to form the bases for a chat microformat.

    Take a look:

    http://microformats.org/wiki/chat-examples

    http://microformats.org/wiki/chat-formats

    Thanks for the pointer to Anne’s markup, I’ve added it to the chat-examples wiki page. If you’re interested in helping research and develop a chat microformat, please join the microformats-discuss list and jump in!

    http://microformats.org/discuss

    Thanks!

    Tantek

    §
  2. Comment by Ben

    February 12th, 2006 at 1:13 pm

    Thanks Tantek, I’ve signed up for the Microformats list. I’ve been meaning to for an age, so I’m grateful for the prompting.

    §