Coding an email to display optimized for mobile screens is, in this day and age, not a "nice to have" but a "must have". A large number of users now look at their emails directly on mobile devices, so it is important that they look good. As such, we will detail the two main methods to code in a mobile-friendly way.
Media queries
Let's take a few lines to explain what media queries are; they're conditional CSS code that modifies email rendering. The conditions are usually something likeif my screen is smaller than xxx pixels, then uses this code". It's important to note this "if -> then", as it allows you to adapt or even completely modify the rendering for the mobile version(s), as it's in fact possible to set several conditions (for tablets and phones, for example).
To build an email in terms of HTML code, the most widely recognized technique is to build it with tables, and therefore with <tr> and <td>. It is then possible, via media queries, to make certain cells of the table adopt specific behaviors, such as making cells placed side by side place themselves, on smaller screens, one below the other. We then stack the <td>. This is a technique that worked relatively well.
Relatively speaking, because, as is often the case in the world of email, the technique does not work everywhere, especially on email clients using the Gmail rendering engine. The latter does not take into account media queries, so it is not possible, with this method, to obtain a mobile rendering compatible with Gmail. The attentive reader will have noticed that it is specified that the market techniquehas relatively well, and the imperfect is used because since Android 5, the native email app on Android mobiles is based on Gmail, and does not take into account media queries. The native app also offers a rendering that is generally a bad hybrid between the mobile and desktop versions. It is necessary to use a small hack that forces the desktop rendering, by adding a <div> empty which forces the width of the email for email clients that do not take media queries into account. On Android 4.4, the technique doesn't work either for obscure reasons that pushed the developers to block cell stacking <td>. However, there is a practical "work around" that consists of using cells <th> instead.
Here is an example of using media queries to display specific content depending on the terminal on which the email will be read or, more precisely, depending on the screen size on which the email will be read:
<style type="text/css">
th {
padding: 0px;
margin: 0px;
border: 0px;
font-weight: normal;
}
.show-for-mobile {
display: none;
mso-hide: all;
visibility: hidden;
max-height: 0;
font-size: 0;
line-height: 0;
padding: 0;
}
@media only screen and (max-width: 599px) {
table[class="body"] .show-for-desktop {
display: none !important;
height: 0px !important;
width: 0px !important;
max-height: 0px !important;
overflow: hidden !important;
}
table[class="body"] .show-for-mobile {
max-height: none !important;
font-size: 13px !important;
display: block !important;
overflow: visible !important;
visibility: visible !important;
line-height: 15px !important;
float: none !important;
}
}
</style>
<body>
<div style="display: none; white-space: nowrap; font: 15px courier; color: #ffffff; line-height: 0; width: 600px !important; min-width: 600px !important; max-width: 600px !important;"> </div>
<table style="padding: 0px; margin: 0px; border: 0px none; width: 100%;" class="body" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>
My content in all versions
</th>
</tr>
<tr>
<th class="show-for-desktop">
Hidden content in the mobile version
</th>
</tr>
<tr>
<th style="float:left;display: none; mso-hide: all; max-height: 0px; overflow: hidden; line-height: 0px;" class="show-for-mobile">
Hidden content in the desktop version
</th>
</tr>
</table>
</body>This example shows that it is possible to customize the content according to the screen size. The possibilities offered by this type of code are very wide, and it is quite possible to create a completely different email for mobile and desktop, keeping in mind that the greater the differences between the versions, the greater the complexity at all levels (design, development, reporting, ...)
Responsive
The second common technique is to code your email in a fluid way, with percentage sizes with maximum values (max-width). This avoids the need for additional code such as media queries. Everything in the email is coded to fit the screen size. And since conditional code is not required, this technique works under email clients using the Gmail rendering engine! Outlook poses some problems, as it does not understand the "max-width" code. But it is possible to insert specific code for Outlook to force a correct rendering (for English speakers, there is a good guide on the subject).
Here is an example of responsive code on two columns:
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse;}
</style>
<![endif]-->
<style type="text/css">
body {
Margin: 0;
padding: 0;
min-width: 100%;
background-color: #ffffff;
}
table {
border-spacing: 0;
font-family: sans-serif;
}
td {
padding: 0;
}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
</style>
<body>
<center class="wrapper">
<div style="max-width: 640px;">
<!--[if (gte mso 9)|(IE)]>
<table cellpadding="0" cellspacing="0" border="0" width="640" align="center">
<tr>
<td>
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0px auto;max-width: 640px;width: 100%" align="center" class="body">
<!-- ARTICLE 2 COLMNS -->
<tr>
<td align="center" style="text-align: center; font-size: 0px;">
<!--[if (gte mso 9)|(IE)]>
<table cellpadding="0" cellspacing="0" border="0" width="630" align="center" style="margin:0px auto;">
<tr>
<td width="300" valign="top">
<![endif]-->
<div style="display: inline-block;max-width: 320px;vertical-align: top;width: 100%;" >
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="center" style="font-size: 14px; font-family: arial, helvetica, sans-serif;">
My content column 1
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="30"></td>
<td width="300" valign="top">
<![endif]-->
<div style="display: inline-block;max-width: 320px;vertical-align: top;width: 100%;" >
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="center" style="font-size: 14px; font-family: arial, helvetica, sans-serif;">
My content column 2
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
</center>
</body>Note the conditional code snippets for Outlook which, ignoring the max-width attributes, must be framed in a fixed-dimension array to generate the rendering correctly.
So if this technique allows to act an optimized mobile rendering in all cases, why isn't it preferred to the media queries one you may ask? Well, because this method has several limitations. First of all, since it is the email rendering that is fluid and there is no conditioning, it is not possible to hide or display certain parts of the email according to the terminal, mobile or not, nor to have specific images for mobiles, etc. In short, everything that goes into the email is not optimized. In short, everything that fits into the "if I am on my mobile then ...".
Another limitation is in terms of design; everything must be thought out so that it can be coded in a fluid manner and rendered correctly in a maximum of email clients. Some designs will not be compatible with this technique. To turn the problem around, it is necessary to call upon a designer who is aware of the possibilities and limitations of this type of method in order to avoid a disappointment between the graphic design validated by the client and the developer who announces that it will not be feasible.
On the other hand, the media queries technique allows a lot of flexibility, in that it allows conditional coding, and therefore to have different design and content for the mobile version. But, under email clients using the Gmail rendering engine, the rendering will be forced to the desktop version.
Responsive or not responsive, that is the question
There is no right or wrong technique. It all depends on your priorities. Do you want a mobile-friendly rendering at all costs? Then choose the solution of a fluid code, accepting the limitations that go with it.
Do you want to have control over the design of the mobile and desktop versions, or have content adapted according to the terminals? Then the media queries technique is the answer, accepting that under Gmail-derived email clients, the rendering is that of the desktop version.
Gmail will probably accept media queries one day, their communication is going in that direction, but until they do, you'll have to choose between one or the other method.
Discover the products and services of Badsender on the subject
5 réponses
Hello Grégory,
Thank you for this analysis.
I am surprised on one point. Being on Android 5.0 and using the native e_mail app, I can tell you that the responsive table method works (cell one below the other)
Hello,
For the mailing, I had understood that it was strongly advised to prefer the css "inline", so directly in the style attributes of the html tags, rather than separate? It doesn't pose (more) a problem of rendering, then ?
Thanks for this article. Indeed Christophe the native application of android supports media queries:
https://litmus.com/help/email-clients/media-query-support/
The second technique is more commonly known as the "hybrid flex" method, and is very well detailed here:
http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries–cms-23919 and another practical one: http://www.pole-emailing.fr/projets/pole-emailing/news-pole-emailing-resp/index.html
Until Google deigns to take into account the media queries on its gmail application (the same one that penalizes websites that do not have a responsive version ...), this second technique can be used in simple cases.
Hello Christophe,
For the native Android 5 app, in our tests, everything related to media queries does not pass on Android 5. If you have a code that allows you to pass cells
On the other hand, the second technique mentioned in the article, the responsive method, allows you to move tables one below the other thanks to fluid sizes, and this on Android 5 and Gmail (which is the whole point of this technique).
Hello Johan,
For mailing, it is indeed strongly advised to use inline style, CSS not being understood by all email clients. For media queries, mobile email clients take into account CSS, hence the possibility to use them to obtain a mobile rendering (except Gmail) with media queries.
The inline style will remain a necessity for a few years to come!
Thanks for this article. Indeed Christophe the native application of android supports media queries:
https://litmus.com/help/email-clients/media-query-support/
The second technique is more commonly known as the "hybrid flex" method, it is very well detailed here:
http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries–cms-23919 and another practical one: http://www.pole-emailing.fr/projets/pole-emailing/news-pole-emailing-resp/index.html
Until Google deigns to take into account the media queries on its gmail application (the same one that penalizes websites that do not have a responsive version ...), this second technique can be used in simple cases.