3
Someone has done email marketing responsive, I found several templates on the internet they work responsive in the browser more when triggering email by Outlook or virtual target and open on mobile example ( Gmail application) the email does not get responsive someone has already gone through it?
1
I use a tool called MJML for mounting templates. It has its own code and is very complete. In the end, we get a specific html code for responsive emails.
Here you can find some examples of templates made with the tool.
And here has even a playground for you to test your code.
This tool also has a extension in the VSCODE similar to the playground, where you go codando and taking the preview to the side.
0
Hello, Diego!
Yes, it happens because Outlook needs some specific tags to work properly, has a template that always uses and works properly:
@media screen and (max-width: 600px) {
table[class="container"] {
width: 95% !important;
}
}
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; background-color: #dadff2;}
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
.image_fix {display:block;}
p {margin: 1em 0;}
h1, h2, h3, h4, h5, h6 {color: #737373 !important;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: #737373 !important;}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
color: #737373 !important;
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
color: #737373 !important;
}
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;
}
a {color: #000;}
@media only screen and (max-device-width: 480px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: black;
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: orange !important;
pointer-events: auto;
cursor: default;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: blue;
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: orange !important;
pointer-events: auto;
cursor: default;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
}
@media only screen and (-webkit-device-pixel-ratio:.75){
}
@media only screen and (-webkit-device-pixel-ratio:1){
}
@media only screen and (-webkit-device-pixel-ratio:1.5){
}
h4{
color:#181818;
font-family: Arial, sans-serif;
font-size:17px;
line-height: 22px;
font-weight: normal;
}
h5 {
font-family: Arial, sans-serif;
}
a.link1{
}
a.link2{
color:#fff;
text-decoration:none;
font-family: Arial, sans-serif;
font-size: 16px;
color:#fff;border-radius:4px;
}
span {
font-weight: bold;
}
p{
color:#555;
font-family: Arial, sans-serif;
font-size:16px;
line-height:160%;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>mail</title>
</head>
<body>
<table cellpadding="0" width="100%" cellspacing="0" border="0" id="backgroundTable" bgcolor="dadff2" class='bgBody'>
<tr>
<td>
<table cellpadding="0" width="620" class="container" align="center" cellspacing="0" border="0" bgcolor="ffffff">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="600" class="container">
<tr>
<td class='movableContentContainer bgItem'>
<div class='movableContent'>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="600" class="container">
<tr height="40">
<td width="200"> </td>
<td width="200"> </td>
<td width="200"> </td>
</tr>
<tr>
<td width="200" valign="top"> </td>
<td width="200" valign="top" align="center">
<div class="contentEditableContainer contentImageEditable">
<div class="contentEditable" align='center' >
<img src="" width="300" alt='Logo' data-default="placeholder" />
</div>
</div>
</td>
<td width="200" valign="top"> </td>
</tr>
</table>
</div>
<div class='movableContent'>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="600" class="container">
<tr>
<td width="100%" colspan="3" align="center" style="padding-bottom:10px;padding-top:25px;">
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center' >
<h4 style="font-size: 22px;"><span>Olá </span> </h4>
<h4 >Você preencheu o formulário<br/>
<span>site yyyy</span>, segue os dados</h4>
</div>
</div>
</td>
</tr>
<tr>
<td width="100"> </td>
<td width="400" align="center">
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='left' >
<h4 style="font-weight: 300;""><span style="color: #222;font-weight: 600;">Full Name : </span><br /> </h4>
<h4 style="font-weight: 300;"><span style="color: #222;font-weight: 600;">Company :</span><br /> </h4>
<h4 style="font-weight: 300;"><span style="color: #222;font-weight: 600;">Telephone :</span><br /> </h4>
<h4 style="font-weight: 300;"><span style="color: #222;font-weight: 600;">Email: </span><br /> </h4>
<h4 style="font-weight: 300;"><span style="font-weight: 600;color: #222;">Message: </span><br /> </h4>
<br/>
<br/>
<p style="text-align: center;font-weight: 600">tks</p>
</div>
</div>
</td>
<td width="100"> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="600" class="container">
<tr>
<td width="200"> </td>
<td width="200" align="center">
</td>
<td width="200"> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td></tr></table>
<table align="center" width="100%" bgcolor="#4149ec">
<tr align="center">
<td>
<br/>
<h4 style="margin: 0;"><img src="" width="200"></h4>
<br/>
</td>
</tr>
</table>
</table>
</td>
</tr>
</table>
<div class='movableContent'>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="600" class="container">
<tr>
<td width="100%" height="70" valign="middle" style="padding-bottom:20px;">
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center' >
<h5>
<a href=""> site.com </a><br/>
<br>
This is an automated email, please don't answer.
</h5>
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>I hope I helped you!
Browser other questions tagged html responsive newsletter
You are not signed in. Login or sign up in order to post.