html email design for gmail – doesn't show images - css

I'm designing a email template and test it on various clients including gmail.
Gmail just won't display the images though. Don't tell me gmail doesn't support it cause I'm getting images all the time.
The logo is of course in the html code, not css.
Here's my code for the header-table:
<table align="center" border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; line-height: 1.5em;">
<tr>
<td>
<p>
<img style="display: block; margin: auto;" align="center" alt="Example logo" src="http://example.com/media/images/email/example-logo.png"/>
</p>
</td>
</tr>
</table>
Any suggestions?

you have mistake
alt="Example" logo"
This html must work
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#fefefe">
<tr>
<td align="center">
<table width="700" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
<!--header starts-->
<tr>
<td align="center" width="100%"><img src="http://siteurl.com/logo_beta.png" alt="Company Logo" /></td>
</tr>
<tr>
<td align="left">
<p><strong><font size="2.5" face="Times New Roman, Arial, Helvetica, sans-serif">Hi User!</font></strong>
</p>
</td>
</tr>
<tr><td><span><br></span></td></tr>
<!--header ends-->
<!--content starts-->
<tr>
<td colspan="3" align="center">
<table width="700" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
<!--Table Content-->
</table>
</td>
</tr>
<!--content ends-->
<!--fotter starts -->
<tr>
<td align ="left">
<p><strong><font size="2.5" face="Times New Roman, Arial, Helvetica, sans-serif">Thanks<br>
With best wishes, Company</font></strong>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

Gmail automatically shows you the images in your messages. If you have a slow Internet connection or limited mobile data, you may want to change your setting so that Gmail asks you before showing images.
Note: This is the reason we shouldn't depend on images. Better way is
to use the style alt text so if images is blocked by email provider due to low internet connection or due to security issue a mail still
should work.
Gmail scans every message for suspicious content and if Gmail considers a sender or message potentially suspicious, images won’t be displayed and you’ll be asked whether you want to see the images.
Actual content is from gmail support.

Related

Aweber email template, In outlook the width is messed up

We are trying to make this work in outlook as well, but the solutions I've found online aren't working. The email in outlook has a width about 1500px.
Does anyone know a solution?
The code is generated in Aweber. We tried many things, but nothing seems to affect the looks in outlook. :(
<!-- LOGO -->
<div style="max-width:680px;margin:auto;" class="email-container">
<!--[if mso]>
<table style=”word-break: break-all;” cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td>
<![endif]-->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width:680px;">
<tbody><tr>
<td style="padding:30px 0;text-align:center;" class=""><aw:header></td>
</tr>
</tbody></table>
<!-- BODY -->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width:680px;border-radius:3px;overflow:hidden">
<tbody>
<!-- 1 Column Text + Button -->
<tr>
<td bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody><tr>
<td mc:edit="lead_copy" style="padding:40px;font-family:sans-serif;font-size:14px;line-height:22px;color:#555555;" class=""><aw:body></td>
</tr>
</tbody></table>
</td>
</tr>
<!-- Clear Spacer -->
<tr>
<td height="40" style="font-size:0;line-height:0;" class="">
 
</td>
</tr>
<!-- 3 Cols -->
<!-- Clear Spacer -->
<!-- Minuscule -->
</tbody></table>
<!-- Email Footer -->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width:680px;">
<tbody><tr>
<td style="padding:40px 10px;width:100%;font-size:12px;font-family:sans-serif;line-height:18px;text-align:center;color:#888888;" class="x-gmail-data-detectors"><aw:footer></td></tr>
</tbody></table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
Outlook doesn't read the max-width value at all. If you use the max-width in combination with width:100%, that will help. Alternatively, you can use some conditional statements that will help you out with the width handling on different clients. I asked a member of AWeber's template team for you and they suggested these two:
<!--[if !mso]><!--><table cellpadding="0" cellspacing="0" style="max-width:600px!important; width:100%;"><![endif]-->
<!--[if gte mso 9]><table cellpadding="0" cellspacing="0" width="600"><![endif]-->
Having the conditionals will let the width be 100% on mobile devices, which I assume you also want, but be 600 elsewhere.

Using a WordPress featured image in a MailChimp RSS-to-Email campaign

I'm using MailChimp to create a RSS-to-Email campaign based on a WordPress feed.
However, the FEEDITEM:IMAGE tag doesn't grab the featured image from my posts...
I've tried several solutions including dedicated plugins (like this one: https://wordpress.org/plugins/featured-images-for-rss-feeds/) and customized feed-rss2.php (as explained here: https://stackoverflow.com/questions/ask?title=mailchimp%20featured%20image).
Here is my HTML:
<table mc:repeatable="layout" mc:variant="1/1 Panel" bgcolor="#f6f6f6" align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table class="table600" bgcolor="#FFFFFF" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-left:20px; margin-right:20px;">
<tr>
<td height="50"></td>
</tr>
<tr>
<td align="center">
<table align="center" class="table-inner" width="550" border="0" cellspacing="0" cellpadding="0">
*|FEEDBLOCK:http://louerunmanager.com/feed/|*
*|FEEDITEMS:[$count=1]|*
<!-- img -->
<tr>
<td align="center" style="display:block; line-height:0px; font-size:0px; border:0px;" class="img1" alt="img" width="550" height="190">
<img src="*|FEEDITEM:IMAGE|*">
</td>
</tr>
<!-- end img -->
<tr>
<td height="25"></td>
</tr>
<!-- title -->
<tr align="left" valign="top">
<td style="font-family: 'Open Sans', Arial, sans-serif; font-size:18px; color:#3b3b3b; line-height:30px; font-weight: bold;" mc:edit="1/1 panel title">*|FEEDITEM:TITLE|*</td>
</tr>
<!-- end title -->
<tr>
<td height="10"></td>
</tr>
<!-- content -->
<tr valign="top">
<td style="font-family: 'Open Sans', Arial, sans-serif; font-size:13px; color:#7f8c8d; line-height:26px;" mc:edit="1/1 panel content">*|FEEDITEM:CONTENT_TEXT|*</td>
</tr>
<!-- end content -->
*|END:FEEDITEMS|*
*|END:FEEDBLOCK|*
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
And here is the feed: http://louerunmanager.com/feed/.
As stated in MailChimp's documentation, FEEDITEM:IMAGE should display the content of media:content i.e. the featured image...
Any idea?
Thanks!
The |FEEDITEM:IMAGE| and the |RSSITEM:IMAGE| grab the <media:content /> from the RSS feed, not the url from the image.
Instead of including the mailchimp tag as it is in the code in example:
<img src="*|FEEDITEM:IMAGE|*">
Try placing the tag by itself or inside the
<td>*|FEEDITEM:IMAGE|*</td>
or
<div>*|FEEDITEM:IMAGE|*</div>
It worked for me.
Check the example in the Mailchimp blog article: https://blog.mailchimp.com/rss-to-email-enhancement-for-publishers/

how to make 6 images on one row go into 3 images on 2 row on a smaller screen

i have 6 social media icons for a footer of an e-mail. Is it possible to make this responsive for phones so the social media icons go from 6 to 3 in one row?
I have tried to use both divs and tables with bootstrap but both are displaying incorrectly. I would prefer tables as they work with outlook e-mail.
Bootstrap code:
<td class="col-xs-4 col-sm-4 col-md-2">
You can put each set of 3 icons into separate columns which stack on xs.
<div class="col-xs-12 col-md-6>...Three icons go here....</div>
<div class="col-xs-12 col-md-6>...Three icons go here....</div>
Edit: Since this is for Outlook, Bootstrap will not play nicely with it. More info can be found here: Has anyone gotten HTML emails working with Twitter Bootstrap?
Would something like this work for you?
As an exmaple; this uses a media query, so that when the device width is below a certain size it resizes any 640px widths to 320px and then applies the "wrap" (wr) and "float" (fl) classes to wrap the columns beneath eachother.
If you take the HTML and stick it in Chrome of Firefox and resize the window you can see how it works.
<!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>none</title>
<style type="text/css">
#media only screen and (max-width: 580px){
*[class].wr{ display:block !important; }
*[class].fl{ float:left !important; }
*[class].w320{ width:320px !important; }
</style>
</head>
<body style="padding:0px; margin:0PX;" bgcolor="#DEDEDE">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#DEDEDE" style="table-layout:fixed; margin:0 auto;">
<tr>
<td width="100%" align="center" valign="top" bgcolor="#DEDEDE">
<!--Table to wrap email-->
<!--Table with images in-->
<table width="640" border="0" cellpadding="0" cellspacing="0" class="w320">
<tr class="wr">
<!--Top row-->
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#ffcc00"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#ccff00"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#00ffcc"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
</tr>
</table>
</td>
<!--End top row-->
<!--Bottom row-->
<td class="fl wr">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#3377ff"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#ff3377"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#7733ff"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
</tr>
</table>
</td>
<!--End bottom row-->
</tr>
</table>
<!--End table with images in-->
<!--End of table to wrap email-->
</td>
</tr>
</table>
</body>
</html>
Note: This works across iPhone, Android 2.3 and 4.2. Problems occur in Android 4.4 kitkat but there is a workaround for it.
The way to do it so it works everywhere (outlook and all android included is with floated tables:
CSS:
#media only screen and (max-width: 480px) {
*[class*="drop"] { float:none!important; clear:both!important; width:100%!important; padding:0!important; display:block!important; }
}
HTML:
<table width="300" border="0" cellpadding="0" cellspacing="0" class="drop" align="left">
<tr>
<td align="left" valign="top"><!--image 1 goes in here--></td>
<td align="left" valign="top"><!--image 2 goes in here--></td>
<td align="left" valign="top"><!--image 3 goes in here--></td>
</tr>
</table>
<!--[if mso]></td>
<td align="left" valign="top" width="50%"><![endif]-->
<table width="300" border="0" cellpadding="0" cellspacing="0" class="drop" align="right">
<tr>
<td align="left" valign="top"><!--image 1 goes in here--></td>
<td align="left" valign="top"><!--image 2 goes in here--></td>
<td align="left" valign="top"><!--image 3 goes in here--></td>
</tr>
</table>
</td>
The table widths would need to be changed to suit your email width so they equal 50% of it.
You will notice the commented closing and opening td in the middle - this is an outlook condition, so for outlook only there will be a td wrapping each table.
If your tables don't need to be exactly 50% (as in there is padding between them) then you can leave out the outlook comment and just size your tables smaller than 50%, and make sure 1 is floted left and the other is floated right, leaving the gap between them that you need as padding. So long as this gap is more than about 10px, it should work in outlook.
Also be aware of your table structure when you use this outlook comment. If this is used in a table with more rows, you will get column span issues in outlook, as this row with have an extra column in outlook. Best to nest a fresh table inside a td before using this outlook fix.
Also note that the float is specified on the tables using the align attribute. This is to accommodate the older versions of outlook that don't recognize the css property float.

min-height css is not working in outlook 2007 newsletter

i have made a newsletter in html with inline css and its working fine but when we are seeing it in outlook its not looking good and there are some css missing.its working fine with all other like gmail.
Here is the link for that html template:
http://fashionfad.in/newsletter/april-29/
Outlook is one of the mail services with the poorest support for css styles. Here you have a list of supported styles in different mail clients. I can't find min-height support, but from what I see, min-width and max-width are also not supported.
Min-height is not supported. Instead set your table cell height="" to the minimum and it will stretch larger if needed:
<!-- this has height set to 100, but stretches larger vertically -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td valign="top" height="100">
Table 1<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</td>
</tr>
</table>
<br><br>
<!-- this has height set to 100, faking "min-height" -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td valign="top" height="100">
Table 1<br>...
</td>
</tr>
</table>
Alternatively if you are clever with your table nesting, you can fake min-height. This is better when you don't want to set a specific height on your cells, allowing the height to be controlled by the content instead:
<!-- this has no "min-height" -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td valign="top">
Table 1<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</td>
</tr>
</table>
</td>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999">
<tr>
<td valign="top">
Table 2<br>...<br>...<br>...<br>...
</td>
</tr>
</table>
</td>
</tr>
</table>
<br><br>
<!-- this fakes "min-height" -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td valign="top">
Table 1<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</td>
</tr>
</table>
</td>
<td valign="top" bgcolor="#999999">
Table 2<br>...<br>...<br>...<br>...
</td>
</tr>
</table>

Making whole <td> Clickable through anchor tag

While creating an html email for Outlook, I stumbled upon a small problem that I have not been able to fix.
Below is a screen shot of an html table. I need to make the whole area clickable and not just the text. When I put <a href="#"> around the <td> or <table> it works in browsers but not in Outlook.
Here is the code:
<table border="0" cellpadding="0" cellspacing="0" style="border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;background-color: #2FBA45;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" valign="middle" style="font-family: Arial;font-size: 22px;padding: 15px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
Yes please, send me a quote.
</td>
</tr>
</tbody>
</table>
I know this is an old question, but I was looking for an answer to this problem (clickable whole buttons in Outlook) and stumbled upon the following solution:
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" valign="middle" >
<!-- start of Outlook compatible button generated by http://buttons.cm/ -->
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://yoururlhere.com/" style="height:52px;v-text-anchor:middle;width:330px;" arcsize="10%" stroke="f" fillcolor="#2fba45">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://yoururlhere.com/"
style="background-color:#2fba45;border-radius:5px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:52px;text-align:center;text-decoration:none;width:330px;-webkit-text-size-adjust:none;">Yes please, send me a quote.</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
<!-- end of Outlook compatible button generated by http://buttons.cm/ -->
</td>
</tr>
</tbody>
</table>
Note I have not tested the above code.
Other answers did link to the campaignmonitor website, but not this link which provided the solution.
That blog post at campaignmonitor mentions that they have created a specific website to generate outlook compatible clickable buttons - http://buttons.cm based on a solution created by Stig M (#stigm on twitter).
I do not work for campaignmonitor.
Hope that helps someone.
try this
http://jsfiddle.net/KrRzP/
<table border="0" cellpadding="0" cellspacing="0" style="border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;background-color: #2FBA45;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; cursor:pointer;">
<tbody>
<tr>
<td align="center" valign="middle" style="font-family: Arial;font-size: 22px;padding: 15px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
Yes please, send me a quote.
</td>
</tr>
</tbody>
</table>
You can try to use the onClick, <td onClick="go to anchor">. In the inline style you should add cursor: pointer so the cursor is changed to the 'hover a link'-pointer.
Try removing the target="_self". As Outlook is a email client, it probably doesn't recognize it and may be causing the issue.
On a side note, If you are using anchor links within your email (linking elsewhere on the same page), this is not fully supported in all email browsers. Here is the support chart
Use JavaScript "innerHTML" property. By default, in HTML5 you cannot directly add an anchor tag in a table cell element.
<html>
<title>
</title>
<head>
</head>
<body>
<table>
<thead>
<tr>
<td>Youtube</td>
<td id="assign_anchor_tag_here"></td>
</tr>
<thead>
</table>
<script>
var td_element = document.getElementById("assign_anchor_tag_here");
td_element.innerHTML = "<a href='https://www.youtube.com'>Click Here!</a>";
</script>

Resources