Proof of Concept that the Android Gmail app is the worst email client ever

HTML & CSS
1

I’ve been working on this for a day and a half and I’m at my wit’s end. Consider this code block.


<!DOCTYPE html>
<html>
<body>
<table style="display: block; margin: 0 auto; border-collapse: collapse; width: 800px; min-width: 800px;" align="center" border="0" width="800" cellpadding="0" cellspacing="0" height="38">
	<tr>
		<td width="92"><img src="http://www.tombrasinteractive.com/clients/DTNA-44060/2014-07/v2.3/img/clear.gif" height="38" width="92" border="0" style="display: block;"></td>
		<td><a href="#"><img src="http://www.tombrasinteractive.com/clients/DTNA-44060/2014-07/v2.3/img/clear.gif" height="38" width="200" border="0" style="display: block;"></a></td>
		<td width="112"><a href="#"><img src="http://www.tombrasinteractive.com/clients/DTNA-44060/2014-07/v2.3/img/clear.gif" height="38" width="112" border="0" style="display: block;"></a></td>
		<td width="61"><a href="#"><img src="http://www.tombrasinteractive.com/clients/DTNA-44060/2014-07/v2.3/img/clear.gif" height="38" width="61" border="0" style="display: block;"></a></td>
		<td width="75"><a href="#"><img src="http://www.tombrasinteractive.com/clients/DTNA-44060/2014-07/v2.3/img/clear.gif" height="38" width="75" border="0" style="display: block;"></a></td>
		<td width="110"><a href="#"><img src="http://www.tombrasinteractive.com/clients/DTNA-44060/2014-07/v2.3/img/clear.gif" height="38" width="110" border="0" style="display: block;"></a></td>
		<td width="69"><a href="#"><img src="http://www.tombrasinteractive.com/clients/DTNA-44060/2014-07/v2.3/img/clear.gif" height="38" width="69" border="0" style="display: block;"></a></td>
		<td width="81"><img src="http://www.tombrasinteractive.com/clients/DTNA-44060/2014-07/v2.3/img/clear.gif" height="38" width="81" border="0" style="display: block;"></td>
	</tr>
</table>
</body>
</html>

When viewed as an HTML email this works in every email program in the world, even legendarily crappy ones like Outlook 2007, but it doesn’t work in the Gmail App for Android. Hairline cracks form between the images because of the “make the email the width of the screen” process, and the whole row is displayed wider than the requested 800px. This is cause by a bug in the resize algorithm for the email, but that’s still no excuse - the one in iOS works after all.

So let us pass the rotten raspberry for worst email software from Microsoft to Google. Congratulations Android team.

Meanwhile, anyone have any clue on how to work around this?

2
Off Topic:

Yep. Ditch HTML email and use plain text. :smiley:

But seriously, I don’t know about Android, but I’d be trying things like adding table-layout: fixed; to the table styles.

Off Topic:

Have you tried the latest versions of Outlook? Like 2013 or 2014? I haven’t come across anything worse than them for rendering HTML email.

3

As Ralph suggests the table-layout fixed algorithm is imperative if you want tables to retain the sizes you set.

Campaing monitor templates also use this rule in their media queries for mobiles.


img { height: auto; line-height: 100%;}

I’ve no idea why they have it in place as it makes no sense but they must have a reason to include it in their templates.

4

I use Litmus to test across multiple clients, including Outlook 2007, 2011 and 2013 (if there’s a 2014, Litmus hasn’t added it yet). Gmail App for Android has shattered their record for lost time and productivity by a huge margin - I’m on my third day fighting this. By that measure it sucks the most.