Re: HTML emails not showing up properly in email.

Anonymous · ‎01-28-2016

Hi all. I crafted in email in Dreamweaver with some CSS and images. Pretty simple. It looks correct when I preview the template I created, but doesn't actually show up right when I send the test email.

PREVIEW:

EMAIL:

This is my first time creating an email from scratch so any help would be appreciated.

Anonymous · ‎01-28-2016

Hi Samantha,

In order for anyone to help troubleshoot this, could you please provide us the code for your email?

Thanks!

Anonymous · ‎01-28-2016

<!doctype html>

<head>

<title>Responsive Email Template</title>

.ReadMsgBody {width: 100%; background-color: #ffffff;}

.ExternalClass {width: 100%; background-color: #ffffff;}

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

table {border-collapse: collapse;}

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

body[yahoo] .deviceWidth {width:440px!important; padding:10px 0 !important;}

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

}

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

body[yahoo] .deviceWidth {width:280px!important; padding:10px 0 !important;}

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

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

body[yahoo] .title2 {font-size: 28px!important;}

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

body[yahoo] .hide { display: none !important;}

}

.image {

position: absolute;

left: 400px;

top: 580px;

}

.sidebartext {

position: absolute;

left: 842px;

top: 490px;

}

.link {

position: absolute;

left: 399px;

top: 393px;

width: 400px;

font-size:10.5px;

font-style:italic;

font-family: Arial;

}

</style>

<!--[if lt IE 9]>

<![endif]-->

</head>

<tr>

</table>

<tr>

<tr>

<a href="http://www.imprivata.com"> <div class="sidebartext">DOWNLOAD NOW</a></div></div>

<div class="link">To help navigate the selection process, Imprivata has created the <a href="http://www.imprivata.com">Secure Messaging Vendor Evaluation Checklist. </a></div></div>

</div>

</td>

</tr>

</table>

</td>

</tr>

</table>

<tr>

</table>

</td>

</tr>

</table>

<tr>

</table>

</div>

</td>

</tr>

</table>

</table>

</div>

<tr>

</div>

</td>

</tr>

</table>

</body>

</html>

Anonymous · ‎01-28-2016

A number of things I see here that I would address:

- The email is almost entirely images. While this can often be done to allow for better design, it isn't always ideal for email deliverability. Best practices would recommend you use as much HTML and text as possible

- You are trying to position your CTA button and additional items that aren't part of the main image over top of it by using CSS attributes (ie. left, top, etc). Email clients won't render emails the same as a web browser, which is why the display/preview looks normal but when in an actual send the formatting breaks.

- Recommended practice would be to build your emails in tables, and utilize properly nested tables and cells to achieve the display order and layout you need.

- If you want an easy workaround though, you can always make you email one large flattened image, and use an image map to link specifically around the areas you'd like. This wont allow for much responsiveness, but it might be a quick and dirty solution to your problem.

Mailchimp actually has a pretty helpful guide to getting started in laying out and designing emails and what their best practices and limitations might be.

Anonymous · ‎01-28-2016

Ah, makes sense. Problem with CSS. Trying to get this out the door ASAP so was trying to avoid a lot of coding and tables. How do I map links to the 3 specific areas I need them?

Anonymous · ‎01-28-2016

Not sure what version of Dreamweaver you are using, but in Dreamweaver CC:

**be in "design view" not "live view"

select the image > properties tab (right click, find properties at bottom) > Map (in bottom corner) > select the shape (rectangle most likely) > create the overlay with the tool on the image.

You will see it generate the code in the code window. Be sure to fill in the href with the URL you need.