Ben Ward

Gmail Chat

. Updated: .

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 what�s 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 Gmail�s 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.

Comments

Previously, I hosted responses and commentary from readers directly on this site, but have decided not to any more. All previous comments and pingbacks are included here, but to post further responses, please refer me to a post on your own blog or other network. See instructions and recommendations of ways to do this.

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

    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.

You can file issues or provide corrections: View Source on Github. Contributor credits.