Reputation: 89
Responsive HTML emails
Hello dear web developers!
I have a problem with email displaying in Outlook clients on mobile phones, and even on Outlook on my desktop PC.
When I receive my email in Outlook and open it in IE, I try to resize it and when it comes to the breaking point where it needs to switch to @media screen, it all breaks. It happens in almost every outlook client on mobile phones.
Here's the thing. When I press F12 on that email that is opened in IE, I see that my inline style for width is crossed out and .col class is in effect. But it still isn't showing the email correctly and responsively. This only happens in outlook. Any idea how to fix it?
Here is the part of the code:
<style>
@media screen and (max-width: 525px) {
/* FLUID TABLES */
.wrapper {
width: 100% !important;
max-width: 100% !important;
}
/*COLUMNS TO ROWS */
.col {
display: block!important;
width: 100%!important;
border: none!important;
}
.img-max {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
.wide {
width: 100% !important;
}
}
</style>
<table style="padding-top: 0px;padding-right: 15px;padding-bottom: 0px;padding-left: 15px;table-layout: auto;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding-top: 0px;padding-right: 15px;padding-bottom: 20px;padding-left: 15px; background-color: rgb(255, 255, 255);" class="section-pad" align="center">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="700">
<tr>
<td align="center" valign="top" width="700">
<![endif]-->
<table style="max-width: 700px;table-layout: auto;" class="wide" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="background-color: rgb(236, 242, 248);">
<!-- HERO IMAGE -->
<table style="table-layout: auto; background-color: rgb(236, 242, 248); width: 92%;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td class="col" align="center" valign="top" style="width: 65%; padding-left: 0px; background-color: rgb(236, 242, 248);">
<table style="table-layout: auto; background-color: white; padding-left: 10px; padding-right: 10px;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding-top: 15px;padding-right: 20px;padding-bottom: 0;padding-left: 20px;font-size: 26px;line-height: 30px;font-weight:400; font-family: Arial, sans-serif; color: #0056a6;" align="left"><img src="/resources/handlers/dcimage.ashx" style="height: auto; display: inline;" border="0">,</td>
</tr>
<tr>
<td style="padding-top: 15px;padding-right: 20px;padding-bottom: 20px;padding-left: 20px; font-size: 14px; font-weight:normal; line-height: 14px; font-family: Arial, sans-serif; color: #2d353d;" align="left">
LOREM IPSUM
</td>
</tr>
</tbody>
</table>
</td>
<td style="background-color: rgb(236, 242, 248); width: 35%; padding-right: 0px;" class="col" align="center" valign="top">
<p valign="middle" style="line-height: 40px; font-size: 12px; color: white; font-family: Arial, sans-serif; background-color: rgb(0, 86, 166);">
In case you need to contact us</p>
<img src="/r1.jpg" alt="telephone" class="img-max" border="0" height="50" width="240">
<img src="/r2.jpg" alt="skype" class="img-max" border="0" height="50" width="240">
<img src="/r3.jpg" alt="mail" class="img-max" border="0" height="50" width="240">
<img src="/r4.jpg" alt="web" class="img-max" border="0" height="50" width="240">
</td>
</tr>
<tr>
<td class="col" align="center" valign="top" style="width: 65%;">
<img src="/r2.jpg" class="img-max">
</td>
<td style="background-color: rgb(236, 242, 248); width: 35%;" class="col" align="center" valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
Upvotes: 1
Views: 1404
Answers (3)
Reputation: 7587
Hmm, I'm not sure whether the mobile Outlook apps support media queries. The mobile apps are much better at rendering markup then their desktop counterparts (on Windows, anyway).
Regardless, Hybrid Design achieves a responsive, shape-shifting layout without relying on media queries. Your code above is heading in the right direction, though the example below is a little different. Here is a basic 2-column scaffolding from Fabio Carneiro's code samples on GitHub (all credit to him!):
<!doctype html>
<html>
<body style="margin:0;">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<!-- // 2-COLUMN SCAFFOLD [CENTERING, FLUID] -->
<tr>
<td align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--// DEVELOPER NOTES:
1. Setting font-size:0; is necessary to ensure
that there is no extra spacing introduced
between the centering divs that wrap each
of the columns. //-->
<!--[if mso]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
<!--// DEVELOPER NOTES:
1. To have each column center upon stacking,
wrap them in individual divs, set the same
max-width and width as the table within it,
and set display to inline-block; using
vertical-align is optional.
2. Setting min-width determines when the two
columns of this block will wrap; in this
case, when the total available width is
less than or equal to 480px. //-->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
<tr>
<td align="center" valign="top">
<!-- // REPLACE WITH BLOCK -->
<p style="background-color:#2BAADF; color:#FFFFFF; font:16px Helvetica, sans-serif, normal; margin:0 !important; padding:10px;">LEFT</p>
<!-- REPLACE WITH BLOCK // -->
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
<tr>
<td align="center" valign="top">
<!-- // REPLACE WITH BLOCK -->
<p style="background-color:#51BBE5; color:#FFFFFF; font:16px Helvetica, sans-serif, normal; margin:0 !important; padding:10px;">RIGHT</p>
<!-- REPLACE WITH BLOCK // -->
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- 2-COLUMN SCAFFOLD [CENTERING, FLUID] // -->
</table>
</center>
</body>
</html>There are more scaffolds and patterns in that repo and elsewhere, but this shows the basic principle in action.
(If you don't already know how this works) this method uses max-width and min-width to impose rigid baselines (allowing some movement) and imposes a fixed, wide width for Outlook who is shackled to desktop anyway. Once a mobile-friendly baseline is set, media queries progressively enhance the email further in clients that support it (like iOS Mail).
Upvotes: 1
Reputation: 147
If I understand correctly, the behavior you want is to drop each of your columns market with class="col" into a row, when your media query for small screens comes into effect.
First of all, Outlook will strip out all in-line styling (as you noticed using F12), so best to double that up using the equivalent html attributes for each of your elements.
Secondly, max-width is not supported by Outlook (and Lotus Notes 8 & 8.5), so you will need to wrap each of your <table>s that are inside you 'col' columns into conditional code which creates a table with a set width to hold everything in, that targets IE and Microsoft Outlook. You will need to use something like:
<!--[if (gte mso 9)|(IE)]>
<table width="525" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table style="table-layout: auto; background-color: white; padding-left: 10px; padding-right: 10px;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding-top: 15px;padding-right: 20px;padding-bottom: 0;padding-left: 20px;font-size: 26px;line-height: 30px;font-weight:400; font-family: Arial, sans-serif; color: #0056a6;" align="left"><img src="/resources/handlers/dcimage.ashx" style="height: auto; display: inline;" border="0">,</td>
</tr>
<tr>
<td style="padding-top: 15px;padding-right: 20px;padding-bottom: 20px;padding-left: 20px; font-size: 14px; font-weight:normal; line-height: 14px; font-family: Arial, sans-serif; color: #2d353d;" align="left">
LOREM IPSUM
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
I would strongly recommend following this guide to build responsive emails that work on all major mail clients for a more in-depth explanation of this, and also other very useful tricks for making email work even on Outlook :)
Upvotes: 1
Reputation: 471
As I recall, Outlook mobile apps don't support responsive emails. I don't think the display: block; will work at all on them (same as with most Android email clients). The responsive method you're using only works reliably on iPhone native apps.
Upvotes: 0
Related Questions
- How to write a Responsive Html Email in Gmail
- Responsive email template
- My responsive HTML Email is not responsive when it's actually sent on Gmail
- How to created a responsive html email template
- Responsive boxes in HTML Email
- HTML Responsive Email
- Responsive email layout
- html email not showing responsive
- How to work responsive email
- How to make emails responsive?