Re: Email Template Becomes Distorted When I send

Anonymous · ‎01-05-2016

Hi Everyone,

We have a template that has a side box to add additional information. In the Marketo system it shows the template as it should be however when it is sent, it distorts the template ad "moves" the side box to the bottom of the email. Does anyone have any information on why/how this could happen and the solution to resolve? Any help would be appreciated. Thanks so much!

This is how it should look in the email:

And this is how it is showing up:the box that is pictured is located all the way at the bottom of the email, below the other text.

Katie_DenHollan · ‎09-29-2016

Hi Erica,

I know your post is from a while ago, but we are dealing with the exact same issue right now. That template came from Marketo, and I believe it's from a template site they used to have because we have the same one:

I've been researching this more and had found several posts in the community about how poor the code was on those templates, so I think that is the root of the problem.

I'm wondering if you resolved this somehow or if you scrapped your templates and started fresh?

Justin_Cooperm2 · ‎09-29-2016

I definitely recommend using our Starter Templates in the product rather than anything you've found at http://templates.marketo.com. It's not that they're bad templates, but the world evolves and so do email clients. The templates at http://templates.marketo.com are outdated. The starter templates are a much better place to get started.

Justin_Cooperm2 · ‎01-05-2016

Where did you get the Email Template from? Does it use MSO conditional tags?

Anonymous · ‎01-05-2016

I think our old marketing manager may have created it. I am not familiar with HTML but this is a portion of it. It almost seems like the template just needs to be wider in order for the box to appear to the side when it is sent via email.

Justin_Cooperm2 · ‎01-05-2016

Ok, can you do the following for me:

Create a new email from this template and touch nothing within the editor except give the email a subject. Then approve the new email and send it. Does it look ok?

Anonymous · ‎01-05-2016

Just added "Test 123" as the Email Subject then created a test smart campaign for my email and to send to myself. When I received in my inbox, it still shows the same (2nd picture). I recall my old manager saying he created for mobile devices but when I check the email on my cell phone, it showed up the same as it does on my lap top. I'm just not sure what the issue is.

Justin_Cooperm2 · ‎01-05-2016

Ok, it's definitely a code issue then in the template. If you are comfortable pasting the code for the entire template, perhaps folks in the community can help spot what could be wrong. It's possible it never worked correctly or that the previous owner didn't check it on multiple devices.

Anonymous · ‎01-05-2016

That would be very helpful. Please see below. Do you think I should post as a seperate post as well?Thanks so much!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

/* Put desktop styles here */

body { width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased; }

table { border-collapse: collapse; }

* {-webkit-text-size-adjust: none}

@media only screen and (max-width: 479px) {

body[yahoo] { margin-top: 0px !important; padding:0px !important;}

body[yahoo] .deviceWidth { width:98%!important; }

body[yahoo] .tdWidth { width:15px !important; }

/* body[yahoo] .block_td {display: block !important;}

*/ body[yahoo] .ltBlock {width:170% !important; margin-bottom: 15px !important;display: block !important;}

body[yahoo] .rtBlock {width:270% !important; margin-left: -210px !important;display: block !important;}

body[yahoo] #content img { width:80% !important; display:block !important; margin:0 auto !important;}

body[yahoo] .center { text-align: center!important; }

body[yahoo] .title { font-size:20px !important; }

body[yahoo] .bodyText { font-size:15px !important; line-height:28px !important; padding-bottom: 30px !important; }

body[yahoo] .company { display: block !important;}

body[yahoo] .address { display: block !important;}

body[yahoo] .percent_td {width: 98% !important;}

}

</style>

</head>

<tr>

<td>

<tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<tr>

<tr>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

<tr>

Title of Email

</div>

</td>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

<td>

<tr>

<tr>

<span style="font-size:18px; color:#5e5d5d;padding:0; margin:0;">Intro title:</span><br /><br />

<span style="font-weight:bold; font-size:24px; color:#5e5d5d">Title of Email</span><br /><br />

Hello {{lead.First Name:default=Sir/Madam}},<br /><br />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet urna velit. Donec luctus malesuada diam, vitae condimentum metus pretium id. Vestibulum molestie, turpis facilisis scelerisque molestie, lorem nibh porttitor purus, sollicitudin rutrum sem lectus id ligula. Maecenas sapien diam, faucibus viverra condimentum id, viverra sit amet metus. Sed viverra tellus volutpat sapien faucibus lobortis. Donec ligula tellus, lacinia at malesuada nec, pulvinar ut elit. Duis velit justo, feugiat sed mollis a, tristique id felis. Vivamus nunc turpis, aliquet at pulvinar eu, faucibus id justo. Integer gravida tristique ipsum, sit amet posuere nisi facilisis eu. Nulla facilisi. Nam sollicitudin, augue sit amet molestie varius, orci odio cursus arcu, ac eleifend justo dolor nec lectus.<br /><br />

Phasellus sed lacinia nunc. Aliquam neque augue, mollis sit amet molestie quis, ullamcorper id nibh. Curabitur at volutpat erat. Nam in nisi eu augue varius lacinia sed varius ipsum. Morbi pretium est ut est rutrum eu tincidunt nisl congue. Fusce elementum dignissim mi, nec pulvinar libero faucibus ut. Praesent ac suscipit mi. Fusce facilisis aliquam velit nec convallis. Aenean cursus rutrum elit eu rutrum. Suspendisse quis risus ipsum. Quisque euismod velit felis. Proin iaculis risus sit amet magna faucibus commodo. Integer mi turpis, tempus id scelerisque ac, sodales tristique nisl. Suspendisse mattis risus non lorem blandit gravida. Nam euismod libero in lectus venenatis ac sollicitudin dolor lacinia. Fusce quis commodo augue. Nam vitae est quis mauris blandit iaculis sit amet non sem. Morbi interdum pellentesque elit in tincidunt. Quisque condimentum porttitor mattis.

</div>

</td>

</tr>

</table>

<tr>

<tr>

<span style="color:#ffffff; font-size:20px; font-weight:bold;">Column Title</span>

</div>

</td>

</tr>

</table>

<tr>

<tr>

</td>

</tr>

</table>

</td>

<tr>

</td>

</tr>

</table>

</td>

</tr>

</table>

<tr>

<span style="font-weight:bold; color:#5e5d5d;">SubTitle Goes here. </span><br /><br />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet urna velit. Donec luctus malesuada diam, vitae condimentum metus pretium id. Vestibulum molestie, turpis facilisis scelerisque molestie, lorem nibh porttitor purus, sollicitudin rutrum sem lectus id ligula. Maecenas sapien diam, faucibus viverra condimentum id, viverra sit amet metus. Sed viverra tellus volutpat sapien faucibus lobortis. Donec ligula tellus, lacinia at malesuada nec, pulvinar ut elit. Duis velit justo, feugiat sed mollis a, tristique id felis. Vivamus nunc turpis, aliquet at pulvinar eu, faucibus id justo. Integer gravida tristique ipsum, sit amet posuere nisi facilisis eu. Nulla facilisi. Nam sollicitudin, augue sit amet molestie varius, orci odio cursus arcu, ac eleifend justo dolor nec lectus.

</div>

</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

</tr>

<tr>

#5e5d5d; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;

-webkit-text-stroke-width: 0px; font-weight: bold;"><br /><br /></span><span style="color: #808080; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align:

center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; float: none; display: inline !important;">5100 W.

Kennedy Blvd., Suite 430, Tampa, FL 33609</span><br style="color: #5e5d5d; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: center; text-indent: 0px;

text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;" /><span style="color: #808080;"><a style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal;

line-height: normal; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: #808080;" href="http://www.MY_WEBSITE.com/contact-us/" target="_blank">Contact Us</a> <span style="font-family:

Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;

-webkit-text-stroke-width: 0px; float: none; display: inline !important;">|</span> <a style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: center;

text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: #808080;" href="http://www.MY_WEBSITE.com/privacy-policy/" target="_blank">Privacy Policy</a> | <a style="color: #808080;"

href="http://go.MY_WEBSITE.com/UnsubscribePage.html" target="_blank">Unsubscribe</a></span>

</div>

</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

Anonymous · ‎01-05-2016

Is this happening in all browsers/Email Clients?

Every email client and browser combination interprets html differently so there must be something wrong with the HTML.

You could use a tool like our Deliver-ability module to trouble shoot this. Its an upgrade from the standard licence.

Anonymous · ‎01-05-2016

Sorry Jamie, I realized my answer to your question was to a different response from someone else.

We all use Outlook so I'm not sure.

Anonymous · ‎01-05-2016

I am able to see the history of the past 2 webinars that show the attended and no shows but for mine is says "attendee list unavailable" and then shows the 0 attended 0 no shows but shows the number of people that did register.

The only thing that I can see is different between mine and the other 2 webinars is that my current one that is showing the data did not get set up to "sync with a SFDC campaign". I'm not sure if that would make a difference with the data results.