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).
Need help?
Reading content isn't everything. The best way is to talk to us.
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
Leave a Reply