Topic: eNewsletter Design Pages that link to <a href="https://ozoneasylum.com/backlink?for=31400" title="Pages that link to Topic: eNewsletter Design" rel="nofollow" >Topic: eNewsletter Design\
 
Author Thread
Radical Rob
Paranoid (IV) Inmate

From: Lost Angeles Kalifornia, via Hawaii....
Insane since: Jun 2001

 IP logged posted posted 10-20-2009 03:37 Edit Quote

Ok here's my situation...

I have a friend that asked me to design a enewsletter for her small company. she has another friend whos an "emarketing guru" thats also advising her.
I designed the enewsletter with inline styles and her "guru" said it would be better to use regular html and not CSS. This makes absolutely no sense to me.
It's already done, I'm just wondering if this sounds right to any of you?

I have no problem going back a few years and doing it that way if its "best practice". I think her concern is cross browser compatibility.

Any thoughts on this??
reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

 IP logged posted posted 10-20-2009 07:59 Edit Quote

If it works it works:
http://www.campaignmonitor.com/css/
http://www.webappers.com/2008/06/14/a-guide-to-css-support-in-email/
Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

 IP logged posted posted 10-20-2009 10:49 Edit Quote

Yeah it's a crying shame but for compatibility reasons HTML emails need to use inline styles (so they don't interfere with web-clients such as GMail or Hotmail) and for really stupid reasons Outlook and its Express version don't use the same rendering engine as IE does! So you basically need to use old fashioned table based layouts.

As far as I'm concerned building HTML emails is the worst job in the world for a Wed Developer.

Radical Rob
Paranoid (IV) Inmate

From: Lost Angeles Kalifornia, via Hawaii....
Insane since: Jun 2001

 IP logged posted posted 10-20-2009 16:43 Edit Quote

I'm so excited that I get to de-volve all this CSS stuff that I've learned over the years. I will peruse through those article Reisio. Thanks.
I tried to search for best practices for designing enewsletters but found mostly templates and junk...
Radical Rob
Paranoid (IV) Inmate

From: Lost Angeles Kalifornia, via Hawaii....
Insane since: Jun 2001

 IP logged posted posted 10-20-2009 21:01 Edit Quote

Ok, tables officially suck. Does anyone remember how to put together a table based site? I've tried 3 times and each one seems so limited now that I know CSS.

Here is the code stripped out of my mail chimp beta.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Arthritis Foundation : eHEADLINES </title>
<link href="favicon.ico" rel="icon" type="image/x-icon" />
</head>
<style>
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MAIN LAYOUT STYLES <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

* {
margin: 0;
padding: 0;
}

body {
background-color:#FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(http://www.wayoutwestenterprises.com/clients/eheadlines/_bg.jpg);
background-repeat: repeat-x;
text-align: center;
font-size: 8px;
line-height: 17px;
}

h1 {
font-size: 14px;
font-weight: bold;
padding-bottom: 5px;
}

h2 {
font-size: 12px;
font-weight: bold;
padding-bottom: 5px;
}

h3 {
}

h4 {
font-size: 1.6em;
color: #37658F;
}


p {
font-size: 1.4em;
margin-bottom: 2em;
}

body {

}

#wrapper {
width: 580px;
text-align: left;
background-color: #fff;
background-image: url(http://www.wayoutwestenterprises.com/clients/eheadlines/body_bg.jpg);
background-repeat: repeat-y;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-position: left top;
}

#legaltop {
padding-top: 10px;
font-size: 8px;
text-align: center;
}

#legalfooter {
font-size: 9px;
text-align: center;
padding-top: 20px;
}

#header {
background-image: url(http://www.wayoutwestenterprises.com/clients/eheadlines/header.jpg);
height: 148px;
width: 580px;
}

#header h1 {
float:left;
padding-left: 40px;
padding-top: 121px;
font-size: 15px;
font-weight: bold;
color: #0062A1;
}

#header h2 {
float:right;
padding-top: 120px;
font-size: 11px;
padding-right: 25px;
color: #0062A1;
}
#content {
background-image: url(http://www.wayoutwestenterprises.com/clients/eheadlines/bodybg.jpg);
background-repeat: repeat-y;
width: 580px;
height: 1400px;
}

#leftcolumn {
float: left;
width: 320px;
padding-left: 30px;
}

#leftcolumn h1 {
background-image: url(http://www.wayoutwestenterprises.com/clients/eheadlines/h1bg.jpg);
height: 30px;
background-repeat: no-repeat;
background-position: left center;
margin-left: -15px;
padding-left: 20px;
color: #FFFFFF;
padding-top: 15px;
}


#rightcolumn {
float: right;
width: 195px;
padding-right: 20px;
}

#footer {
background-image: url(http://www.wayoutwestenterprises.com/clients/eheadlines/footer.jpg);
background-repeat: no-repeat;
height: 48px;
width: 580px;
}

.clear {
clear:both;
}

ul {
font-size: 12px;
padding-left: 5px;
padding-bottom: 10px;
list-style-type: none;
list-style-position: inside;
list-style-image: url(http://www.wayoutwestenterprises.com/clients/eheadlines/af_icon.gif);
}

li {
padding-bottom: 5px;
}
a {
color: #0062A1;
text-decoration: none;
}

a: hover {
text-decoration: underline;
}

.leftimg {
float:left;
padding: 10px;
}

.rightimg {
float:right;
padding: 10px;
}
.centerimg {
display: block;
margin-left: auto;
margin-right: auto
margin-right: auto;
padding: 5px;
margin-right: auto;
padding-bottom: 15px;
}

hr {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-color: #0062A1;
border-right-color: #0062A1;
border-bottom-color: #0062A1;
border-left-color: #0062A1;
}

</style>

<body>

<div id="wrapper">

<div id="legaltop">
<p>You're receiving this newsletter because you signed up at the <a href="#">ARTHRITIS.ORG</a> website.<br />

Trouble reading this email? <a href="#">View it in your browser</a>.
Not interested anymore? <a href="#">Unsubscribe instantly.</a></p>
</div><!-- End Legal Top -->
<div id="header">
<h1>VOLUME 1 - Issue #1</h1>
<h2>Monday, September 30th, 2009</h2>
</div>

<div id="content">

<img src="http://www.wayoutwestenterprises.com/clients/eheadlines/feature.jpg" alt="main feature" width="540" height="175" class="centerimg" />
<div id="leftcolumn">

<h1>New eHeadlines</h1>
<div class="rightimg"><img src="http://www.wayoutwestenterprises.com/clients/eheadlines/walk.jpg" alt="2009 Walk" width="200" height="122" /></div>
<p>Hi *|FNAME|*, this is a BETA version of eHeadlines that I am designing. You are currently on my BETA recipient list to ensure that this email looks good in all email clients. If you notice anything that does not appear properly, please let me know. Thank you! - Rob <a href="#">Read more</a></p>


<h1>Another Headline!</h1>
<div class="leftimg"><img src="http://www.wayoutwestenterprises.com/clients/eheadlines/dc.jpg" alt="DC" width="150" height="146" /></div>
<p>Second article. Fusce et ipsum et nulla tristi-que facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna vehicula urna vel turpis. Suspendisse sagittis ante a urna..</p>
<ul>
<li><a href="#">HAWAII</a></li>

<li><a href="#">SOUTHERN CALIFORNIA</a></li>
<li><a href="#">NEVADA</a></li>
</ul>
<p> Morbi a est quis orci consequat rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula. Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium metus, vitae pretium enim wisi id lectus. Donec vestibulum. Metus eu nunc. <a href="#">Read more</a></p>


<h1>A third Headline!</h1>
<div class="centerimg"><img src="http://www.wayoutwestenterprises.com/clients/eheadlines/banner.jpg" alt="2009 Walk" width="300" height="145" /></div>
<p>Third Article. Fusce et ipsum et nulla tristi-que facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna. Morbi a est quis orci consequat rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula. Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium metus, vitae pretium enim wisi id lectus. Donec vestibulum. Metus eu nunc. <a href="#">Read more</a></p>


</div><!-- End Left Column -->

<div id="rightcolumn">
<h1>In This Issue</h1>
<ul>
<li><a href="#">Al Pacino honored at Gala!</a></li>
<li><a href="#">Lorem ipsum dolor sit met</a></li>
<li><a href="#">Donec porttitor ligula dolor</a></li>
</ul>
<hr />
</p>

<h1>Also this month</h1>
<h2>Pellentesque vel dui sed</h2>
<p>Aucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Phasellus mattis sotudin ligula. <a href="#">Read More </a></p>
<h2>Pellentesque vel dui sed</h2>
<p>Aucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Phasellus mattis sodin ligula. <a href="#">Read More </a>
<hr /></p>


<h1>Unsubscribe</h1>

<p>If you no longer wish to receive this email <a href="*|UNSUB|*">please unsubscribe</a>.</p>

<img src="http://www.wayoutwestenterprises.com/clients/eheadlines/banner2.jpg" alt="Banner" width="170" height="488" class="centerimg" /></div>
<!-- End Right Column -->
</div><!-- End Content -->

<div class="clear"></div>
<div id="footer"></div>

<div id="legalfooter">The Arthritis Foundation - eHeadlines, ©2009 All rights reserved. To unsubscribe, <a href="#">click here</a>. <br />
900 South 2nd St. Los Angeles, CA 90019 888-123-2345 <a href="http://www.robonekea.com">Design by RobOnekea</a></div>

</div><!-- End Wrapper -->
<center><table width="95%" style="clear:both;margin:0px !important;padding:0px !important;margin-top:20px !important;border-top:1px solid #999 !important;border-bottom:1px solid #999 !important;" cellpadding="0" cellspacing="0"><tr>
<td align="left" style="padding:10px !important;margin:0px !important;color:#666 !important;background:#CCC !important;width:50% !important;border-bottom 1px solid #999 !important;font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;vertical-align:middle !important;text-align:left !important;">
Sent to *|EMAIL|*. <a href="*|UNSUB|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Unsubscribe</a> |
<a href="*|UPDATE_PROFILE|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Update Profile</a> |
<a href="*|FORWARD|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Forward to a Friend</a>
</td>
<td align="right" style="padding:10px !important;margin:0px !important;color:#666 !important;background:#CCC !important;width:50% !important;border-bottom 1px solid #999 !important;vertical-align:middle !important;text-align:right !important;">
*|REWARDS|*
</td>
</tr></table></center></body>
</html>

Grrr..... frustrating.
reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

 IP logged posted posted 10-20-2009 21:02 Edit Quote
quote:
Blaise said:

As far as I'm concerned building HTML emails is the worst job in the world for a Wed Developer.

As far as I'm concerned getting HTML in what is supposed to be a plain text only medium is the worst event in the world for an email user.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu