HTML Emails: GMail Andriod App

While it looks like most email readers are moving into accepting standards as much as possible GMail has a bit of a weak point when it comes to its Android App (not the website though). I got myself in trouble when trying to add a logotype image centered on the header and with a background color…

Centering an element

Looks like the CSS property “align:center;” won’t make it when trying to align an image to the center of the table cell, instead, using the HTML property “align” on the table/cell does it:

<tr>
     <!-- Logo -->
     <td align="center">
          <a href="http://www.gaydar.net"><img alt="Gaydar" src=".../logo.png" border="0" /></a>
     </td>
</tr>

But you may not want to center everything inside that cell, you can create a row just for this logo or you can add the logo to a table that just contains it and align it to the center:

<tr>
     <td align="center">
          <!-- Logo -->
          <table align="center"><tr><td><a href="http://www.gaydar.net"><img alt="Gaydar" src=".../logo.png" border="0" /></a></td></tr></table>
          Blah, blah, blah on the left.
     </td>
</tr>

Note that I’m talking about GMail Android’s App, if you test how to center an element on different readers you may find simpler ways to do it, but GMail App just won’t.

Consuming all the width

There are many ways to set a table’s width in an HTML Email, and as different readers like it in a different way you end up using the table’s property width as well as the CSS property inlined. Somehow, GMail Android App doesn’t like any of those but you can add the width to the cell using the width property… which has to be set in pixels so it’s not that flexible/responsive but at least allows you to use all width:

<table width="600" style="width:600px">
<tr>
     <!-- Logo -->
     <td align="center" width="600"> <!-- Setting the width here for GMail App -->
          <a href="http://www.gaydar.net"><img alt="Gaydar" src=".../logo.png" border="0" /></a>
     </td>
</tr>
</table>

Note that because there are different readers I’ve had to add the width in different ways. Now, our cell is using all the space available in our email and the image is centered in it.

Background color in GMail Android App

And when you think you got it GMail adds another difficulty to this. If you use the HTML bgcolor property on the table or a CSS style it won’t paint the background color, instead, you must add the bgcolor property to the cell to make it work on GMail Android’s App. But as IE doesn’t seem to like this property, you must add the CSS background property too. None of the email readers (apart of IE) had a problem using bgcolor on the cell instead than the table (which is the right approach anyway), but they seem to handle a bgcolor on the table well (GMail App being the exception), so by combining a bgcolor on the cell and a CSS background property this should be it:

<table width="600" style="width:600px;">
<tr>
     <!-- Logo -->
     <td align="center" width="600" bgcolor="#00a8e2" style="background:#00a8e2;"> <!-- Setting the bgcolor here for GMail App -->
          <a href="http://www.gaydar.net"><img alt="Gaydar" src=".../logo.png" border="0" /></a>
     </td>
</tr>
</table>

Remember, to make it work in all email readers:

1. Add the HTML property bgcolor to the cell for GMail App compatibility (IE adds black background)
2. Add the CSS property too (Outlook 2013 and IE prefer it this way)

Internet Explorer can also be a bit tricky setting a black background when you try to use bgcolor without a CSS background style, so make sure you use the CSS one too!!