A while ago Cyberimpact has adapted its email templates to make them compatible with mobile platforms. But how, exactly, does this work?

For the techies among you, we reveal here our experts secrets!

First, what is a media query?

Simply put, it is a conditional structure in CSS: a block of styles that will be applied only under certain conditions. For example, when the screen is less than 480 pixels wide.

The syntax looks like this:

@media only screen and (max-device-width: 480px){
    // styles ici
}

With media queries, we could specify the necessary adjustments to rearrange and resize the elements of our models posing problem on mobile.

What changes have you made?

We adjusted the width of the images and tables.

Our models followed the recommended standard of 600 pixels wide: on mobile, it is much too wide. We therefore adjusted these elements by applying the following properties:

.bg-body table, img:not(.noresize) { 
    max-width: 600px; 
    /* the image will never exceed 600 pixels wide */
    width: 100% !important; 
    /* but will take 100% of the available space */
    height: auto !important; 
    /* and keep the ratio of the original file */
    border-collapse: collapse;
    /* so borders do not cause strange spacing on Outlook 2007+ */
}

We adjusted table cells.

Some cells in tables also had widths or heights, and many used “padding” (inner spacing). Here is what has been changed:

.bg-body td { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* so the padding is included inside the total width rather than added to it */ 
    display: block; clear: both;
    width: 100% !important;
    /* full width! */
    height: auto !important;
    /* on mobile, no fixed height */
}

We now use tables rather than cells to divide content.

We wanted this:

floats-td

To look like that on mobile:

floats-table

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.

Here’s the code behind the magic:

<table border="0" cellpadding="0" cellspacing="0" width="194" align="left" style="border:none; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse;">

You may have noticed the unusual content of the style attribute. This is for Outlook 2007 +, which has a tendency to add margins to the tables (and inline, furthermore).

Thanks to Campaign Monitor for the tip

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?