Email Development January 27, 2015 • Kyle Lapaglia

How Android is Strangling Responsive Design

The Question

"Are you kidding me? Android must support responsive design. Right? Right??" Hold your horses there, kemosabe. I did a little testing and found out exactly what was going on. It's easy to assume the days of non-responsive Android clients (like 2.1) are behind us, but after I wrote a blog on how to make an email template responsive, I found out that it's not so simple. In the comments, many of our readers were curious as to why the code was or wasn’t working for Android phones. It turns out the answer to this question is actually pretty complicated. Let’s start by covering two of the most popular techniques for turning a multi-column design into a single column design on mobile: stacking TDs or stacking tables. Both are very similar, in that they use a table structure to create the two column layout. Tables/TDs with align are used instead of float because many email clients don't allow floats to work. These methods had been used relatively interchangeably until recently.

Code Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
td {border: 1px solid red;}

@media only screen and (max-width: 479px) {
.td_align {display:block;width:100%;}	
.table_align {display:block;width:100%;}	
}
</style>
</head>
<body>
<p>This design is built with two TDs that should become display block.</p>
<table width="300">
	<tr>
		<td align="left" class="td_align">
		Left
		</td>
		<td align="right" class="td_align">
		Right
		</td>
	</tr>
</table>r

<p>This design is built with two tables which are "aligned" and become block.</p>
<table width="300">
	<tr>
		<td>
			<table align="left" class="table_align">
				<tr>
					<td>Left</td>
				</tr>
			</table>

			<table align="right" class="table_align">
				<tr>
					<td>Right</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
</body>
</html>

The Problem

The TD stacking method shown above actually depends on having the correct doctype. If the doctype is not included in the email's code, both of the TDs will remain on the same row instead of stacking. This is where the versions of Android become relevant. The TD stacking method works just fine in Android 2.3 (Gingerbread) and in 4.0.3 (Ice Cream Sandwich), the Android versions we offer testing in. However, in Android 4.4 (KitKat) the native mail client strips out the doctype before displaying the code. This causes the problems I listed above. Fear not, Android 4.4 is on our roadmap to add to our testing suite as soon as we can. Check out the pic below to see how the table and TD stacking methods (with and without doctype) render in the different Android versions as well as iOS. You can see that without the doctype, the TD stacking method doesn't really work. Both of the TDs are still in the same row. In Android 4.4.2, the TD stacking method doesn't work in either case because the doctype is stripped. The table stacking method works in all cases, though some additional CSS would be needed to make the stacked tables take the full width of the phone.

The Solution

Of these two methods, we recommend the table stacking method because it does not depend on having a doctype to function. To summarize market share/support:

Gingerbread(2.3) - 2% mobile/tablet market share - TD and Table stacking supported.
Ice Cream Sandwich(4.0) - 2.5% mobile/tablet market share - TD and Table stacking supported.
KitKat(4.4) - 17% mobile/tablet market share - Table stacking supported. Doctype stripped, TD stacking not supported.
iOS(All) - 43% mobile/tablet market share - TD and Table stacking supported.

May. 20, 2015 Update: As pointed out by Steven in the comments below, you can also change your TDs to THs to fix this issue.

Android Lollipop is Coming

Android's version 5.0, or "Lollipop" is on the way, though currently they only have about .7% of the market share. As reported elsewhere, Lollipop will not have a stock email client (though it may have one added by the manufacturer). Instead, it instructs users to download the Gmail app. The Gmail team recently added the ability to connect the Gmail app to other kinds of mail accounts, including Outlook.com, Yahoo! Mail, Exchange and so on. While consolidating their mail apps is good for Google, it may not be so good for the rest of us. Gmail still doesn't support media queries, meaning that neither the table stacking method nor the TD stacking method will work. Unless a Lollipop user downloads a more responsive design friendly app, they'll be seeing the worst looking version of your emails possible. As we watch the market share of Lollipop grow, marketers will have to turn to one of two things: hoping that Gmail gets with the times, or other design techniques.