Hello, i have never had to create a promo email. The ones that look like an ad w/images & all.
I did an inspect element and it looks like an iframe w/the html code. But i’d like to find a tutorial w/more info.
As am not sure what exactly they are called thought i’d ask here.
thx
D
Google “HTML e-mail templates” and find a template you like.
The iframe you see is googles doing. The HTML inside the iframe is the authors code when he wrote the e-mail.
cool thx
D
ok cool. was wondering if anyone here received the most awesome html email ever?
They seem a bit limited. I usually just delete the ones i get. But now that am trying one was wondering if there were any tips or advice on how to make them more interactive.
thx
D
And lastly(I hope)How do i embed the images in such an email?
As opposite to linking to them from outside.
thx
D
Use <img> and reference the URL on your server. E.g.
<img src="http://www.site.com/images/masthead.jpg" alt="Alt">
No thx, i know I can do that. But was wondering if there was another way. I guess you can attach them. But need to know more.
I know you could do base64 encoding but that doesn’t work in all browser.
D
Just google “embedding images in html email”. You get many results. One of them being - http://stackoverflow.com/questions/6706891/embedding-image-in-html-email
Come back if you are unable to get your attempt working.
thx. i shall return.
pdxSherpa,
Another option to coding the promo email is MailChimp.
Advantages of MailChimp are as follows.
- Learning curve for MailChimp is much shorter than learning html or markdown to create the email campaign. Really easy to learn interface. Yes, you can include images in your email campaigns.
- Plenty of video tutorials.
- MailChimp is free for up to 2,000 subscribers with 12,000 emails per month.
- Proven track record. We have been using it successfully for keeping our customers updated.
There are cons to it but so far we have been unable to find any.
Obviously, we recommend MailChimp.
Thanks and I am certain that MailChimp will help you.
Braulio
Thank you Brauilo as well.
Basically at my job one of the devs wound up having to create an html eamil for a projects and was having some issues as he had not done it before.
Never done one either but figured I should at least get acquainted w/it. So am doing a tutorial and grabbing info.
What i can say so far is that all the inline coding makes me love css all the more. Can’t believe that is how we used to code.
cheers all. Will finish up what am doing and post the template jic.
Ok that was not exactly the normal amount of fun one usually has when styling a page. I got it mostly to work. But still have a prob bringing in background images/colors
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>my first email page</title>
<style type="text/css">
html,body{width:100%; margin:0; padding:0;background:#000066;}
@media (max-width:600px){
table.container {max-width:480px !important;}
td.logo img{display:none;}
td.logo {width:100%; height: 134px; background:#fff }
td.banner img{display:none;}
td.banner {width:100%; height: 134px; background:#fff url(http://agileart.us/outboundImgs/emailBanner480.png)no-repeat 0px 0px;}
/* ............................... */
td.content {width:100% !important;}
td.content{padding-bottom: 30px !important; background:url()no-repeat 0px 0px;}
/* ............................... */
td.promos table {width:200px !important;}
td.promos table td h2{margin-bottom:10px; }
td.promos table td img{display:none; }
td.promos table td img{display:none; }
td.promos table td h2{margin-bottom:10px; }
td.promos table td img{display:none; }
td.promos table.promo1{width:50% !important;}
td.promos table.promo1 td{background: url(http://agileart.us/outboundImgs/promo1med.png)no-repeat 0px 0px; padding:100px 0px 0px 0px;}
td.promos table.promo2{width:50% !important;}
td.promos table.promo2 td{background: url(http://agileart.us/outboundImgs/promo2med.png)no-repeat 0px 0px;padding:100px 0px 0px 0px;}
td.promos table.promo3{width:50% !important;}
td.promos table.promo3 td{background: url(http://agileart.us/outboundImgs/promo3med.png)no-repeat 0px 0px;padding:100px 0px 0px 0px;}
/* ............................... */
td.callouts table{width:50% !important;magin-bottom:510px;}
td.callouts table td {background-size: 65px 65px;}
td.callouts table{width:50% !important;magin-bottom:510px;}
td.callouts table img{display:none;}
td.callouts table br{display:none;}
td.callouts table a {display:block;}
td.callouts table td {background-size: 65px 65px;}
td.callouts table.callout1 td{background: url (http://agileart.us/outboundImgs/tool1.jpg)no-repeat 0px -13px; padding:0px 30px 0px 60px !important; }
td.callouts table.callout2 td{background: url (http://agileart.us/outboundImgs/tool2.jpg)no-repeat 0px -13px; padding:0px 30px 0px 60px !important; }
td.callouts table.callout3 td{background: url (http://agileart.us/outboundImgs/tool3.jpg)no-repeat 0px -13px; padding:0px 30px 0px 60px !important; }
td.callouts table.callout4 td{background: url (http://agileart.us/outboundImgs/tool4.jpg)no-repeat 0px -13px; padding:0px 30px 0px 60px !important; }
/* ............................... */
}
@media (max-width:599px){
table.container {width:100% !important;}
table.container.td {border:none !important;}
td.logo img{display:none;}
td.logo {width:100%; height: 134px; background:#fff url()}
td.banner img{display:none;}
td.banner {width:100%; height: 134px; background:#fff url(http://agileart.us/outboundImgs/emailBanner480.png)no-repeat 0px 0px;}
/* ............................... */
td.content {width:100% !important;}
td.content img{display:none;}
td.content {width:100%; height: 134px; background:#fff url(http://agileart.us/outboundImgs/emailBannerBottom480.jpg)no-repeat 0px 0px;}
/* ............................... */
td.promos table {width:200px !important;}
td.promos table td h2{margin-bottom:10px; }
td.promos table td img{display:none; }
td.promos table.promo1{width:100% !important;}
td.promos table.promo1 td{background: url(http://agileart.us/outboundImgs/promo1med.png)no-repeat 0px 0px; padding:100px 0px 0px 0px;}
td.promos table.promo2{width:100% !important;}
td.promos table.promo2 td{background: url(http://agileart.us/outboundImgs/promo2med.png)no-repeat 0px 0px;padding:100px 0px 0px 0px;}
td.promos table.promo3{width:100% !important;}
td.promos table.promo3 td{background: url(http://agileart.us/outboundImgs/promo3med.png)no-repeat 0px 0px;padding:100px 0px 0px 0px;}
/* ............................... */
td.callouts table{width:100% !important;margin-bottom:10px;}
td.callouts table img{display:none;}
td.callouts table br{display:none;}
td.callouts table a {display:block; width:150px;clear:both; float:right;}
td.callouts table td {background-size: 100px 100px;}
td.callouts table.callout1 td{background:url(http://agileart.us/outboundImgs//tool1md.jpg)no-repeat 0px 0px; padding:10px 0px 20px 110px !important; width:100%; border-bottom:1px dotted #000;}
td.callouts table.callout2 td{background:url(http://agileart.us/outboundImgs//tool2md.jpg)no-repeat 0px 0px; padding:10px 0px 20px 110px !important; width:100%; border-bottom:1px dotted #000;}
td.callouts table.callout3 td{background:url(http://agileart.us/outboundImgs/tool3md.jpg)no-repeat 0px 0px; padding:10px 0px 20px 110px !important; width:100%; border-bottom:1px dotted #000;}
td.callouts table.callout4 td{background:url(http://agileart.us/outboundImgs/tool4md.jpg)no-repeat 0px 0px; padding:10px 0px 20px 110px !important; width:100%; border-bottom:1px dotted #000;}
/* ............................... */
td.footer {margin-bottom: 300px;}
}
@media (max-width:360px){
table.container {width:100% !important;}
table.container.td {border:none !important;}
td.logo {background:#fff }
td.banner {background:#fff url(http://agileart.us/outboundImgs/emailBanner350.png)no-repeat 0px 0px; width:350px; height:98px;}
/* ............................... */
td.content {width:100% !important;}
td.content img{display:none;}
td.content {width:100%; height: 134px; background:#fff url(http://agileart.us/outboundImgs/emailBannerBottom350.jpg)no-repeat 0px 0px;}
/* ............................... */
td.promos table {width:200px !important;}
td.promos table td h2{margin-bottom:10px; }
td.promos table td img{display:none; }
td.promos table.promo1{width:100% !important;}
td.promos table.promo1 td{background: url(http://agileart.us/outboundImgs/promo1sml.png)no-repeat 0px 0px;padding:100px 0px 0px 0px; }
td.promos table.promo2{width:100% !important;}
td.promos table.promo2 td{background: url(http://agileart.us/outboundImgs/promo2sml.png)no-repeat 0px 0px;padding:100px 0px 0px 0px;}
td.promos table.promo3{width:100% !important;}
td.promos table.promo3 td{background: url(http://agileart.us/outboundImgs/promo3sml.png)no-repeat 0px 0px;padding:100px 0px 0px 0px;}
td.callouts table{width:100% !important;magin-bottom:510px;}
td.callouts table img{display:none;}
td.callouts table br{display:none;}
td.callouts table a {display:block; width:150px;clear:both; float:right;}
td.callouts table td {background-size: 65px 65px;}
td.callouts table.callout1 td{background: url(http://agileart.us/outboundImgs/tool1sml.jpg)no-repeat 0px 0px;padding-left:20px 0px 10px 90px;}
td.callouts table.callout2 td{background: url(http://agileart.us/outboundImgs/tool2sml.jpg)no-repeat 0px 0px;padding:20px 0px 10px 90px;}
td.callouts table.callout3 td{background: url(http://agileart.us/outboundImgs/tool3sml.jpg)no-repeat 0px 0px;padding-left:20px 0px 10px 90px;}
td.callouts table.callout4 td{background: url(http://agileart.us/outboundImgs/tool4sml.jpg)no-repeat 0px 0px;padding-left:20px 0px 10px 90px;}
td.footer {margin-bottom: 300px;}
}
</style>
</head>
<!--[if gte mso 9]>
<v:background fill="t">
<v:fill type="tile" src="background: url(http://agileart.us/outboundImgs/bodyBg.jpg)no-repeat 0px 0px;" />
</v:background>
<![endif]-->
<body background="#000066 url(http://agileart.us/outboundImgs/bodyBg.jpg)no-repeat 0px 0px;">
<table id="wrapTable" class="wrapTable" width="100%" cellspacing="0" cellpadding="0" bgcolor="transparent" >
<tr>
<td>
<table id="container" class="container" width="600" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="logo" class="logo" valign="top" bgcolor="#ffffff" style="padding:10px 20px 0px 30px; border-top:1px solid #FF8533;border-right:1px solid #FF8533;border-left:1px solid #FF8533;">
<a style="text-decoration:none;" href=" "><img style=" border:none;" src=" alt="our logo" width="630" height="150" border="0">
</td></a>
</tr>
<tr>
<td id="headline" class="headline" valign="top" bgcolor="#ffffff" style="padding:15px 20px 5px 30px; border-right:1px solid #FF8533; border-left:1px solid #FF8533; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px;">
<h2 style="margin:0px 0px 0px 15px; padding:0px 0px 50px 0px; font-weight:bold; font-size:32px; color:#000066;">Fun, nutritious and good for you! ™</h2>
</td>
</tr>
<tr>
<td id="banner" class="banner" cellspacing="0" cellpadding="0" valign="bottom" bgcolor="transparent" style="margin:0; padding:0; border-right:1px solid #FF8533; border-left:1px solid #FF8533;">
<img style="border:none; display:block; margin:0px padding:0px; " src="http://agileart.us/outboundImgs/emailBanner.png" alt="our devs" width="898" height="250" border="0">
</td>
</tr>
<tr>
<td id="content" class="content" valign="top" bgcolor="#fff" cellspacing="0" cellpadding="0" style="padding:25px 25px 10px 25px; border-right:1px solid #FF8533; border-left:1px solid #FF8533; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; background:#fff url(http://agileart.us/outboundImgs/emailBannerBottom.jpg)no-repeat 0 0; ">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.EXAMPLE.com/" style="height:40px;v-text-anchor:middle;width:300px;" arcsize="10%" stroke="f" fillcolor="#d62828">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
roll on the floor
</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]> <!-->
<table width="160" align="right" class="button" style="0px 0px 10px 30px">
<tr>
<td style="text-align:center; background:#000066; padding:10px 7px; border:1px solid #003366; border-radius:5px;">
<a style="text-decoration:none;" href="" style="text-align:center; color:#ffffff; font-size:18px; letter-spacing:1px; text-decoration:none;font-family: Arial, Helvetica, sans-serif;" >roll on the floor</a>
</td>
</tr>
</table>
<!-- <![endif]-->
<h3 style="color:#000066; font-size:24px; letter-spacing:1px; font-family: Arial, Helvetica, sans-serif;">New brown bag series</h3>
<p>Scratch the furniture hopped up on catnip stare at the wall, play with food and get confused by dust hide from vacuum cleaner but intently sniff hand i like big cats and i can not lie. Love to play with owner's hair tie roll on the floor purring your whiskers off so throwup on your pillow, for eat grass, throw it back up for spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce so hopped up on catnip, but chase red laser dot. Sit in box chase dog then run away and make muffins, yet make meme, make cute face cat slap dog in face or leave hair everywhere.<br/>Flop over. Hunt by meowing loudly at 5am next to human slave food dispenser stare at ceiling hunt by meowing loudly at 5am next to human slave food dispenser make meme, make cute face. Under the bed i am the best destroy couch sleep on keyboard eat and than sleep on your face or my left donut is missing, as is my right</p>
<p>
Then drop by our Dev's chats. Monthly, bimonthly or sporadic.
</p>
</td>
</tr>
<tr>
<td id="promos" class="promos" valign="top" bgcolor="#33CC33;" cellspacing="0" cellpadding="0" style="padding:10px 30px 20px 30px; border-right:1px solid #FF8533; border-left:1px solid #FF8533; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px;">
<table id="promo1" class="promo1" width="250" align="left">
<tr>
<td>
<img class="promo" alt="promo1Img" src="http://agileart.us/outboundImgs/promo1.png" style="border:none;">
<h2>promo1</h2>
<p>attack feet hiss at vacuum cleaner for cough furball. Destroy couch rub face on owner, but leave hair everywhere pelt around the house and up and down stairs chasing phantoms stick butt in face. </p>
<br/>
<a href=" " style="background:#0A290A; border:1px dotted #000; border-radius:5px;padding:5px;text-decoration:none; color:#fff;">learn more</a>
</td>
</tr>
</table> <!-- end mini table1 -->
<table id="promo2" class="promo2" width="250" align="left">
<tr>
<td>
<img class="promo" alt="promo1Img" src="http://agileart.us/outboundImgs/promo2.png" style="border:none;">
<h2>promo2</h2>
<p>attack feet hiss at vacuum cleaner for cough furball. Destroy couch rub face on owner, but leave hair everywhere pelt around the house and up and down stairs chasing phantoms stick butt in face. </p>
<br/>
<a href=" " style="background:#0A290A;color:#fff; border:1px solid #000; border-radius:5px;padding:5px;text-decoration:none; ">learn more</a>
</td>
</tr>
</table> <!-- end mini table2 -->
<table id="promo3" class="promo3" width="250" align="left">
<tr>
<td>
<img class="promo" alt="promo1Img" src="http://agileart.us/outboundImgs/promo3.png" style="border:none;">
<h2>promo3</h2>
<p>attack feet hiss at vacuum cleaner for cough furball. Destroy couch rub face on owner, but leave hair everywhere pelt around the house and up and down stairs chasing phantoms stick butt in face. </p>
<br/>
<a href="" style="background:#0A290A;color:#fff; border:1px solid #000; border-radius:5px;padding:5px;text-decoration:none; ">learn more</a>
</td>
</tr>
</table> <!-- end mini table3 -->
</td>
</tr>
<tr>
<td id="callouts" class="callouts" valign="top" bgcolor="#fff" cellspacing="0" cellpadding="0" style="border-right:1px solid #FF8533; border-left:1px solid #FF8533;-webkit-box-shadow: 0px 10px 24px 0px rgba(50, 50, 50, 0.25);-moz-box-shadow:0px 10px 24px 0px rgba(50, 50, 50, 0.25);box-shadow: 0px 10px 24px 0px rgba(50, 50, 50, 0.25);">
<table id="callout1" class="callout1" width="223" align="left" border="0" cellpadding="0" >
<tr>
<td valign="top" width="223" style="padding:0px 10px 0px 10px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height:20px;" >
<img alt="tool1" src="http://agileart.us/outboundImgs/tool1.jpg" width="75" height="75" style="border:none;"><br/>
<p>Wow...css. And am wondering why it is only Monday</p>
<a href=" " style="background:#000066; color:#fff; border:1px solid #000; border-radius:5px;padding:5px;text-decoration:none; ">learn even more</a>
</td>
</tr>
</table>
<table id="callout2" class="callout2"width="223" align="left" border="0" cellpadding="0" >
<tr>
<td valign="top" width="223" style="padding:0px 10px 0px 10px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height:20px;" >
<img alt ="tool2" src="http://agileart.us/outboundImgs/tool2.jpg" width="75" height="75" style="border:none;"><br/>
<p>Incredible HTML. Where is your dog now?</p>
<a href=" " style="background:#000066; color:#fff; border:1px solid #000; border-radius:5px;padding:5px;text-decoration:none; ">learn even more</a>
</td>
</tr>
</table>
<table id="callout3" class="callout3" width="223" align="right" border="0" cellpadding="0" >
<tr>
<td valign="top" width="223" style="padding:0px 10px 0px 10px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height:20px;" >
<img alt="tool3" src="http://agileart.us/outboundImgs/tool3.jpg" width="75" height="75" style="border:none;"><br/>
<p>Stunning JS. Your mom called</p>
<a href=" " style="background:#000066; color:#fff; border:1px solid #000; border-radius:5px;padding:5px;text-decoration:none; ">learn even more</a>
</td>
</tr>
</table>
<table id="callout4" class="callout4" width="223" align="right" border="0" cellpadding="0" >
<tr>
<td valign="top" width="223" style="padding:0px 10px 0px 10px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height:20px;" >
<img alt="tool4" src="http://agileart.us/outboundImgs/tool4.jpg" width="75" height="75" style="border:none; "><br/>
<p>Unberable PHP. I think you left the oven on.</p>
<a href=" " style="background:#000066; color:#fff; border:1px solid #000; border-radius:5px;padding:5px; text-decoration:none;" >learn even more</a>
</td>
</tr>
</table>
<br style="clear:both;">
</td>
</tr>
<tr>
<td id="footer" class="footer" valign="top" bgcolor="#fff" cellspacing="0" cellpadding="0" style="border-right:1px solid #FF8533; border-bottom:2px solid #FF8533; border-left:1px solid #FF8533;padding:0px 10px 0px 10px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height:20px;">
<h4> DEV CHATS!!!!© ™ *** DON'T EVEN REPLY TO THIS EMAIL...Really. Don't ***</h4>
<br/>
<p>You can not unsubscribe from this eamails.</p>
</td>
</tr>
</table> <!-- end container table -->
</td>
</tr>
</table> <!-- end wrap table -->
</body>
</html>
even this hack that was supposed to work from https://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email/ did not add a background color &or image to the body tag.
Andy advice on that one?
Otherwise it turned out the simplested way to add imges was to call them in from a site. Adn even then outlook to gmail will show the images, gmail to outlook wont’. And while it is responsive in the browser it is not responsive in the email.
did try to put this in codepen, but it didn’t take it.
D
Yeah…no media queries should be used. CSS Support is terrible. Don’t rely on it.
well, not realying on them per se. But dollars to donuts (whatever that means) you’ll wind up a with a client that wants it. So enjoyed coding the responsive for the practice, but not surprised it didn’t work. I’d settle for finding a way to make the background image for the body work.
D
Last I knew some email clients don’t call external images to prevent emails from having “beacon” images and only show them if they’re inline attached.
But it seems you should be able to get background color to show so there must be some other problem in play here.
Not like i haven’t made mistakes before…
after my experience creating html email i feel we should go back to carrier pigeons. It would create a new green job market and it would be a lot prettier.
2 Likes
There’s a second reason for this too. Too many spammers used images to try to avoid the spam filters most company or users have. Of course, that work in the beginning. Anti-spam software couldn’t read the message in the image and let the spam pass… but the software got “smarter” and started to stop messages when the images where too big, the ratio with conent was low, etc.
2 Likes
for outlook this vml code helps w/the bg image. at least on the sandbox.
<table id="background" class="background" border="1" cellpadding="25" cellspacing="0" width="550" >
<tr>
<td background="http://agileart.us/outboundImgs/bodyBg.jpg" width="550" height="150">
<!--[if mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior:url(#default#VML); display:inline-block; position:absolute height:402px; width:550px; top:0; left:0; border:0; z-index:1;' src="http://agileart.us/outboundImgs/bodyBg.jpg"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior:url(#default#VML); display:inline-block; position:absolute height:402px; width:600px; top:-5px; left:-10; border:0; z-index:2;'>
<![endif]-->
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
<table id="content" class="content" border="1" cellpadding="0" cellspacing="0" width="500">
<tr>
<td align="center" valign="top" width="500">
adfs
</td>
</tr>
<tr>
<td align="center" valign="top" width="500">
afasd
</td>
</tr>
<tr>
<td align="center" valign="top" width="500">
afasd
</td>
</tr>
</table><!-- end content table -->
</td>
</tr>
</table><!-- end background table -->
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.