Skip to content

Version 1.0 Changes

jng5 edited this page Oct 15, 2014 · 1 revision

Antwort Version 1.0 is a complete rewrite of the code. The change was prompted largely by changes made to the Android Email clients effective with the Android 4.3 release in mid-2013.

Increased Android support

While many of us love our iOS devices, the unfortunate truth is that Android has 80% market share vs. iOS's ca. 15% (source: Business Insider). That being said, it is possible that you have more opens in iOS than in Android or other clients, as per email client market share stats from Litmus. Your numbers may vary drastically depending on your audience.

Despite all these uncertainties, Antwort aims to be as bullet-proof-as-possible, meaning it should be as least broken as possible.

Android suddenly broke

But suddenly in mid-2013 Antwort v0 was very broken on Android devices, example:

  • columns were no longer forced into rows
  • columns rendered erratically, sometimes losing width properties altogether.
Very broken: Erratic column widths Broken: horizontal scrolling
Very broken: Erratic column widths Broken: horizontal scrolling

Many were surprised by Android's changes:

How Android broke

In Android 4.3+ <td>s always render as table cells. That means applying display: block !important; and setting their width to 100% have no effect and will not transform our columns into rows.

We use table cells instead of floats to support Microsoft Outlook. Outlook does not support some HTML and CSS features because it uses Microsoft Word to render emails.

Simulating Floats with Tables

A <table align="left"> behaves like a floated element and all email clients support tables. So let's use used multiple aligned tables to be our columns. To make sure Outlook aligns our columns correctly, we need a wrapper table, which we'll serve only to Outlook using the [if mso] conditional:

<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr><td width="50%" valign="top"><![endif]-->

    <table width="264" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row">
        <td class="col" valign="top">
          <strong>Herman Melville</strong>
          It's worse than being in the whirled woods, the last day of the year! Who'd go climbing after chestnuts now? But there they go, all cursing, and here I don't.

    <!--[if mso]></td><td width="50%" valign="top"><![endif]-->

    <table width="264" border="0" cellpadding="0" cellspacing="0" align="right" class="force-row">
        <td class="col" valign="top">
        <strong>I am Ishmael</strong>
        White squalls? white whale, shirr! shirr! Here have I heard all their chat just now, and the white whale—shirr! shirr!—but spoken of once! and&hellip;

<!--[if mso]></td></tr></table><![endif]-->

You need to set a fixed pixel width for the tables. Here we have 264px, which in this case is (600-3*24)/2 or our container minus gutters divided by number of columns.

Force column tables into rows

In the example above, our tables have fixed width of 264px a .force-row class. To force them into rows on mobile we use the following styles:

@media screen and (max-width: 599px) {
  table[class="force-row"] {
    width: 100% !important;
    max-width: 100% !important;

Using this strategy, Antwort v1 renders like so on Android:

Android Email app properly transforms columns to rows Android Gmail makes it own rows
Android Email app
properly transforms columns to rows
Android Gmail app
makes it own rows by fudging our widths

Depending on your design, this may not be desired behavior, esp. on Android Gmail app. Check your audience's email client share statistics before deciding if this strategy works for you.

Bottom Line

How important is the current Android support to you?

Android v0 legacy still works across nearly all Email clients. The code also a bit easier to understand.

At the end of the day, how much "broken" can you tolerate? This will also vary depending on your design. It's possible that the new v1 strategy creates problems in the Android Gmail app, which fudges its own widths into your email.

You can’t perform that action at this time.