Email Marketing - Responsive

3

Someone has already made email marketing responsive, I found several models on the internet they work responsive in the browser more when I launch the email by Outlook or virtual target and open in the example mobile (Gmail application) the email is not responsive Has anyone ever been through this?

    
asked by anonymous 20.10.2017 / 15:23

1 answer

0

Hello, Diego!

Yes, this happens because Outlook needs some specific tags to work properly, it has a template that I always use and work correctly:

	@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">&nbsp;</td>
								<td width="200">&nbsp;</td>
								<td width="200">&nbsp;</td>
							</tr>
							<tr>
								<td width="200" valign="top">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</td>
							</tr>
						</table>
						<table cellpadding="0" cellspacing="0" border="0" align="center" width="600" class="container">
							<tr>
								<td width="200">&nbsp;</td>
								<td width="200" align="center">
								</td>
								<td width="200">&nbsp;</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 have helped you!

    
09.05.2018 / 15:29