We now use tables rather than cells to divide content.

We wanted this:

To look like that on mobile:

After many tests, we found that table cells simply can’t be repositionned that way.

The solution? Use tables instead and define width and align attributes. The result is similar to floats: if the containing cell is large enough, the tables are displayed side by side and when – like on mobile – there ain’t enough space, they simply fall to the next line.

We enlarge font for better readability.

By default, Apple magnify fonts to make them more readable on a small screen. We added this to other mobile platforms as well.

td .texte { font-size: 17px; }

The last word

To get there, it took several hours of testing and research in a battle between man and machine. And even then, not everything is perfect: some emails are simply better suited for mobile version than others …

Note: curiously, it is not difficult to make emails on mobile look nice. What is difficult is to do so without breaking the so-called “normal” version, which needs to be compatible with Gmail, Yahoo, Outlook 2003-2007-2011-2013, etc. It is these who ignore standards and display HTML / CSS as they see fit (and force us to use complicated techniques).

Give us your feedback: do you like more technical articles like this one?